从零入门canvas，用最简单的方式带你实现贪吃蛇

随着H5的到来，越来越多的新特性都让人眼前一亮。其中，canvas就是一个非常实用的特性。基于canvas，我们可以完成图表、游戏等工具的实现。

在本文中，我们将介绍如何使用canvas来制作贪吃蛇游戏。我们从入门开始，一步步掌握canvas的用法和技巧，最终实现自己的贪吃蛇游戏。

1. canvas简介

canvas是一个HTML5的元素，用于绘制图形。它是一个位图，这意味着它是由像素组成的。canvas可以用来创建各种各样的图形，包括线条、矩形、圆形、文本等等。

2. 创建canvas

要创建一个canvas，我们可以使用<canvas>标签。<canvas>标签有两个属性：width和height。这两个属性指定了canvas的宽度和高度。

<canvas id="myCanvas" width="500" height="500"></canvas>

这段代码创建了一个500像素宽，500像素高的canvas。

3. 获取canvas上下文

要绘制图形，我们需要先获取canvas的上下文。上下文是一个对象，它提供了绘制图形的方法。

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

这段代码获取了canvas的上下文，并将其存储在ctx变量中。

4. 绘制图形

我们可以使用ctx对象来绘制各种各样的图形。下面是一些常用的方法：

• ctx.fillStyle = "color"; // 设置填充颜色
• ctx.strokeStyle = "color"; // 设置边框颜色
• ctx.lineWidth = "width"; // 设置线条宽度
• ctx.beginPath(); // 开始绘制路径
• ctx.moveTo(x, y); // 将路径移动到指定点
• ctx.lineTo(x, y); // 将路径连接到指定点
• ctx.closePath(); // 关闭路径
• ctx.fill(); // 填充路径
• ctx.stroke(); // 描边路径

5. 制作贪吃蛇游戏

现在，我们已经掌握了canvas的基本用法，我们可以开始制作贪吃蛇游戏了。

贪吃蛇游戏是一个非常简单的小游戏。游戏规则如下：

• 玩家控制一条蛇，蛇的身体由多个方块组成。
• 蛇的身体会不断增长，但头部和尾部会不断移动，使蛇的身体不断改变形状。
• 蛇在移动时会吃掉食物，吃掉食物后，蛇的身体会增长。
• 如果蛇的身体碰到墙壁或自己的身体，游戏结束。

我们可以使用canvas来实现贪吃蛇游戏。首先，我们需要创建一个canvas元素，并获取canvas的上下文。然后，我们需要创建一个蛇对象和一个食物对象。最后，我们需要在canvas上绘制蛇和食物，并控制蛇的移动。

下面是一个简单的贪吃蛇游戏的代码示例：

var canvas = document.getElementById("myCanvas");
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.random() * 400,
  y: Math.random() * 400,
};

var dx = 10;
var dy = 0;

function drawSnake() {
  for (var i = 0; i < snake.length; i++) {
    ctx.fillStyle = "green";
    ctx.strokeStyle = "black";
    ctx.fillRect(snake[i].x, snake[i].y, 10, 10);
    ctx.strokeRect(snake[i].x, snake[i].y, 10, 10);
  }
}

function drawFood() {
  ctx.fillStyle = "red";
  ctx.strokeStyle = "black";
  ctx.fillRect(food.x, food.y, 10, 10);
  ctx.strokeRect(food.x, food.y, 10, 10);
}

function moveSnake() {
  var head = {
    x: snake[0].x + dx,
    y: snake[0].y + dy,
  };

  snake.unshift(head);

  if (snake[0].x == food.x && snake[0].y == food.y) {
    food.x = Math.random() * 400;
    food.y = Math.random() * 400;
  } else {
    snake.pop();
  }
}

function changeDirection(e) {
  if (e.keyCode == 37 && dx != 10) {
    dx = -10;
    dy = 0;
  } else if (e.keyCode == 38 && dy != 10) {
    dx = 0;
    dy = -10;
  } else if (e.keyCode == 39 && dx != -10) {
    dx = 10;
    dy = 0;
  } else if (e.keyCode == 40 && dy != -10) {
    dx = 0;
    dy = 10;
  }
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  drawSnake();
  drawFood();
  moveSnake();
}

document.addEventListener("keydown", changeDirection);

setInterval(draw, 100);

这段代码实现了贪吃蛇游戏的核心逻辑。您可以根据自己的需要对代码进行修改，以实现更复杂的游戏功能。

6. 总结

本文介绍了如何使用canvas来制作贪吃蛇游戏。我们从入门开始，一步步掌握了canvas的用法和技巧，最终实现了自己的贪吃蛇游戏。