Javascript中的蛇游戏

我对Javascript真的很陌生，所以我决定创建一个简单的蛇形游戏来嵌入HTML。然而，我改变蛇方向的代码在转了几圈后就冻结了

注意：我在HTML画布中运行这个

资料来源：

var Canvas;
var ctx;

var fps = 60;

var x = 0;
var seconds = 0;

var lastLoop;
var thisLoop;
var tempFPS = 0;
var blockList = [];
var DEFAULT_DIRECTION = "Right";

var pendingDirections = [];

function update() {
    x += 1;

    thisLoop = new Date();
    tempFPS = 1000 / (thisLoop - lastLoop);
    lastLoop = thisLoop;
    tempFPS = Math.round(tempFPS*10)/10;

    if (x==10){
        document.getElementById("FPS").innerHTML = ("FPS: " + tempFPS);
    }

    //Rendering
    for (var i = 0; i<blockList.length; i++){
        var block = blockList[i];
        draw(block.x, block.y);
    }

    if (x==5){
        x=0;
        seconds+=1;

        //Updates once per x frames
        moveBlocks();
    }
}

function moveBlocks(){
    if(blockList.length === 0){
        return;
    }


    for (var j = 0; j<pendingDirections.length; j++){
        if (b >= blockList.length -1){
            pendingDirections.shift();

        }else {
            //Iterates through each direction that is pending
            var b = pendingDirections[j].block;
            try{
                blockList[b].direction = pendingDirections[j].direction;
            } catch(err){
                alert(err);
            }
            pendingDirections[j].block++;
        }
    }

    for (var i = 0; i<blockList.length; i++){
        var block = blockList[i];
        clear(block.x, block.y);
        if (block.direction == "Down"){
            block.y += BLOCK_SIZE;
        } else if (block.direction == "Up"){
            block.y -= BLOCK_SIZE;
        } else if (block.direction == "Left"){
            block.x -= BLOCK_SIZE;
        } else if (block.direction == "Right"){
            block.x += BLOCK_SIZE;
        } else {
            alert(block.direction);
        }
        draw(block.x, block.y);
    }
}

function init(){
    lastLoop = new Date();
    window.setInterval(update, 1000/fps);
    Canvas = document.getElementById("Canvas");
    ctx = Canvas.getContext("2d");
}

//The width/height of each block
var BLOCK_SIZE = 30;

//Draws a block
function draw(x, y) {

    ctx.fillStyle = "#000000";
    ctx.fillRect(x,y,BLOCK_SIZE,BLOCK_SIZE);
}

function clear(x,y){
    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(x,y,BLOCK_SIZE,BLOCK_SIZE);
}

function processInput(key){
    if (key == 110){
        //n (new)
        newBlock(BLOCK_SIZE*4,0);
        newBlock(BLOCK_SIZE*3,0);
        newBlock(BLOCK_SIZE*2,0);
        newBlock(BLOCK_SIZE*1,0);
        newBlock(0,0);

    } else if (key == 119){
        changeDirection("Up");
    } else if (key == 115){
        changeDirection("Down");
    } else if (key == 97){
        changeDirection("Left");
    } else if (key == 100){
        changeDirection("Right");
    } else if (key==122){
        var pDir = "Pending Directions: ";
        for (var i = 0; i<pendingDirections.length; i++){
            pDir += pendingDirections[i].direction + ", ";
        }
        alert(pDir);
    } else if (key == 120){
        var dir = "Directions: ";   
        for (var j = 0; j<blockList.length; j++){
            dir += blockList[j].direction + ", ";
        }
        alert(dir);
    } else {
        alert("KEY: " +key);
    }
}

function changeDirection(d){
    var LD = blockList[0].direction;
    var valid = false;

    if (d == "Up"){
        if(LD != "Down"){
            valid = true;
        }
    } else if (d == "Down"){
        if(LD != "Up"){
            valid = true;
        }
    } else if (d == "Left"){
        if(LD != "Right"){
            valid = true;
        }
    } else if (d == "Right"){
        if(LD != "Left"){
            valid = true;
        }
    }  

    if (d == LD) { valid = false;}

    if (valid){     
        var dir = {'direction' : d, 'block' : 0};
        pendingDirections.unshift(dir);
    }
}
function newBlock(x, y){
    var block = {'x': x, 'y' : y, 'direction' : DEFAULT_DIRECTION};
    //This works: alert(block['x']);
    draw(x,y);
    blockList.push(block);
}

var画布；
var-ctx；
var fps=60；
var x=0；
var秒=0；
var lastLoop；
var-thisLoop；
var-tempFPS=0；
var区块列表=[]；
var DEFAULT_DIRECTION=“Right”；
var pendingDirections=[]；
函数更新（）{
x+=1；
thisLoop=新日期（）；
tempFPS=1000/（thisLoop-lastLoop）；
lastLoop=thisLoop；
tempFPS=数学四舍五入（tempFPS*10）/10；
如果（x==10）{
document.getElementById（“FPS”）.innerHTML=（“FPS:”+tempFPS）；
}
//渲染
对于（var i=0；i，正如Evan所说，主要问题是如何处理待定的方向

当你快速连续转动两次时，就会出现问题，这会导致同一个块添加两个挂起的方向。如果没有按照正确的顺序处理这些方向，那么这些块可能会朝错误的方向移动。每次更新时，每个块只需要一个挂起的方向，因此我重新设计了如何处理这些方向，以避免多个d在一次更新期间一个块上的方向

以下是它的链接：

请注意，更改方向时，第一个块上的挂起方向将更新，覆盖任何现有的挂起方向

if (valid) {
    blockList[0].pendingDirection = direction;
}

if(block.pendingDirection !== null) {
    block.direction = block.pendingDirection;
}

然后，当更新发生时，块列表循环通过，下一个块的挂起方向设置为当前块的当前方向

if(!!nextBlock) {
    nextBlock.pendingDirection = block.direction;
}

如果当前块具有挂起方向，请将方向设置为挂起方向

if (valid) {
    blockList[0].pendingDirection = direction;
}

if(block.pendingDirection !== null) {
    block.direction = block.pendingDirection;
}

然后像正常一样更新块位置

您还遇到了各种其他问题，例如在初始化变量（b）之前使用它，以及如何捕获空/未定义的错误（您应该检查这种情况并适当地处理它），但这是算法的主要问题

当用户点击“n”时，您还需要删除旧块，因为旧块被保留，从而提高了速度和总块数

祝游戏的其余部分好运，祝你学习JavaScript好运。
你能将你的代码移动到JSFIDLE或JS Bin中并提供一个链接吗？给你：这个链接在最新稳定的Chrome上只为我显示了一个空白画布。对不起！要开始游戏，请按N，然后使用WASD控制陷阱。你遇到的主要问题是你处理悬而未决的指令的方式。当你在游戏中翻过两次时，错误就会发生。我没有时间为你调试，所以我不会把这一点放在答案中，但这是你需要检查的代码区域。非常感谢！非常好用。