if語句在我的JS蛇游戲中不起作用
[英]if statement not working in my JS snake game
問題描述
我正在用JS做蛇游戲。 現在，我正在嘗試編寫一個條件，將蛇頭的位置和食物的位置進行比較，以查看蛇是否與蛇接觸。 如果是這樣，我想提醒用戶。 除非條件由於某種原因無法正常工作。 我制作了該游戲的另一個版本，在那個版本中我使用了相同的條件，所以這真的令人困惑嗎？
//declare global variables const canvas = document.querySelector('#canvas'); //set canvas context const ctx = canvas.getContext('2d'); //put canvas dimensions into variables const cvsW = canvas.width; const cvsH = canvas.height; //create snake unit const unit = 16; //create snake and set starting position let snake = [{ x : cvsW/2, y : cvsH/2 }] //create food object and set its position somewhere on board let food = { //Math.floor(Math.random()*cvsW + 1)---number from 1 to 784 //Math.floor(Math.random()*cvsW/unit + 1)---number from 1 to 79 //Math.floor(Math.random()*cvsW/unit + 1)*unit---number from 1 to 784(but it's a multiple of unit) //Math.floor(Math.random()*(cvsW/unit - 1)+1)*unit---same as above but -1 keeps food inside canvas x : Math.floor(Math.random()*(cvsW/unit - 1)+1)*unit, y : Math.floor(Math.random()*(cvsH/unit - 1)+1)*unit } //create a variable to store the direction of the snake let direction; //add event to read users input then change direction document.addEventListener('keydown', (e) => { if(e.keyCode == 37 && direction != 'right') direction = 'left'; else if (e.keyCode == 38 && direction != 'down') direction = 'up'; else if (e.keyCode == 39 && direction != 'left') direction = 'right'; else if (e.keyCode == 40 && direction != 'up') direction = 'down'; }) function draw() { //clear canvas and redraw snake and food ctx.clearRect(0, 0, cvsW, cvsH); ctx.fillStyle = 'limegreen'; ctx.fillRect(snake[0].x-unit/2, snake[0].y-unit/2, unit, unit); ctx.fillStyle = 'red'; ctx.fillRect(food.x, food.y, unit, unit); //move snake in chosen direction changeDirection(); //check to see if snakes eaten if(snake[0].x === food.x && snake[0].y === food.y) { alert('yo'); } //check to see if snake has hit a wall collision(snake[0].x, snake[0].y); } let runGame = setInterval(draw, 70); function changeDirection() { if(direction == 'left') snake[0].x -= unit; else if(direction == 'right') snake[0].x += unit; else if(direction == 'up') snake[0].y -= unit; else if(direction == 'down') snake[0].y += unit; } function collision(x, y) { if(x < 0 || x > cvsW || y < 0 || y > cvsH) { clearInterval(runGame); } }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Snake</title> <style> body { background-color: #333; } #canvas { background-color: #4d4d4d; display: block; margin: auto; position: absolute; left: 0; top: 0; right: 0; bottom: 0; } </style> </head> <body> <canvas id="canvas" width="784" height="528"></canvas> <script src="script.js"></script> </body> </html>
1 個解決方案
解決方案1
0 2019-01-20 05:51:23
問題似乎在這里
let direction;
//add event to read users input then change direction
document.addEventListener('keydown', (e) => {
if(e.keyCode == 37 && direction != 'right') direction = 'left';
else if (e.keyCode == 38 && direction != 'down') direction = 'up';
else if (e.keyCode == 39 && direction != 'left') direction = 'right';
else if (e.keyCode == 40 && direction != 'up') direction = 'down';
})
在這種情況下，方向是undefined因此不會為direction指定任何值
Javascript蛇游戲無法正常工作
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.