Question

嗨，我正在用JS做蛇游戏。现在，我能够将蛇绘制到画布上，并接受从用户处移动的方向。给定方向，我可以unshift（）蛇的新头，但是由于某些原因，我无法使用pop方法去除尾巴。这只是导致我的蛇越来越大。为什么有这个主意吗？

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}];

//read user's direction
document.addEventListener('keydown', changeDirection);

let direction;

function changeDirection(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';

	console.log(direction);
}

function draw() {
	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;

	snake.pop();

	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}

	//add head to snake
	snake.unshift(newHead);
}

setInterval(draw, 100);

<!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

您需要在每次迭代时清除当前画布，否则将保留较早绘制到画布上的像素。添加

就在您开始遍历蛇阵列以绘制每个正方形之前

curl -sL https://deb.nodesource.com/setup_10.x | sudo bash -

  ctx.clearRect(0, 0, canvas.width, canvas.height);

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
}];

//read user's direction
document.addEventListener('keydown', changeDirection);

let direction;

function changeDirection(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';

  console.log(direction);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = 'limegreen';
  for (let i = 0; i < snake.length; i++) {
    ctx.fillRect(snake[i].x, snake[i].y, unit, unit);
  }

  //grab head position
  let headX = snake[0].x;
  let headY = snake[0].y;

  snake.pop();

  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
  }

  //add head to snake
  snake.unshift(newHead);
}

setInterval(draw, 100);

Answer 2

重新排列绘图功能并添加ctx.clearRect。通过以下方式修改绘图功能：

function draw() {

    //grab head position
    let headX = snake[0].x;
    let headY = snake[0].y;

    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}

    //add head to snake
    snake.unshift(newHead);

    for(let i = 0; i < snake.length; i++) {
        ctx.fillStyle = 'limegreen';
        ctx.fillRect(snake[i].x, snake[i].y, unit, unit);
    }

    let popped = snake.pop();
    ctx.clearRect(popped.x, popped.y, unit, unit);
}

流行功能不是没有蛇阵列尾巴？

2 个答案: