编程小白也能轻松玩转canvas贪吃蛇！3步get代码，带你重温经典游戏！

前端

2024-02-19 23:40:45

一、准备工作

安装代码编辑器

首先，您需要安装一个代码编辑器，如Visual Studio Code、Sublime Text或Atom。这些编辑器可以帮助您编写和管理代码。

创建新项目

在代码编辑器中创建一个新的项目文件夹，并将所有相关文件保存在该文件夹中。

引入HTML和CSS文件

在项目文件夹中创建两个文件：index.html和style.css。index.html是您的HTML文件，style.css是您的CSS文件。

二、HTML和CSS

HTML结构

在index.html文件中，您需要创建一个<canvas>元素。<canvas>元素是HTML5中用于绘制图形的元素。您还需要创建一个<script>元素，用于加载JavaScript代码。

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <canvas id="canvas" width="400px" height="400px"></canvas>
  <script src="script.js"></script>
</body>
</html>

CSS样式

在style.css文件中，您可以添加一些基本的CSS样式，比如<canvas>元素的宽高和背景颜色。

canvas {
  width: 400px;
  height: 400px;
  background-color: black;
}

三、JavaScript

基本变量

在script.js文件中，您需要首先定义一些基本变量，包括画布的上下文、贪吃蛇的长度、贪吃蛇的头部位置、贪吃蛇的运动方向、食物的位置等。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var snakeLength = 5;
var snakeHeadX = 200;
var snakeHeadY = 200;
var snakeDirection = "right";

var foodX = 100;
var foodY = 100;

绘制贪吃蛇

接下来，您需要编写代码来绘制贪吃蛇。贪吃蛇由一个个小方块组成，您可以使用fillRect()方法来绘制这些小方块。

function drawSnake() {
  ctx.fillStyle = "green";
  for (var i = 0; i < snakeLength; i++) {
    ctx.fillRect(snakeHeadX - i * 10, snakeHeadY, 10, 10);
  }
}

绘制食物

您还需要编写代码来绘制食物。食物是一个红色的圆形，您可以使用arc()和fill()方法来绘制它。

function drawFood() {
  ctx.fillStyle = "red";
  ctx.beginPath();
  ctx.arc(foodX, foodY, 5, 0, 2 * Math.PI);
  ctx.fill();
}

游戏循环

最后，您需要编写代码来实现游戏循环。游戏循环不断更新游戏状态，并重新绘制画布。

function gameLoop() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制贪吃蛇
  drawSnake();

  // 绘制食物
  drawFood();

  // 移动贪吃蛇
  moveSnake();

  // 检查是否吃到食物
  if (snakeHeadX == foodX && snakeHeadY == foodY) {
    // 吃到食物，增长贪吃蛇长度
    snakeLength++;

    // 重新生成食物
    foodX = Math.floor(Math.random() * 40) * 10;
    foodY = Math.floor(Math.random() * 40) * 10;
  }

  // 检查是否撞到自己
  for (var i = 4; i < snakeLength; i++) {
    if (snakeHeadX == snakeHeadX - i * 10 && snakeHeadY == snakeHeadY) {
      // 撞到自己，游戏结束
      alert("游戏结束！");
      break;
    }
  }

  // 重新绘制画布
  requestAnimationFrame(gameLoop);
}

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

事件监听器

最后，您需要添加事件监听器来监听键盘事件，以便控制贪吃蛇的运动方向。

document.addEventListener("keydown", function(e) {
  switch (e.keyCode) {
    case 37: // 左
      snakeDirection = "left";
      break;
    case 38: // 上
      snakeDirection = "up";
      break;
    case 39: // 右
      snakeDirection = "right";
      break;
    case 40: // 下
      snakeDirection = "down";
      break;
  }
});