Question

我是Javascript的新手，所以我决定创建一个简单的SnakeGame来嵌入HTML。但是，我改变蛇的方向的代码在几次转弯后冻结了。

注意：我在HTML Canvas中运行它。

来源：

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

由于

Answer 1

正如埃文所说，主要问题是你如何处理待决指示。

当您快速连续转动两次时会出现问题，这会导致为同一个块添加两个待处理的路线。如果未按正确顺序处理这些，则块可能以错误的方向移动。在每次更新时，每个块只需要一个待定方向，因此我重新设计了如何处理它以避免在单个更新期间在一个块上有多个方向。

以下是指向它的链接：http://jsbin.com/EkOSOre/5/edit

注意，当方向发生变化时，第一个块上的待定方向会更新，覆盖任何现有的待定方向。

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

然后，当发生更新时，循环遍历块列表，并将下一个块的待定方向设置为当前块的当前方向。

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

如果当前块具有待定方向，请将方向设置为待定方向。

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

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

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

当用户点击'n'时，您还需要删除旧块，因为旧块会被删除，从而增加了存在的总块数和速度。

祝其他游戏好运，并且好好学习JavaScript。

Javascript中的蛇游戏

1 个答案: