人人都能学会，15分钟做出贪吃蛇网页版小游戏

前端

2023-09-07 03:24:14

在你的浏览器中玩经典的贪吃蛇游戏

还记得那些在古老的诺基亚手机上度过的时光，用贪吃蛇游戏来消磨时间吗？现在，你可以将这份儿时记忆带到你的电脑或手机上了，而且不需要昂贵的设备或复杂的设置。只需按照以下步骤，你就可以在你的浏览器中享受经典的贪吃蛇游戏。

制作你的贪吃蛇游戏

材料：

文本编辑器
网络浏览器
HTML和CSS文件

步骤：

创建HTML文件： 使用文本编辑器创建一个新的文件，将其命名为“index.html”。在文件中输入以下代码：

<!DOCTYPE html>
<html>
<head>

</head>
<body>

  <canvas id="canvas" width="400" height="400"></canvas>

  <script src="script.js"></script>
</body>
</html>

创建CSS文件： 创建一个新的CSS文件，将其命名为“style.css”。在文件中输入以下代码：

canvas {
  border: 1px solid black;
}

创建JavaScript文件： 创建一个新的JavaScript文件，将其命名为“script.js”。在文件中输入以下代码：

// 获取画布元素
var canvas = document.getElementById("canvas");

// 获取画布的上下文
var ctx = canvas.getContext("2d");

// 定义游戏变量
var snake = [
  {x: 200, y: 200},
  {x: 190, y: 200},
  {x: 180, y: 200},
  {x: 170, y: 200},
  {x: 160, y: 200},
];

var food = {
  x: Math.floor(Math.random() * 380 + 10),
  y: Math.floor(Math.random() * 380 + 10),
};

// 设置游戏速度
var speed = 100;

// 设置游戏方向
var direction = "right";

// 设置游戏结束标志
var gameOver = false;

// 定义游戏主循环
function gameLoop() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制食物
  ctx.fillStyle = "red";
  ctx.fillRect(food.x, food.y, 10, 10);

  // 绘制贪吃蛇
  for (var i = 0; i < snake.length; i++) {
    ctx.fillStyle = "green";
    ctx.fillRect(snake[i].x, snake[i].y, 10, 10);
  }

  // 移动贪吃蛇
  switch (direction) {
    case "right":
      snake.unshift({x: snake[0].x + 10, y: snake[0].y});
      break;
    case "left":
      snake.unshift({x: snake[0].x - 10, y: snake[0].y});
      break;
    case "up":
      snake.unshift({x: snake[0].x, y: snake[0].y - 10});
      break;
    case "down":
      snake.unshift({x: snake[0].x, y: snake[0].y + 10});
      break;
  }

  // 检测游戏是否结束
  if (snake[0].x > canvas.width || snake[0].x < 0 || snake[0].y > canvas.height || snake[0].y < 0) {
    gameOver = true;
  }

  for (var i = 4; i < snake.length; i++) {
    if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
      gameOver = true;
    }
  }

  // 如果游戏结束，则停止游戏循环
  if (gameOver) {
    alert("游戏结束！");
    return;
  }

  // 如果贪吃蛇吃到食物，则增加其长度
  if (snake[0].x === food.x && snake[0].y === food.y) {
    snake.push({x: food.x, y: food.y});
    food.x = Math.floor(Math.random() * 380 + 10);
    food.y = Math.floor(Math.random() * 380 + 10);
  }

  // 删除贪吃蛇的尾部
  snake.pop();

  // 重新绘制画布
  ctx.fillStyle = "black";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 等待一段时间后，再继续游戏循环
  setTimeout(gameLoop, speed);
}

// 键盘事件监听器
document.addEventListener("keydown", function(e) {
  switch (e.keyCode) {
    case 37:
      direction = "left";
      break;
    case 38:
      direction = "up";
      break;
    case 39:
      direction = "right";
      break;
    case 40:
      direction = "down";
      break;
  }
});

// 启动游戏循环
gameLoop();