我的JS游戲中蛇不能在畫布邊緣騎行嗎？

Question

大家好，我寫了一個條件來檢查蛇頭的位置，看它是否碰到了畫布的邊緣。 如果發生這種情況，我將不停止游戲運行的間隔。 這是代碼//check if snake hit wall if(headX <= 0 || headY <= 0 || headX >= (cvsW-unit) || headY >= (cvsH-unit)) { alert(headX); clearInterval(runGame); } //check if snake hit wall if(headX <= 0 || headY <= 0 || headX >= (cvsW-unit) || headY >= (cvsH-unit)) { alert(headX); clearInterval(runGame); } //check if snake hit wall if(headX <= 0 || headY <= 0 || headX >= (cvsW-unit) || headY >= (cvsH-unit)) { alert(headX); clearInterval(runGame); }但感覺到畫布的邊緣的x y位置為0，這意味着如果在畫布的邊緣上產生食物，那么在不停止游戲的情況下，蛇就不能去那里。 如果將值降低到0以下，則蛇頭現在將可以移出畫布。 我不知道該如何避開PLZ幫助。

 const canvas = document.querySelector('#canvas'); const ctx = canvas.getContext('2d'); //set canvas dimension equal to css dimension canvas.width = 768; canvas.height = 512; //now put those dimensions into variables const cvsW = canvas.width; const cvsH = canvas.height; //create snake unit const unit = 16; //create snake array let snake = [{x: cvsW/2, y: cvsH/2}]; //delcare global variable to hold users direction let direction; //create food object let food = { x : Math.floor(Math.random()*((cvsW/unit)-1)+1)*unit, y : Math.floor(Math.random()*((cvsH/unit)-1)+1)*unit } //read user's direction document.addEventListener('keydown', changeDirection); function changeDirection(e) { //set direction 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() { //refresh canvas ctx.clearRect(0, 0, cvsW, cvsH); //draw snake for(let i = 0; i < snake.length; i++) { ctx.fillStyle = 'limegreen'; ctx.fillRect(snake[i].x, snake[i].y, unit, unit); } //grab head position let headX = snake[0].x; let headY = snake[0].y; //check if snake hit wall if(headX <= 0 || headY <= 0 || headX >= (cvsW-unit) || headY >= (cvsH-unit)) { alert(headX); clearInterval(runGame); } //posistion food on board ctx.fillStyle = 'red'; ctx.fillRect(food.x, food.y, unit, unit); //send the snake in chosen direction if(direction == 'left') headX -= unit; else if(direction == 'up') headY -= unit; else if(direction == 'right') headX += unit; else if(direction == 'down') headY += unit; //create new head let newHead = {x: headX, y: headY} if(headX == food.x && headY == food.y) { //create new food position food = { x : Math.floor(Math.random()*((cvsW/unit)-1)+1)*unit, y : Math.floor(Math.random()*((cvsH/unit)-1)+1)*unit } //add 3 units to the snake snake.unshift(newHead); snake.unshift(newHead); snake.unshift(newHead); } else { //remove tail snake.pop(); } //add head to snake snake.unshift(newHead); } //run game engine let runGame = setInterval(draw, 70);

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Snake Game</title> <style> body { background-color: #333; } canvas { background-color: #4d4d4d; margin: auto; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: 750px; height: 500px; } </style> </head> <body> <canvas id="canvas"></canvas> <script src="script.js"></script> </body> </html>

Answer 1

據我了解，您有一個48x32的網格，其空間為16px正方形。 用於生成食物在網格上的位置的算法：

let food = {
     x : Math.floor(Math.random()*((cvsW/unit)-1)+1)*unit, // Chooses 1-47
     y : Math.floor(Math.random()*((cvsH/unit)-1)+1)*unit // Chooses 1-31
}

為x選擇一個介於1和47之間的值，為y選擇介於1和31之間的值。 好吧，這樣做的問題是x的位置47和y的位置31都在網格的邊緣上（這是因為第一個x / y位置是0，而不是1）。 要消除這些空格作為選擇，該算法只需從網格上的空格數中減去2而不是1（即cvsW或cvsH除以單位）：

let food = {
     x : Math.floor(Math.random()*((cvsW/unit)-2)+1)*unit, // Chooses 1-46
     y : Math.floor(Math.random()*((cvsH/unit)-2)+1)*unit // Chooses 1-30
}

基本上，減去1只會消除最后一列/行作為x / y位置的選擇，然后加1會使所有內容向右移動。 像這樣（對於x）：

新算法會執行此操作，首先消除最后兩個選擇，然后移至1：

我的JS游戲中蛇不能在畫布邊緣騎行嗎？

問題描述

1 個解決方案

解決方案1
1 2019-01-16 06:37:17

我的JS游戲中蛇不能在畫布邊緣騎行嗎？

問題描述

1 個解決方案

解決方案1 1 2019-01-16 06:37:17

解決方案1
1 2019-01-16 06:37:17