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的过渡和动画属性就能够实现小鸟和水管的运动，而判断和小鸟不断下降都可以通过定时器来完成Python中的所有运算符号。

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 &l