【你能过几关】纯JS带你入门一个找色块小游戏（文中码上掘金可玩）

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第18天，点击查看活动详情

前言

最近在技术社群里面有人在讨论用JS去做一个小游戏，比如五子棋、打地鼠之类的，这些小游戏做起来太复杂了，我就想了个简单的。

其实也不算太简单，毕竟都是JS写的逻辑，还是有点弯弯绕绕的过程，不过最终还是实现了。

这是一个无限流的小游戏，只要你敢玩，就能一直玩下去。

文末可以直接在码上掘金中玩一下哦！

基础布局

🤓 主要逻辑其实都是在 JS 里面写的，页面上只需要一个盒子包裹色块就行

<div id="score">第 1 关</div>
<div id="box"></div>

🧐 定义盒子基础样式，也就是最大宽高。

🧐 定义关卡文字的基础样式

🧐 定义色块的通用样式，浮动和画圆

#box {
      width: 500px;
      height: 500px;
      margin: auto;
      margin-top: 100px;
}

#score {
      width: 180px;
      height: 50px;
      line-height: 150%;
      font-size: 2em;
      position: absolute;
      top: 30px;
      left: 35%;
}

.creat {
      float: left;
      border-radius: 100%;
}

色块逻辑

🤠 需要创建一个构造函数，函数里面包裹色块的所有逻辑

// 构造函数
function creat(event) {
    // 色块逻辑...
}

🤠 函数开始时，需要获取到盒子元素

var obox = document.getElementById("box");

🤠 设置色块的 className，并初始化一个属性_creat指向一个对象

this.className = "creat";
this._creat = null;

• 色块 className 的通用样式已经在上面写好了，下面就只需要创建色块的颜色、宽高等

🤠 创建色块的方法

🤠 方法中需定义颜色 rgb 的随机值

this.go = function () {
    var colorNum1 = Math.floor(Math.random() * 253) + 1;
    var colorNum2 = Math.floor(Math.random() * 253) + 1;
    var colorNum3 = Math.floor(Math.random() * 253) + 1;
    this.color = "rgb(" + colorNum1 + "," + colorNum2 + "," + colorNum3 + ")";
    
    // 色块方法...
}

• 随机数取一个值范围是（1~254）防止白色块出现

🤠 循环构造函数中的 event 值，每次点击正确色块后，需要改变 event 的值

for (var i = 0; i < event * event; i++) {
      this._creat = document.createElement("div");
      this._creat.style.width = Math.floor(500 / event) + "px";
      this._creat.style.height = Math.floor(500 / event) + "px";
      this._creat.style.backgroundColor = this.color;
      this._creat.className = this.className;
      obox.appendChild(this._creat);
}

• 循环中动态创建一个 div 赋给之前创建的 _creat 属性
• 并定义 div 的宽高、颜色、className

色块宽高是根据 盒子宽高 除以 event 的值计算出来的。

例如第一关的 event 是 3 ，那么每一个色块的 宽高 就是 500 除以 3 得出每个色块的大小。

• 最后将循环出来的所有 div 色块元素都添加到 盒子元素中。

区分色块

😲 上面创建出来的色块都是统一的颜色，所以我们需要做一个不同颜色的色块出来

🤨 自定义一个透明度的值，用于改变其中一个色块

this.diffOpacity = 0.8;

🤨 获取已经创建的 div

var odiv = document.getElementsByClassName("creat");

🤨 随机获取其中一个，并改变它的透明度值

var numRandom = parseInt(Math.random() * odiv.length);
odiv[numRandom].style.opacity = this.diffOpacity;

点击事件

😍 上面获取到了一个随机色块，并赋予透明度，那么我们需要点击的色块肯定就是这个带有透明度的

😍 所以点击事件就和赋值是一样的了。

odiv[numRandom].onclick = function () {
          /*给取到的div绑定事件，当点击时先清空obox中元素即上一关卡的div
           *获取score改变n的值
           *改变event的值，可以自定义难度
           *再调用一下调用构造函数里面的go函数属性,创建一组新的元素
           */
      var oScore = document.getElementById("score");
      n++;
      oScore.innerHTML = "第 " + n + " 关";
      obox.innerHTML = "";
      event++;
      Create.go();
}

• 给取到的div绑定事件，当点击时先清空盒子中元素即上一关卡的div
• 获取关卡，并改变它的值
• 改变 event 的值，值越大，难度越大
• 点击成功之后，再调用一个色块方法，这样就可以创建一组新的色块元素了

运行

🥳 在 script 标签初始时，需要定义关卡值、定义构造函数并传入参数值

var n = 1;
var Create = new creat(3);
Create.go();

• 开始布局是 3 * 3

码上掘金