我的JS游戏中蛇不能在画布边缘骑行吗？

Question

Hey guys I wrote a condition that would check the position of the snakes head to see if it hit the edge of the canvas. 大家好，我写了一个条件来检查蛇头的位置，看它是否碰到了画布的边缘。 If this happens i wan't to stop the interval that the games running on. 如果发生这种情况，我将不停止游戏运行的间隔。 here's the code //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); } //check if snake hit wall if(headX <= 0 || headY <= 0 || headX >= (cvsW-unit) || headY >= (cvsH-unit)) { alert(headX); clearInterval(runGame); } but sense the edge of the canvas has the x any y position of 0 this means if a food generates on the edge of the canvas the snake is unable to go there without the game stopping. //check if snake hit wall if(headX <= 0 || headY <= 0 || headX >= (cvsW-unit) || headY >= (cvsH-unit)) { alert(headX); clearInterval(runGame); }但感觉到画布的边缘的x y位置为0，这意味着如果在画布的边缘上产生食物，那么在不停止游戏的情况下，蛇就不能去那里。 And if you lower the values below 0 the snake head will now be able to go outside of the canvas. 如果将值降低到0以下，则蛇头现在将可以移出画布。 I don't know how to get around this plz help. 我不知道该如何避开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

From what I understand, you have a 48x32 grid whose spaces are 16px squares. 据我了解，您有一个48x32的网格，其空间为16px正方形。 The algorithm you use to generate your food's position on the grid: 用于生成食物在网格上的位置的算法：

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
}

chooses a value between 1 and 47 for x, and 1 and 31 for y. 为x选择一个介于1和47之间的值，为y选择介于1和31之间的值。 Well, the problem with that is that position 47 for x and position 31 for y are both on the edge of the grid (this is because the first x/y position is 0, not 1). 好吧，这样做的问题是x的位置47和y的位置31都在网格的边缘上（这是因为第一个x / y位置是0，而不是1）。 To eliminate those spaces as choices, the algorithm simply needs to subtract 2 instead of 1 from the number of spaces on the grid (which is cvsW or cvsH divided by unit): 要消除这些空格作为选择，该算法只需从网格上的空格数中减去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
}

Basically, subtracting 1 only eliminated the last column/row as a choice for the x/y position, and then adding 1 shifted everything over to the right. 基本上，减去1只会消除最后一列/行作为x / y位置的选择，然后加1会使所有内容向右移动。 Like this (for x): 像这样（对于x）：

The new algorithm does this, initially eliminating the last two choices then shifting over 1: 新算法会执行此操作，首先消除最后两个选择，然后移至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