前端案例：像素鸟小游戏（js+dom操作，完整代码，附案例素材）

原生 js+dom 操作实现像素鸟小游戏，代码完整，素材完整。

敬之

101521人浏览 · 2022-03-30 13:37:06

敬之 · 2022-03-30 13:37:06 发布

一、案例效果

二、实现思路

创建游戏背景板和小鸟，并分别设置相对定位与绝对定位；
初始化背景图的位置；
初始化小鸟的位置；
设置游戏状态，游戏开始时背景和管道全部向左运动，游戏结束全部停止运动；
使小鸟飞行，其实就是背景图在 X 轴方向的位置不断减小，实现小鸟向右飞行效果；
设置点击事件，每点击一次小鸟在Y轴的位置减小，实现向上飞的效果；
创建管道，X 方向上管道和下管道位置相同，Y 方向上上管道和下管道高度随机，但中间要空出200px；
实现管道向左运动，与背景图向左操作类似，也是在 X 轴方向的位置不断减小；
管道向左运动移出游戏面板最左侧时再回到原位重新执行，实现循环效果；
定义上下管道的临界值，也就是上下管道自身区域；
小鸟位置与上下管道位置重合(相碰撞)时游戏结束；
多次调用管道创建函数，产生多组管道。

三、完整代码+详细注释

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>小游戏：像素鸟</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #game {
      width: 800px;
      height: 600px;
      background: url('./img/sky.png');
      position: relative;
      margin: auto;
      overflow: hidden;
    }

    #bird {
      width: 34px;
      height: 25px;
      background: url(./img/birds.png) -10px -8px no-repeat;
      position: absolute;
      top: 100px;
      left: 100px;
    }
  </style>
</head>

<body>
  <!-- 游戏背景 -->
  <div id="game">
    <!-- 小鸟 -->
    <div id="bird"></div>
  </div>
</body>

<script>
  //获取游戏背景和小鸟
  var game = document.getElementById('game');
  var birdEle = document.getElementById('bird');

  //初始化背景图
  var sky = {
    x: 0 //背景图初始位置为0
  }

  //初始化小鸟
  var bird = {
    speedX: 5, //小鸟在X轴的速度
    SpeedY: 0, //小鸟在Y轴的速度
    //小鸟坐标
    x: birdEle.offsetLeft, //小鸟初始位置在绝对定位的位置
    y: birdEle.offsetTop,
  }

  var runing = true; //游戏状态

  setInterval(function () {
    if (runing) {
      //小鸟飞行(其实是背景在动)
      sky.x -= 5; //背景每次-5px，以实现向左运动的效果
      game.style.backgroundPositionX = sky.x + 'px';
      //小鸟上下运动
      bird.SpeedY += 1; //每一次点击小鸟向上10px后开始自增也就是再自动向下
      bird.y += bird.SpeedY; //小鸟自动不断向下运动
      //判断游戏状态
      if (bird.y < 0) { //超出游戏背景顶部时游戏结束
        runing = false;
        bird.y = 0;
      }
      if (bird.y + birdEle.offsetHeight > 600) { //超出游戏背景底部时游戏结束
        runing = false;
        bird.y = 600 - birdEle.offsetHeight;
      }
      birdEle.style.top = bird.y + 'px';
    }
  }, 30);

  //点击时小鸟向上运动
  document.onclick = function () {
    bird.SpeedY = -10; //点击一次向上运动10px
  }

  //创建管道
  function creatPipe(position) {
    var pipe = {};
    pipe.x = position;
    pipe.upHeight = 200 + parseInt(Math.random() * 100); //上管道高度为200 - 300px
    pipe.doHeight = 600 - pipe.upHeight - 200; //下管道高度
    pipe.doTop = pipe.upHeight + 200; //上下两管道之间200px

    //创建上管道
    var upPipe = document.createElement('div'); //新建div
    upPipe.style.width = '52px';
    upPipe.style.height = pipe.upHeight + 'px';
    upPipe.style.background = 'url(./img/pipe2.png) no-repeat center bottom';
    upPipe.style.position = 'absolute';
    upPipe.style.top = '0px';
    upPipe.style.left = pipe.x + 'px';
    game.appendChild(upPipe); //将上管道追加到游戏页面中

    //创建下管道
    var doPipe = document.createElement('div'); //新建div
    doPipe.style.width = '52px';
    doPipe.style.height = pipe.doHeight + 'px';
    doPipe.style.background = 'url(./img/pipe1.png) no-repeat center top';
    doPipe.style.position = 'absolute';
    doPipe.style.top = pipe.doTop + 'px';
    doPipe.style.left = pipe.x + 'px';
    game.appendChild(doPipe); //将下管道追加到游戏页面中

    //管道进行运动
    setInterval(function () {
      if (runing) { //游戏处于运行状态时管道再运动
        pipe.x -= 2; //x方向不断-2px，以实现管道向左运动的效果
        upPipe.style.left = pipe.x + 'px';
        doPipe.style.left = pipe.x + 'px';
        if (pipe.x < -52) { //管道移出最左侧时回到原位，实现不间断效果
          pipe.x = 800;
        }
        //上下管道临界值
        var uCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y < pipe.upHeight;
        var dCheck = bird.x + 34 > pipe.x && bird.x < pipe.x + 52 && bird.y > pipe.upHeight + 200;
        if (uCheck || dCheck) { //碰到上管道或下管道临界值则游戏终止
          runing = false;
        }
      }
    }, 30)
  }
  creatPipe(400); //产生四组管道
  creatPipe(600);
  creatPipe(800);
  creatPipe(1000);
</script>

</html>

四、代码释义

这段代码实现了一个简化的像素鸟（Flappy Bird）游戏的基础功能。它使用 HTML、CSS 和 JavaScript 来创建游戏界面、小鸟和管道的动画效果，以及游戏的基本逻辑。下面是代码各部分的详细解释：

HTML部分

<div id="game"> 定义了游戏的背景区域，小鸟将在这个区域内飞行。
<div id="bird"></div> 是小鸟的容器，通过CSS样式设置其外观和初始位置。

CSS部分

* { margin: 0; padding: 0; } 清除所有元素的默认边距和填充。
#game 设置了游戏的背景图、大小、位置等样式。
#bird 设置了小鸟的背景图（多帧动画的一部分）、大小、位置和绝对定位。

JavaScript部分

初始化变量
- 获取game和bird的DOM元素。
- 初始化背景图(sky)和小鸟(bird)的位置和速度。
- 设置游戏运行状态(runing)。
游戏循环
- 使用setInterval设置游戏循环，每30毫秒执行一次。
- 在循环中，更新背景图的位置（模拟小鸟飞行），以及小鸟的Y轴位置（模拟重力效果）。
- 检查小鸟是否飞出游戏区域（顶部或底部），并据此调整游戏状态。
小鸟向上跳跃
- 当点击页面时，小鸟的Y轴速度(SpeedY)被设置为-10，模拟向上跳跃的动作。
创建管道
- creatPipe函数用于创建一组管道（包括上管道和下管道），并设置它们的样式和位置。
- 管道使用绝对定位，并通过setInterval不断更新其位置，模拟向左移动的效果。
- 当管道移动到游戏区域左侧之外时，将其位置重置到右侧，实现管道循环出现的效果。
- 检查小鸟是否与管道碰撞，如果碰撞则停止游戏。
管道生成
- 代码中调用了四次creatPipe函数，生成了四组管道，每组管道的初始位置不同。

注意事项

代码中有一处可能的错误：在bird对象中，speedX的驼峰命名被错误地写成了SpeedY（首字母大写）。为了保持一致性，建议将SpeedY改为speedY。
管道生成时只调用了四次creatPipe函数，这可能不足以在长时间游戏中保持足够的挑战性。可以考虑在游戏循环中动态添加新的管道，或者在管道移出游戏区域后重新生成。
碰撞检测的逻辑可能需要根据实际管道和小鸟的尺寸进行调整，以确保碰撞检测的准确性。
代码中未包含声音效果或分数计算等额外功能，这些可以根据需要进行添加。