原生JS：100行js代码带你实现【像素鸟】小游戏（完整代码+素材图片）

系列文章目录

JS：经典小游戏：像素鸟

JS：经典小游戏：贪吃蛇

JS：经典小游戏：扫雷

---

目录

系列文章目录

像素鸟

1.游戏介绍

2.代码分析

3.代码实现

3.1 随机生成水管

3.2 当水管超过游戏显示区域时，删除这一对水管

3.3 让小鸟不断下降

3.4 通过鼠标点击事件来让小鸟上升

3.5 检测小鸟是否撞上了水管

总结

附录：素材文件

附录：完整代码

---

像素鸟

1.游戏介绍

像素鸟曾经是一个火爆一时的小游戏，我们尝试用JavaScript来实现像素鸟的核心功能。

操作方式：鼠标点击

胜利条件：无

失败条件：小鸟碰到了屏幕上下的水管就算失败

2.代码分析

需求：

1. 在屏幕上下两侧随机生成高度不一的水管
2. 水管会不断的从右向左移动 来营造出小鸟向右飞行的感觉
3. 小鸟会不断下降，玩家点击鼠标来让小鸟上升
4. 当小鸟碰到任一水管时，游戏结束

实现效果图：

3.代码实现

我们分析之后就会发现，整个游戏其实很简单，我们只需要通过CSS3的过渡和动画属性就能够实现小鸟和水管的运动，而判断和小鸟不断下降都可以通过定时器来完成。

3.1 随机生成水管

需求：

   1. 每过1秒出现一对 上下 高度随机的管子

   2. 管子自右向左移动 （通过动画实现）

      const time_wait = 1000; // 1s生成一对水管 
      let pipe = []; // 记录所有水管的dom对象
      let i = 0; // 分辨水管的下标是偶数还是奇数
      // 生成水管的函数 水管的高度是随机的
      function render_pipe() {
        pipe[i] = document.createElement("div");
        // 高度120 - 205    最高205  两根水管都205px的话 还能留出来90px让小鸟上升
        let random_height = Math.floor(Math.random() * 86 + 120);
        pipe[i].classList.add("pipe");
        pipe[i].style.height = random_height + "px";
        // 偶数的水管在上面 奇数的在下面
        if (i % 2 == 0) {
          pipe[i].style.top = 0;
        } else {
          pipe[i].style.bottom = 0;
          // 颠倒底部的水管
          pipe[i].style.transform = 'rotate(180deg)'
        }
        // i 的值会在执行完这行代码后 ＋1
        container.appendChild(pipe[i++]);
      }

      // 每过1s渲染2根水管 一上一下
      let add_pipe = setInterval(function () {
        render_pipe();
        render_pipe();
      }, time_wait);

 通过CSS3动画来让水管向左移动

    .pipe {
       position: absolute;
       right: 0;
       width: 60px;
       background: url(./assets/pipetop.png) no-repeat;
       background-size: 100% 100%;
       /* 水管的移动是通过动画来完成的,动画执行完毕后停留到终点位置 */
       animation: move 5s linear forwards;
      }

      @keyframes move {
        /* 0%{
                right: 0;
            } */
        to {
          right: 100%;
        }
      }

3.2 当水管超过游戏显示区域时，删除这一对水管

      // 当水管到屏幕外面时，删除节点 并增加分数
      let scope_point = 0;
      let delete_pipe = setTimeout(() => {
        setInterval(() => {
          // 删除第一个节点和它的兄弟
          let pipe_first = document.querySelector(".pipe");
          container.removeChild(pipe_first.nextSibling);
          container.removeChild(pipe_first);

          // 分数+1 有补零
          let scope_point_string = "000";
          if (scope_point <= 100) {
            scope_point_string = "00" + ++scope_point;
          }
          scope.innerText = scope_point_string;

        }, time_wait);
      }, 5000);

3.3 让小鸟不断下降

通过定时器操作小鸟的dom对象，可以很简单就能让小鸟实现不断下降的功能

      // 原版的像素鸟小鸟下降速度会越来越快 小鸟在多次点击后上升的速度也会越来越快
      let speed = 10 // 所以提供一个共用变量给下降和上升，它用来控制小鸟上下跳动的距离
      // 小鸟移动的函数  
      function bird_fly() {
        speed += 2
        // 当speed是正数的时候 小鸟就会下降 当speed是负数时 小鸟就会上升
        bird.setAttribute("style", `top:${bird.offsetTop + speed}px`);
      }
      // 小鸟不停的飞行......
      let time_down = setInterval(bird_fly, 100);

     

现在小鸟的移动还有点僵硬，我们可以通过过渡属性来让小鸟的移动更加顺滑，代码非常简单，只需要给小鸟增加如下样式即可：

transition: all 0.1s;

3.4 通过鼠标点击事件来让小鸟上升

鼠标点击游戏任一区域，即可实现小鸟的上升，但是上升是通过speed变量间接控制小鸟的飞行的

     // 点击一下 小鸟上升 
      container.addEventListener("click", function () {
        // 通过控制speed来间接的让小鸟上升 这样不仅代码更少 而且游戏手感更接近原版 
        speed -= 7; 
      });

3.5 检测小鸟是否撞上了水管

在完成水管的渲染、移动 和小鸟的下降和上升之后，现在要做的就是判断小鸟是否撞上了水管。

思路是：

1.计算出水管在游戏开始多长时间后会到达小鸟的面前

2.在水管即将到达小鸟面前的时候 获得要被检测的水管，pipe1与pipe2

3.每过50ms检查一下 小鸟是否撞上了pipe1 或者pipe2

4.水管是每过1s渲染出来一对，所以我们也每过1s切换一下被检测水管的下标

这种实现方式可以不用遍历所有的水管，只需要每隔一段时间切换下标，这个时间间隔和生成水管的节奏保持一致即可。

      // 逻辑：
      //      1.游戏开始1s后生成第一对水管
      //      2.计算得出第一对水管3.25s后到达小鸟的右侧
      //      3.游戏开始4.25s后开始检测小鸟和水管的位置
      //      4.游戏开始4.25s后每过1s，更换需要检测的水管
        
     // 1.游戏开始1s后开始确定水管移动的速度 
      setTimeout(() => {
        let pipe_speed = container.offsetWidth / 5; // 水管动画持续时间5s 
        // 移动距离为1000px 即速度为 200px/s

        // 拿路程/速度 即可获得水管移动到小鸟面前的时间
        let test_time = (container.offsetWidth - bird.offsetLeft - 
                        bird.offsetWidth - pipe[0].offsetWidth) / pipe_speed;
        //console.log(test_time); //3.25s  
        //2.也就是说 水管出现并移动3.25s后 第一对水管到达小鸟的右侧

        // 3.再过3.25s后，开始检测距离
        setTimeout(() => {
          get_testPipe()
          distance = setInterval(() => {
            test_distance()
          }, 50)
        }, test_time * 1000)
      }, time_wait);

      // 4.在水管生成后获取小鸟和水管的一些固定属性
      setTimeout(() => {
        // 获取水管的宽度 
        pipe_width = pipe[0].offsetWidth
        // 获取小鸟的宽高
        bird_width = bird.offsetWidth
        bird_height = bird.offsetHeight
      }, time_wait)


      // 5.检测小鸟是否撞到了被检测的水管
      function test_distance() {
        // 获取被检测的水管与上边界的高度
        let height_up = pipe[test_pipe1].offsetHeight
        let height_down = pipe[test_pipe2].offsetTop;
        // 获取水管现在的水平位置
        let pipe_level = pipe[test_pipe1].offsetLeft

        // 获取小鸟现在的水平位置和垂直位置
        let bird_level = bird.offsetLeft
        let b_top = bird.offsetTop;

        // 顶部与上水管相比较 或 底部与下水管相比较 且水平距离上水管与小鸟也在同一位置
        if ((b_top < height_up || (b_top + bird_height > height_down)) 
            && (bird_level +     bird_width >= pipe_level) 
            && bird_level <= pipe_level + pipe_width) 
        {
          clearInterval(distance);
          clearInterval(time_down);
          clearInterval(add_pipe);
          clearInterval(delete_pipe);
          alert(`碰！ ${scope_point}分`);
          // 游戏结束，刷新页面
          location.reload();
        }
      }
    };

总结

几个注意点：

1. 看似是小鸟在向前飞行，实际上是水管在向后移动，以减少内存的消耗。
2. 对于水管的显示，使用背景图片的background-size属性，设置100% 100% 即可让背景图片完全覆盖随机高度的div。
3. 对于水管的移动，使用css3的动画属性，这可以很方便的控制水管移动的距离、速度与方向。
4. 对于小鸟的移动，我们通过一个公有变量来控制小鸟下降与上升的距离，这样既可以实现上升与下降越来越快的功能，也最符合原版像素鸟的手感，同时代码量也是最少的。
5. 关于判断小鸟和水管的位置，我们需要有一个清晰的思路：水管到达小鸟面前时开始检测位置；水管经过小鸟之后更换被检测的水管；检测距离时既要检测上下，也要检测左右距离。

OK，以上就是经典小游戏 像素鸟的JavaScript实现思路了，希望能帮助到大家，有不懂的欢迎在评论区留言。

最后，附上JS代码量，我可不是标题党。

附录：素材文件

关于素材：因为这里无法直接上传文件，所以素材图片还请移步我的gitee仓库中获取。

素材与代码仓库：

JS小游戏素材仓库https://gitee.com/wen-muchun/js-games

附录：完整代码

由于缺少背景图片，所以直接复制肯定会报错的，要么下载一下素材图片，要么替换背景图片为背景颜色，就可以运行了。

  
  
  
  
  





  

    

      000