Canvas 123木头人游戏：用代码创造欢乐的童年回忆

Canvas绘图简介

Canvas是一个HTML5元素，它允许您使用JavaScript来绘制2D图形。Canvas的绘图功能非常强大，可以用来创建各种各样的图形和动画。

要使用Canvas，首先需要创建一个Canvas元素并将其添加到HTML页面中。可以使用以下代码来创建一个Canvas元素：

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

接下来，需要使用JavaScript来获取Canvas元素的绘图上下文。绘图上下文是一个对象，它提供了各种方法来绘制图形和动画。可以使用以下代码来获取Canvas元素的绘图上下文：

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

现在，就可以使用绘图上下文来绘制图形和动画了。可以使用以下代码来绘制一个矩形：

ctx.fillRect(10, 10, 100, 100);

创建游戏角色

在123木头人游戏中，我们需要创建两个游戏角色：玩家和木头人。可以使用以下代码来创建一个玩家角色：

var player = {
  x: 10,
  y: 10,
  width: 50,
  height: 50
};

可以使用以下代码来创建一个木头人角色：

var woodman = {
  x: 300,
  y: 10,
  width: 50,
  height: 50
};

控制角色的移动和动画

可以使用以下代码来控制玩家角色的移动：

document.addEventListener("keydown", function(e) {
  switch (e.keyCode) {
    case 37: // left
      player.x -= 10;
      break;
    case 38: // up
      player.y -= 10;
      break;
    case 39: // right
      player.x += 10;
      break;
    case 40: // down
      player.y += 10;
      break;
  }
});

可以使用以下代码来控制木头人角色的移动：

var woodmanMoveInterval = setInterval(function() {
  woodman.x -= 10;
  if (woodman.x <= 0) {
    clearInterval(woodmanMoveInterval);
  }
}, 100);

使用事件监听器来响应玩家的输入

可以使用以下代码来响应玩家的输入：

document.addEventListener("click", function() {
  if (woodman.x <= 0) {
    alert("你赢了！");
    clearInterval(woodmanMoveInterval);
  } else {
    alert("你输了！");
  }
});

完整的游戏代码

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

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

var player = {
  x: 10,
  y: 10,
  width: 50,
  height: 50
};

var woodman = {
  x: 300,
  y: 10,
  width: 50,
  height: 50
};

document.addEventListener("keydown", function(e) {
  switch (e.keyCode) {
    case 37: // left
      player.x -= 10;
      break;
    case 38: // up
      player.y -= 10;
      break;
    case 39: // right
      player.x += 10;
      break;
    case 40: // down
      player.y += 10;
      break;
  }
});

var woodmanMoveInterval = setInterval(function() {
  woodman.x -= 10;
  if (woodman.x <= 0) {
    clearInterval(woodmanMoveInterval);
  }
}, 100);

document.addEventListener("click", function() {
  if (woodman.x <= 0) {
    alert("你赢了！");
    clearInterval(woodmanMoveInterval);
  } else {
    alert("你输了！");
  }
});

function draw() {
  ctx.fillStyle = "#000000";
  ctx.fillRect(0, 0, 500, 500);

  ctx.fillStyle = "#ff0000";
  ctx.fillRect(player.x, player.y, player.width, player.height);

  ctx.fillStyle = "#00ff00";
  ctx.fillRect(woodman.x, woodman.y, woodman.width, woodman.height);

  requestAnimationFrame(draw);
}

draw();