画布碰撞JavaScript

Question

我无法弄清楚为什么我的碰撞功能只对一个元素起作用而对另一个元素不起作用。这很疯狂，请帮忙。它可以检测到食物碰撞，但是不能检测到蛇头何时撞到其他元素。

window.onload= function ()
{
    var canvas=document.getElementById("canvas");
    var context=canvas.getContext("2d");

    var canvasWidth=window.innerWidth-20;
    var canvasHeight=window.innerHeight-20;
    canvas.width=canvasWidth;
    canvas.height=canvasHeight;


    var up=false;
    var down=false;
    var left=false;
    var right=true;

       var snake={
        x:20,
        y:0,
        w:10,
        h:10
    };
    var snakeBody=[];
    for (i = 0; i < 20; i++) {
        snakeBody.push({
        x:snake.x ,
        y:snake.y ,
        w:snake.w,
        h:snake.h
    });
    snake.x +=20;
    }

    var food={
        x:Math.floor(Math.random() * (canvasWidth-50)),
        y:Math.floor(Math.random() * (canvasHeight-50)),
        w:10,
        h:10
    };

    function moveUp()
    {

            snakeBody[0].y -=3;

    }
    function moveDown()
    {

            snakeBody[0].y +=3;

    }
    function moveLeft()
    {

            snakeBody[0].x -=3;

    }
    function moveRight()
    {

            snakeBody[0].x +=3;


    }
    function draw()
    {
        context.clearRect(0,0,canvasWidth,canvasHeight);
        context.fillStyle="black";

        context.beginPath();

       for (var i = snakeBody.length - 1; i > 0 ; i--) {
           context.rect(snakeBody[i].x,snakeBody[i].y,snakeBody[i].w,snakeBody[i].h);
           snakeBody[i].x = snakeBody[i-1].x;
           snakeBody[i].y = snakeBody[i-1].y;
        }
        context.rect(snakeBody[0].x,snakeBody[0].y,snakeBody[0].w,snakeBody[0].h);
        context.rect(food.x,food.y,food.w,food.h);

        context.stroke();
        context.fill();


        for (var i = 1; i < snakeBody.length; i++) {
            if (intersects(food.x,food.y,food.w,food.h,snakeBody[i].x,snakeBody[i].y,snakeBody[i].w,snakeBody[i].h)) {
                generateFood();
                growSnake();
            }
            var head=snakeBody[0];
            if (intersects(head.x,head.y,head.w,head.h,
            snakeBody[i].x,snakeBody[i].y,snakeBody[i].w,snakeBody[i].h)) {
                alert('game over');
            }
        }

        directions();
        collision();
        update();


    }
    function growSnake()
    {
        for (i = 0; i < 5; i++) {
        snakeBody.push({
        x:snake.x ,
        y:snake.y ,
        w:snake.w,
        h:snake.h
    });
    snake.x +=20;
    }
    }
    function generateFood()
    {
        food.x=Math.floor(Math.random() * (canvasWidth-50));
        food.y=Math.floor(Math.random() * (canvasHeight-50));
    }
    function intersects(x1, y1, w1, h1, x2, y2, w2, h2) {
    w2 += x2;
    w1 += x1;
    if (x2 > w1 || x1 > w2) return false;
    h2 += y2;
    h1 += y1;
    if (y2 > h1 || y1 > h2) return false;
  return true;
}
    function directions()
    {
        document.onkeydown = function(e)
        {
           var event = window.event ? window.event : e;
             var keycode = event.keyCode;
            if (keycode===37 && right===false) {
                left=true;
                right=false;
                up=false;
                down=false;
            }
            if (keycode===38 && down===false) {
                up=true;
                down=false;
                left=false;
                right=false;
            }
            if (keycode===39 && left===false) {
                right=true;
                left=false;
                up=false;
                down=false;
            }
            if (keycode===40 && up===false) {
                down=true;
                up=false;
                left=false;
                right=false;
            }
        };
    }
    function update()
    {
        if (up) {moveUp();}
        if (down) {moveDown();}
        if (left) {moveLeft();}
        if (right) {moveRight();}
    }
    function gameOver()
    {
        alert('game over!');
    }
     function collision()
     {


         if (snakeBody[0].x >canvasWidth) {
            snakeBody[0].x  = 0;
        }
        if (snakeBody[0].x < 0) {
            snakeBody[0].x=canvasWidth;
        }
        if (snakeBody[0].y>canvasHeight) {
            snakeBody[0].y=0;
        }
        if (snakeBody[0].y <0) {
            snakeBody[0].y=canvasHeight;
        }

     }
        setInterval(draw,20);
};

这是很多代码，所以这里是一个小提琴http://jsfiddle.net/5nLQG/

焦点似乎与功能相交：

 function intersects(x1, y1, w1, h1, x2, y2, w2, h2) {
    w2 += x2;
    w1 += x1;
    if (x2 > w1 || x1 > w2) return false;
    h2 += y2;
    h1 += y1;
    if (y2 > h1 || y1 > h2) return false;
  return true;
}

Answer 1

是的。 看看这个。 游戏结束了。 反复。 因为所有块都被压缩了，所以一开始很难进行碰撞检测。 实际上，只有在第20个魔方之后进行检查，我才能拥有功能正常的游戏。 看看这个

        if (i - 20 > 0&& intersects(snakeBody[0].x,snakeBody[0].y,snakeBody[0].w,snakeBody[0].h,
        snakeBody[i].x,snakeBody[i].y,snakeBody[i].w,snakeBody[i].h)) {
             clearInterval(pulse);
        }

我在其中声明脉冲的timeInterval ID http://jsfiddle.net/fC25X/

我会努力将您的立方体隔开，您应该是金

该怎么办？

我认为为自己弄清楚这些简单的游戏感到非常高兴。 例如，如果扫雷不正确，可能会导致大量的堆栈溢出。 我之前写过蛇游戏，我将快速解释我如何依次管理多维数据集。 您的方法似乎可以稍作调整，所以只有在您不关心自己确定流程的情况下，才进一步阅读。 我的方法也不是最好的。

其实很可怕

我记得我对蛇的特定实现，我保留了一个单独的名为“ turningPoints”的数组，并在按键时看起来像这样：

    document.onkeydown = function(e)
    {
       var event = window.event ? window.event : e;
       var keycode = event.keyCode;
       if (keycode===37 && right===false) {
            left=true;
            right=false;
            up=false;
            down=false;
            turningPoints.push(snake[0].x,snake[0].y,[1,0]); // [1,0] matrix for right
       }
    }

然后，当遍历每个多维数据集时（这会使它变得更混乱），我将每个多维数据集朝其移动的方向移动，然后检查它是否达到了turningPoint（有一定的误差范围），如果有，它将改变方向：

   if(snake[i].x == turningPoint[j].x && snake[i].y == turningPoint[j].y)
         snake[i].direction = turningPoint[j].direction;

我确保清理turningPoints（所有多维数据集都按照说明进行操作之后，就不必保留该点了），整个过程都正常

但

我很无聊，然后按照自己的方式玩了些，然后想到了这个http://jsfiddle.net/LAMZt/。虽然有点安静，但还是差不多。 注意另一个问题是您的蛇头是最左边的，向右走，所以自然地，它与其他部分相撞。 所以我通过在蛇移动时渲染其他碎片来修复它。 其余的只是家政服务，所以我可以将其保存为要点（当然，请参考此问题）。