Question

我通过javascript制作了一个简单的蛇游戏，我尝试添加一个功能，当用户持有shift键时，蛇会加速。但是现在当我暂时换班时，它运行正常，但是如果我长时间握住它，游戏就会暂停（蛇停止移动）。这是我的代码，请帮我解决。

＆＃13;

var grid_size = 20;
var grid_num = 20;
var player_x = Math.floor(Math.random() * grid_num);
var player_y =Math.floor(Math.random() * grid_num);
var apple_x = Math.floor(Math.random() * grid_num);
var apple_y = Math.floor(Math.random() * grid_num);
var x_direction = 0;
var y_direction = 0;
var trail = [];
var tail = 5;
var normal_speed = 1000 / 10
var speed = 1000 / 10;
var game_status = 0;
var my_game;

// 1. Create the button
var button = document.createElement("button");
button.innerHTML = "Do Something";

// 2. Append somewhere
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);

// 3. Add event handler
button.addEventListener ("click", function() {
  clearInterval(my_game);
  my_game = setInterval(game, speed);
});

window.onload = function() {
	canv = document.getElementById("gc");
	context = canv.getContext("2d");
	document.addEventListener("keydown", keyPush);
	document.addEventListener("keyup", keyRelease);
}

function game() {
	player_x += x_direction;
	player_y += y_direction;
	if (player_x < 0) {
		player_x = grid_num - 1;
	}
	if (player_x > grid_num - 1) {
		player_x = 0;
	}
	if (player_y < 0) {
		player_y = grid_num - 1;
	}
	if (player_y > grid_num - 1) {
		player_y = 0;
	}
	context.fillStyle = "black";
	context.fillRect(0, 0, canv.width, canv.height);
	context.fillStyle = "lime";
	for(var i = 0; i < trail.length; i++) {
		context.fillRect(trail[i].x * grid_size, trail[i].y * grid_size, grid_size - 2, grid_size - 2);
		if(trail[i].x == player_x && trail[i].y == player_y) {
			if (game_status == 0) {
				tail = 5;
			} else {
				endGame();
				return;
			}
		}
	}
	trail.push({x:player_x, y:player_y});
	while(trail.length > tail) {
		trail.shift();
	}
	if (apple_x == player_x && apple_y == player_y) {
		tail++;
		apple_x = Math.floor(Math.random() * grid_num);
		apple_y = Math.floor(Math.random() * grid_num);
	}
	context.fillStyle = "red";
	context.fillRect(apple_x * grid_size, apple_y * grid_size, grid_size - 2, grid_size - 2);
}

function keyPush(keyEvent) {
	switch(keyEvent.keyCode) {
		case 37:
			if (x_direction == 1) {
				break;
			}
      game_status++;
			x_direction = -1;
			y_direction = 0;
			break;
		case 38:
			if (y_direction == 1) {
				break;
			}
      game_status++;
			x_direction = 0;
			y_direction = -1;
			break;
		case 39:
			if (x_direction == -1) {
				break;
			}
      game_status++;
			x_direction = 1;
			y_direction = 0;
			break;
		case 40:
			if (y_direction == -1) {
				break;
			}
      game_status++;
			x_direction = 0;
			y_direction = 1;
			break;
		case 65:
			if (x_direction == 1) {
				break;
			}
      game_status++;
			x_direction = -1;
			y_direction = 0;
			break;
		case 87:
			if (y_direction == 1) {
				break;
			}
      game_status++;
			x_direction = 0;
			y_direction = -1;
			break;
		case 68:
			if (x_direction == -1) {
				break;
			}
      game_status++;
			x_direction = 1;
			y_direction = 0;
			break;
		case 83:
			if (y_direction == -1) {
				break;
			}
      game_status++;
			x_direction = 0;
			y_direction = 1;
			break;
		case 16:
			clearInterval(my_game);
			speed = normal_speed * 0.5;
			my_game = setInterval(game, speed);
			break;
	}
}

function keyRelease(keyEvent) {
	switch(keyEvent.keyCode) {
		case 16:
			clearInterval(my_game);
			speed = normal_speed;
			my_game = setInterval(game, speed);
			break;
	}
}

function endGame() {
  clearInterval(my_game);
	context.fillStyle = "yellow";
	context.font="20px Georgia";
	context.fillText("Game Over!", 10, 50);
  x_direction = 0;
  y_direction = 0;
  trail = [];
  tail = 5;
  normal_speed = 1000 / 10
  speed = 1000 / 10;
  game_status = 0;
}

＆＃13;

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

button {
  margin-top: 20px;
  line-height: 60px;
  font-weight: bold;
  padding: 0 40px;
  background: salmon;
  border: none;
}

button:hover {
  background: lightsalmon;
}

canvas {
  padding: 0;
  margin: auto;
  display: block;
  width: 400px;
  height: 400px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="web_style.css">
  <canvas id = "gc" width = "400" height = "400"></canvas>
  <script type="text/javascript" src="snake_script.js"></script>
</head>



<body>

  <h1>Snake</h1>

</body>

</html>

＆＃13;

有可能keydown和keyup事件会改变setInterval的间隔吗？

0 个答案: