js 编写的简单游戏代码,js小游戏游戏代码大全

本篇文章给大家谈谈js小游戏代码大全复制网站，以及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的过渡和动画属性就能够实现小鸟和水管的运动，而判断和小鸟不断下降都可以通过定时器来完成GPT改写。

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-gameshttps://gitee.com/wen-muchun/js-games

附录：完整代码

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

<!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>

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

    // 当页面加载完毕后 执行下面操作
    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();
        }
      }
    };
  </>
</body>


</html>