javascript - 蛇游戏中的蛇运动

Question

拜托，我一直在学习如何制作贪吃蛇游戏的教程，并且我了解有关代码的所有内容，直到蛇必须移动到哪里。我只是似乎不明白蛇是如何移动的逻辑。代码片段如下所示:

. . . //the code block to setup the canvas and other basic stuff for the game
//creating the snake
var snake_array;  //an array of cells to make up the snake
function create_snake(){
    var length = 5;   //length of the snake
    snake_array = [] //starting with an empty array
    for (var i = 0; i < length; i++) {
        //this will create a horizontal snake starting from top left
        snake_array.push({x:i,y:0});
    }
}

create_snake() // invoking the method

//painting the snake
function paint(){

    . . . // code block to clear the trail of the snake on the canvas before the snake moves

    var nx = snake_array[0].x;
    var ny = snake_array[0].y;
    if(d == "right") nx++;    //d is a variable updated by the keydown event listener code(not shown here) 
    else if(d == "left") nx--;
    if(d == "up") ny--;
    if(d == "down") ny++;

    var tail = snake_array.pop(); // pops out the last cell
    tail.x = nx;
    tail.y = ny;
    snake_array.unshift(tail)

    . . . // code block to paint the snake cells

    }
}

paint() // invoking the method

我的问题是:我上面概述的部分代码如何完成推进蛇的工作，因为当我尝试使用浏览器控制台跟踪代码时，在调用 create_snake() 之后，我有五个对象(代表蛇细胞)的数组，它们具有以下属性和值:{x:0,y:0},{x:1,y:0} ,{x:2,y:0},{x:3,y:0},{x:4,y:0 }。调用 paint 方法后，我仍然有一个包含五个对象的数组，但具有以下属性和值:{x:1,y:0},{x:0,y:0 },{x:1,y:0},{x:2,y:0},{x:3,y: 0}。现在当 d = "right" 时蛇如何向前移动，因为调用 paint() 后蛇的最后一个单元格的 x 属性/坐标少 1比调用该方法之前的原始值还要重，现在两个单元格重叠，因为 snake_array 中的两个对象现在具有相同的坐标 ({x:1,y:0})

Answer 1

相关代码启动如下:

var snake_array;
function create_snake(){
    var length = 5;
    snake_array = [];
    for(var i = length-1; i>=0; i--){
        snake_array.push({x: i, y:0});
    }
}

关于此代码需要注意的重要一点是它向后生成蛇，因此它看起来像这样:{x:4,y:0}, {x:3, y:0}, {x:2:,y:0}, {x:1,y:0}, {x: 0,y:0}。这是因为 i 从 length-1 开始，并且 length 在 for 循环之上设置为 5。这看起来像:

[T][x][x][x][H][ ]
[ ][ ][ ][ ][ ][ ]
[ ][ ][ ][ ][ ][ ]
[ ][ ][ ][ ][ ][ ]

然后，在 paint 函数中它捕获尾部的位置，因为它打算将尾部移动到头部即将到达的位置(通过这种方式，它不需要移动任何其他单元格直到下一个油漆，因为那些永远不会改变，因为蛇每个周期移动的次数不会超过一个细胞。)

    var nx = snake_array[0].x;
    var ny = snake_array[0].y;
    if(d == "right") nx++;
    else if(d == "left") nx--;
    else if(d == "up") ny--;
    else if(d == "down") ny++;

在此方案下，蛇的尾部始终是数组中的最后一个元素，而头始终是第一个。所以，snake_array[snake_array.length] 总是尾部，snake_array[0] 总是头。

记住 {x:4,y:0}, {x:3,y:0}, {x:2:,y:0 }, {x:1,y:0}, {x:0,y:0}，假设我们的默认移动是正确的，我们可以计算{nx:5,ny:0}。 nx 和 ny 现在代表一个不是蛇的一部分的单元格，而是蛇想要进入的单元格。因此代码对该单元格进行了一些边界和碰撞检查，以查看它是否与任何墙或其他蛇段相交，如果相交则重新启动游戏。

它还会检查食物碰撞并进行处理(而不是移动尾部，它只是在单元格位置创建一个新的头部并生成另一 block 食物。)

但是，假设这个单元格 (nx,ny) 位置没有与任何东西发生碰撞，它运行这个代码:

    var tail = snake_array.pop();
    tail.x = nx; tail.y = ny;

从 snake_array 中删除尾部，将其位置设置为我们之前计算的单元格的位置 (nx,ny)，然后将此“尾部”移动到数组的第一个位置(始终是头，按照我们之前的惯例):

    snake_array.unshift(tail);

结果是这样的:

[ ][x][x][x][H][T]
[ ][ ][ ][ ][ ][ ]
[ ][ ][ ][ ][ ][ ]
[ ][ ][ ][ ][ ][ ]

但实际上，数组仍然是[H][x][x][x][T]的形式，因为我们决定snake_array[0]第一个元素位置的任何东西都是头，而任何东西在snake_array[snare_array.length] 的最后一个元素位置是尾部。所以它真的是:​​

[ ][T][x][x][x][H]
[ ][ ][ ][ ][ ][ ]
[ ][ ][ ][ ][ ][ ]
[ ][ ][ ][ ][ ][ ]

然后整个过程可以一遍又一遍地重复，直到你赢或输!