Question

这是我的代码，在屏幕中央运行而不是包含我的游戏的黑匣子时，只有一个空白，似乎没有网站可以告诉我哪里出错：

＆＃13;

console.log("start")
//Global functions
var canvas = document.getElementById("canva");
var canvasCon;
var snakeX = 400;
var snakeY = 300;
var direction;
var snakeSpeed = 1;
var apple = false;
var appleX;
var appleY
var snakeSize = 30;
var scoreboard = document.getElementById("score");
var Score = 0;
var trailX = new Array();
var trailY = new Array();

console.log("set global variables!")

window.onload = function(){
    console.log("ran on window load function")
    canvasCon = canvas.getContext('2d');

    //Calls "drawing" and "move" fps times per second
    var fps = 30
    setInterval(function(){
        move()
        drawing()
    },1000/fps);
}

document.addEventListener('keydown', getKey);
function getKey(event){
    //gets the keycode
    direction = event.keyCode;
    return direction;
    }

//moves the objsects
function move(){
    //creates a easier to read way to check the value of getKey
    var left = 37;
    var up = 38;
    var right = 39;
    var down = 40;



    //changing the position of the snake
    switch(direction){
        case right:
            snakeX = snakeX + snakeSpeed;
            break;
        case left:
            snakeX = snakeX - snakeSpeed;
            break;
        case up:
            snakeY = snakeY - snakeSpeed;
            break;
        case down:
            snakeY = snakeY + snakeSpeed;
            break;
    }
    trail()
    //checks if snake has gone off the board and then moves the snake to the other end of the board if that returns True        
    if(snakeX > canvas.width){
        snakeX = 0
    }else if(snakeX < 0){
        snakeX = canvas.width
    }

    if(snakeY > canvas.height){
        snakeY = 0
    }else if(snakeY < 0){
        snakeY = canvas.height
    }
}

//draws everything /w updated coordinates
function drawing(){

    //Backround of the Game
    canvasCon.fillStyle = 'black';
    canvasCon.fillRect(0,0,canvas.width,canvas.height);

    //The snake
    canvasCon.fillStyle = 'green';
    canvasCon.fillRect(snakeX,snakeY,snakeSize,snakeSize);

    //apple creation
    apples()
    canvasCon.fillStyle = 'red';
    canvasCon.fillRect(appleX,appleY,25,25);
}

//makes the apples work
function apples(){
    if(collision()){
        Score += 1
        console.log(Score)
        scoreboard.innerHTML = "<b>Score: "+Score+"<b>"
        apple = false
    }
    if(apple == false){
        apple = true
        appleX = Math.floor(Math.random() * (canvas.width - 50));
        appleY = Math.floor(Math.random() * (canvas.height - 50));
    }

}
function collision(){
    var distX = Math.abs(appleX - snakeX-snakeSize/2);
  var distY = Math.abs(appleY - snakeY-snakeSize/2);
  if (distX <= (snakeSize/2) && distY <= (snakeSize/2)) { return true; } 
}
function trail(){
    //adds X and Y coordinates to their respective lists
    trailX.push(snakeX)
    trailY.push(snakeY)
    //makes sure the lists are the right length
    while(trailX.length > Score){
        var index = trailX.indexOf(0);
        trailX.splice(index, 1);
    }
    while(trailY.length > Score){
        var index = trailY.indexOf(0);
        trailY.splice(index, 1);
    }
    if(trailY.length != trailX.length){
        console.log("trailY != trailX")
    }
    for(i= trailX.length-1; i<=0; i--){
        canvasCon.fillStyle = 'yellow';
        canvasCon.fillRect(trailX[i],trailY[i],25,25);
    }
}

＆＃13;

<title>SNAKE!!</title>

<body>
<p style="text-align:center; text-color:red"><b>Hope you Enjoy Ma GREAT GAME!!</b></p>
<br/><br/><br/>
<div style="width:800px; margin:0 auto;">
<canvas id=canva width="800" height="600"></canvas>
<br/>
<p id="score">Score: </p>
</div>
</body>

＆＃13;

即使在jsfiddle.net上重新加载页面，它也会崩溃。请帮助我不知道我做错了什么！

Answer 1

JS的第一条规则 - 如果它被卡住了，你可能会有一个无限循环。

事实上，你的决赛有一个无限循环：

for(i= trailX.length-1; i<=0; i--){
        canvasCon.fillStyle = 'yellow';
        canvasCon.fillRect(trailX[i],trailY[i],25,25);
    }

I＆LT; = 0

如果我以0开始并且每次迭代减1，它将始终小于或等于0，因此永远不会满足结束条件。

我的javascript没有提供任何输出，当我重新加载页面时它崩溃了

1 个答案: