Question

所以我对javascript比较陌生。作为学校项目，我们必须使用HTML，CSS和Javascript编写游戏。

所以我想廉价地从New Super Mario Bros Ds重新制作游戏Sort或'Splode'。

我已经对炸弹的随机生成进行了编程，并对炸弹的移动进行了动画处理。如果它们在中间区域（产卵的地方）过长，则会爆炸。

但是我还没有对爆炸进行编程。我想先编程拖放。我只想拖放炸弹。就这么简单，我猜剩下的我自己做。

我搜索了一个教程，发现了该网页：https://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/

我在游戏中重新创建了一个，但是它不起作用...

对不起，我的验证码错误。有人可以告诉我该怎么做吗？

最好，塞巴斯蒂安

enter image description here

<!DOCTYPE html>
<html>
<head>
<title>BOMB-Sorter</title>

<style>
canvas {
    background-color:#fff;
    border:7px solid #000;
    border-radius: 5px;
    display: inline;
    background-image: url("img/background.jpg");
    background-size: cover;
}

body{
    display: flex;

    justify-content: center;
    align-items: center;

}


</style>
<script>

class GraphObj {

  constructor(x, y, w, h, c, x_vel, y_vel, t, d) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.c = c;
    this.x_vel = x_vel;
    this.y_vel = y_vel;
    this.t = t;
    this.d = d;
  }

  info() {
    return "\ngraphical object: x="+this.x + ", y="+this.y+", w="+this.w+", h="+this.h+", h="+this.c;
  }
}


// Declaration of Lists
var bList = null; // List of Bombs
var xlist = null;
var ylist = null;

var ref_time=0; // Reference Time
var lives = 10;
var score = 0;

var dragok = false;

var c = document.getElementById("myCanvas");



function drawGrid(ele,ctx){ // declaration of a new function
    
    ctx.globalAlpha = 0.5;
    ctx.fillStyle = "#ff9999";
    ctx.fillRect(0,0,ele.width/3,ele.height)

    ctx.fillStyle = "#60615a";
    ctx.fillRect(2* (ele.width/3),0,ele.width/3,ele.height)

    ctx.globalAlpha = 1;
    ctx.setLineDash([25, 15]);
    ctx.moveTo(ele.width/3 +1,0);
    ctx.lineTo(ele.width/3 +1, ele.height);

    ctx.moveTo(2*(ele.width/3 -1),0);
    ctx.lineTo(2*(ele.width/3 - 1), ele.height);
    ctx.lineWidth = 10;
    ctx.strokeStyle = "#f5f242";
    ctx.stroke();
}

function drawAll()
{
    var ele = document.getElementById("myCanvas");
    var ctx = ele.getContext("2d");
    
    ele.width = ele.width; // clear everything!

    drawGrid(ele,ctx); // call the function ...
    
    var bombb = document.getElementById("bombb");
    var bombr = document.getElementById("bombr");
    var bombr_step = document.getElementById("bombr_step");
    var bombb_step = document.getElementById("bombb_step");
    var bombw = document.getElementById("bombw");

    // draw bombs
    for (var i=0; i<bList.length; i++)
    {
        var o = bList[i];
        if(o.c == 0 && o.t != 8 && o.t != 10 ){
            ctx.drawImage(bombr, o.x,o.y,o.w,o.h);
            draggable: true;
        }

        if(o.c == 1 && o.t != 8 && o.t != 10 ){
            ctx.drawImage(bombb, o.x,o.y,o.w,o.h);
            draggable: true;
        }

        if(o.c == 2 && o.t != 8 && o.t != 10 ){
            ctx.drawImage(bombr_step, o.x,o.y,o.w,o.h);
            draggable: true;
        }

        if(o.c == 3 && o.t != 8 && o.t != 10 ){
            ctx.drawImage(bombb_step, o.x,o.y,o.w,o.h);
            draggable: true;
        }

        if(o.t == 10 || o.t == 8){
            ctx.drawImage(bombw, o.x,o.y,o.w,o.h);
            draggable: true;
        }


    }
    
    // draw lives
    ctx.font = "normal small-caps 70px Minecraft";
    ctx.fillStyle = "red";
    ctx.fillText(+lives, ele.width - 105, 70);

    // draw score
    ctx.font = "normal small-caps 70px Minecraft";
    ctx.fillStyle = "black";
    ctx.fillText(+score, 20, 70);

}

function positionCheck(i, ele){
        if(bList[i].x < ele.width/3){
            bList[i].x_vel = bList[i].x_vel * (-1);
        }
        else if(bList[i].x > 2*(ele.width/3) -64){
            bList[i].x_vel = bList[i].x_vel * (-1);
        }
        else if(bList[i].y < 0){
            bList[i].y_vel = bList[i].y_vel * (-1);
        }
        else if(bList[i].y > ele.height -64){
            bList[i].y_vel = bList[i].y_vel * (-1);
        }
}

function animateStep(){
    
    for(var i = 0;i < bList.length; i++){

            if(bList[i].c == 0){
                bList[i].c = 2;
                bList[i].t++;
            }
            else if(bList[i].c == 1){
                bList[i].c = 3;
                bList[i].t++;
            }
            else if(bList[i].c == 2){
                bList[i].c = 0;
            }
            else if(bList[i].c == 3){
                bList[i].c = 1;
            }   

            else if(bList[i].t == 8){
            bList[i].c = 4;
            }

            else if(bList[i].t == 10){
            bList[i].c = 4;
            }

    }
}

function functimer(){

    var ele = document.getElementById("myCanvas");
    
    // create new bomb every s
    if (Date.now() - ref_time >= 1000)
    {
        // random number between 0 and ele.width
        var pos_x = Math.floor(Math.random() * (ele.width/3 - 64)) + (ele.width/3 +1); 

        //random height
        var pos_y = Math.floor(Math.random() * (ele.height - 70) -1);

        //random color
        var color = Math.round(Math.random());
        
        //random x velocity
        var x_vel = Math.ceil(Math.random() * 2) * (Math.round(Math.random()) ? 1 : -1);

        //random y velocity
        var y_vel = Math.ceil(Math.random() * 2) * (Math.round(Math.random()) ? 1 : -1);

        var t = 0;

        var o = new GraphObj(pos_x,pos_y,64,64, color, x_vel, y_vel, t); // create new bomb
        bList.push(o);

        animateStep();

        ref_time = Date.now();
    }
    
    var xlist = null;
    xlist = new Array();

    var ylist = null;
    ylist = new Array();


    // move bombs
    for (var i=0; i<bList.length; i++)
    {
        bList[i].y += bList[i].y_vel;
        bList[i].x += bList[i].x_vel;
        positionCheck(i, ele);
    }

    drawAll();
    requestAnimationFrame(functimer); // draw everything BEFORE screen update
    
}

function myMove(i,e){
    if(dragok == true){
        bList[i].x = e.pageX - c.offsetLeft;
        bList[i].y = e.pageY - c.offsetTop;
    }
}


function myDown(e){
    for(var i = 0; i < bList.lenght; i++){
        if(e.pageX < bList[i].x + 64 + c.offsetLeft && e.pageX > bList[i].x + c.offsetLeft && e.pageY < bList[i].y + 64 + c.offsetTop && e.pageY > bList[i].y + c.offsetTop){

            bList[i].x = e.pageX - c.offsetLeft;
            bList[i].y = e.pageY - c.offsetTop;
            bList[i].x_vele = 0;
            bList[i].y_vel = 0;
            dragok = true;
            c.onmousemove = myMove(i,e);
        }
    }
}

function myUp(){
    dragok = false; 
}

function start() {
    // create lists
    
    bList = new Array();
    
    var c = document.getElementById("myCanvas");
    c.setAttribute('tabindex','0');
    c.focus();
    c.onmousedown = myDown;
    c.onmouseup = myUp;

    var xlist = null;
    xlist = new Array();

    var ylist = null;
    ylist = new Array();

    drawAll();
    requestAnimationFrame(functimer); // draw everything BEFORE screen update

    
}

</script>

</head>

<body onload="start()">

<img id="bombb" src="img/bombb.png" alt="x" style="display: none;">
<img id="bombr" src="img/bombr.png" alt="y" style="display: none;">
<img id="bombr_step" src="img/bombr_step1.png" alt="y" style="display: none;">
<img id="bombb_step" src="img/bombb_step.png" alt="y" style="display: none;">
<img id="bombw" src="img/bombw.png" alt="y" style="display: none;">

<div>
<canvas id="myCanvas" width="1000" height="600"></canvas>
</div>

</body>

</html>

Answer 1

这不是总的答案，因为我不知道拖动炸弹时到底需要什么，但是这里有一些地方可以进行更改以帮助进一步调试：

canvas元素'c'在两个地方声明，因此当它在mousedown等上使用时，它是未定义的，其中一个具有更多局部作用域的元素已在start函数中设置。我建议在start函数中使用c之前删除'var'，以便选择具有全局作用域的变量。

通常，请遍历代码以查看在何处定义了内容以及该内容处于最佳位置-查看所有变量的范围。这方面的代码几乎可以用，例如，您了解到在下载之前无法在画布上绘制img，但是整理一下可以做一些事情。

“长度”（长度）拼写错误，表示该功能无法正常工作。

通常，使用浏览器的开发工具控制台来确保您没有未声明的内容或看上去像null的东西。此类Javascript错误将在此处显示。还请在战略要点使用console.log以确保您了解逻辑流程。在主要功能的开头以console.log（'at function xxx'）开头可能会很有用。然后，您可以查看在炸弹上鼠标按下/向上移动的顺序。

如果您可以进一步描述拖动炸弹时将发生的情况，这将很有用。为了完整起见，我重申我在评论中所说的，炸弹将被视为矩形-从拖动的角度遮挡住炸弹后面的炸弹-可能对您的应用程序没有影响。如果很重要，有一种解决方法，但是最好先整理一下基础知识。

画布：拖放图像

1 个答案: