-1
這是我的代碼，當運行而不是包含我的遊戲在屏幕中心的黑盒子時，只有一個缺口，沒有網站可以看起來告訴我在哪裏出了錯：我的javascript沒有給出任何輸出，當我重新加載頁面時，它崩潰
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);
}
}<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>每當頁面大幹快上jsfiddle.net崩潰甚至重新加載。 plz幫助我不知道我做錯了什麼！
您是否使用過調試器來準確追蹤它在哪裏崩潰？ – RJM
最可能是一個無限循環，這些是導致頁面崩潰/凍結的經典罪魁禍首 – Lixus
我不知道它是否是問題的原因，但不應該使用'setInterval'編寫動畫代碼。現代瀏覽器有[requestAnimationFrame]（https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame） –