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

这篇具有很好参考价值的文章主要介绍了原生JS：100行js代码带你实现【像素鸟】小游戏（完整代码+素材图片）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

系列文章目录

JS：经典小游戏：像素鸟

JS：经典小游戏：贪吃蛇

JS：经典小游戏：扫雷

系列文章目录

像素鸟

1.游戏介绍

2.代码分析

3.代码实现

3.1 随机生成水管

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

3.3 让小鸟不断下降

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

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

总结

附录：素材文件

附录：完整代码

像素鸟

1.游戏介绍

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

操作方式：鼠标点击

胜利条件：无

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

2.代码分析

需求：

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

实现效果图：

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

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();
        }
      }
    };

总结

几个注意点：

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

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

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

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

附录：素材文件

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

素材与代码仓库：

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

附录：完整代码

由于缺少背景图片，所以直接复制的话是没办法看到柱子和背景图的。

需要去我上面的仓库里面下载一下素材图片，或者在css里面把背景图片替换为背景颜色，就可以运行了。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      position: relative;
      width: 1000px;
      height: 500px;
      margin: 100px auto;
      background: url(./assets/bgi.jpg) no-repeat center;
      background-size: cover;
      overflow: hidden;
    }

    .container *,
    .hd * {
      /* 用这行代码禁止用户选中文字 */
      user-select: none;
    }

    .hd {
      position: absolute;
      width: 100%;
      padding-top: 20px;
      text-align: right;
      color: #333;
      font-size: 16px;
      z-index: 1;
    }

    .bird {
      width: 40px;
      height: 40px;
      background: url(./assets/PixelBird.png) center no-repeat;
      background-size: 100%;
      position: absolute;
      left: 200px;
      top: 40%;
      font-size: 14px;
      transition: all 0.1s;
    }

    .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%;
      }
    }


    .scope {
      padding-right: 20px;
      font-size: 18px;
    }
  </style>
</head>

<body>


  <div class="container">
    <div class="hd">
      <span class="scope">000</span>
    </div>
    <div class="bird"></div>
  </div>

  <script>
    // 游戏操作:使用鼠标左键点击屏幕，来让小鸟飞得更高

    // 当页面加载完毕后 执行下面操作
    window.onload = function () {
      // 获取dom元素
      const container = document.querySelector(".container");
      const bird = document.querySelector(".bird");
      const scope = document.querySelector(".scope");

      // 原版的像素鸟小鸟下降速度会越来越快 小鸟在多次点击后上升的速度也会越来越快
      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);

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

      // 随机出现的水管
      // 1. 每过1秒出现一对 上下 高度随机的水管
      // 2. 水管自右向左移动 通过动画实现
      // 3. 判断水管和小鸟的距离 每100ms判断一次 根据双方高度的值来判断

      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);

      // 当水管到屏幕外面时，删除节点 并增加分数
      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);

      // 获得是哪一对水管需要被判断 它们与小鸟的距离
      let test_pipe1, test_pipe2; // 记录当前被检测位置的水管的下标
      function get_testPipe() {
        // 开始是0和1
        test_pipe1 = 0;
        test_pipe2 = 1;
        // 然后每过1s更换一对要检测的水管
        setInterval(() => {
          test_pipe1 += 2;
          test_pipe2 += 2;
        }, time_wait);
      }

      // 逻辑：
      //      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();
        }
      }
    };
  </script>
</body>


</html>

想要快速体验效果的可以复制上面的代码在一个 txt 文件中，然后修改css样式，并将txt后缀改为html即可运行。

注意：小鸟、城市背景、水管这3处都要修改哦文章来源地址https://www.toymoban.com/news/detail-473239.html

background: url(./assets/bgi.jpg) no-repeat center;

// 修改为下面这种就可以了

background: #409eff no-repeat center;

到了这里，关于原生JS：100行js代码带你实现【像素鸟】小游戏（完整代码+素材图片）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

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

系列文章目录

像素鸟

1.游戏介绍

2.代码分析

3.代码实现

3.1 随机生成水管

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

3.3 让小鸟不断下降

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

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

总结

附录：素材文件

附录：完整代码

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2