手把手教你用DOM构建飞鸟

2023-10-23 00:02:42

DOM开发者的游戏开发指南：制作一只振翅高飞的小鸟

准备好在虚拟天空展翅翱翔了吗？在这篇深入的指南中，我们将引导你使用DOM、JavaScript、HTML和CSS创造一只栩栩如生的、会飞的鸟。系好安全带，我们将带你踏上一段空中冒险之旅。

创建画布

首先，我们需要一个画布来展示我们的杰作。新建一个HTML文件，输入以下代码：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="800" height="600"></canvas>

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

编写JavaScript代码

接下来，让我们转到JavaScript，这是赋予我们鸟儿生命力的语言。在名为script.js的新文件中，输入以下代码：

// 创建画布对象
var canvas = document.getElementById('canvas');

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

// 定义鸟的初始位置
var birdX = 100;
var birdY = 100;

// 定义鸟的速度
var birdVX = 0;
var birdVY = 0;

// 定义重力
var gravity = 0.1;

// 定义鸟的动画帧
var birdFrames = [
  'bird-frame-1.png',
  'bird-frame-2.png',
  'bird-frame-3.png'
];

// 当前的动画帧
var currentFrame = 0;

// 定义鸟的动画速度
var animationSpeed = 100;

// 创建图像对象
var birdImage = new Image();

// 加载鸟的图像
birdImage.src = 'bird.png';

// 监听键盘事件
document.addEventListener('keydown', function(event) {
  // 按下空格键让鸟跳跃
  if (event.keyCode === 32) {
    birdVY = -5;
  }
});

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

  // 更新鸟的位置
  birdX += birdVX;
  birdY += birdVY;

  // 应用重力
  birdVY += gravity;

  // 限制鸟的位置
  if (birdX < 0) {
    birdX = 0;
  }
  if (birdX > canvas.width) {
    birdX = canvas.width;
  }
  if (birdY < 0) {
    birdY = 0;
  }
  if (birdY > canvas.height) {
    birdY = canvas.height;
  }

  // 更新动画帧
  currentFrame = (currentFrame + 1) % birdFrames.length;

  // 绘制鸟
  ctx.drawImage(birdImage, birdFrames[currentFrame], birdX, birdY);

  // 请求下一次动画帧
  requestAnimationFrame(gameLoop);
}

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