Question

我无法弄清楚为什么我的碰撞功能适用于一个元素而不适用于另一个元素。这很疯狂，请帮助。它检测到食物碰撞，但它没有检测到蛇头撞到它的其他元素。< / p>

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
       }
    }

然后当迭代每个立方体时（这是它变得更加混乱的地方）我按照它前进的方向移动每个立方体，然后检查它是否已到达转弯点（有一些误差），如果有的话然后它会改变方向：

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

我确保清理turnPoints（在所有立方体都按照说明操作之后，没有必要保持这一点），整个过程都运行正常

BUT

我感到无聊，并且用你的方式玩了一下，然后想出了这个http://jsfiddle.net/LAMZt/它的安静有点不同，但它或多或少都是一样的。注意到另一个问题是你的蛇头是左边最右边的一块，很自然地，它与其他碎片相撞。因此，当蛇移动时，我通过渲染额外的碎片来修复它。其余的只是保管，所以我可以把它当作一个要点（当然引用这个问题）。

画布碰撞JavaScript

1 个答案:

怎么办？

实际上非常糟糕

BUT