🎮 周末无聊，来玩【智商检测器】标题摘自UP主【GM的秘密基地】

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

前言

刷B站的时候看到【GM的秘密基地】的这个小游戏，觉得挺有意思的，小小实现一版。

玩法介绍

• 👆 开局可以任意点击翻开一个棋子
• 📍 然后点击同一条线上的并且中间空一个位置的没打开的棋子，作为目的地
• 👆 再点击开局点的棋子，就可以翻开目的地和中间的棋子，开局棋子会还原
• 👆 然后重复操作，直到最后只剩一个空位置即可获胜
• 💥 获胜后有烟花哦
• 😈 教程就到这里，听说IQ低于120的无法获胜 页面内有教程演示按钮

点击链接试玩

代码实现

✅ 定义一个游戏类、依赖节点、依赖方法

const doc = window.document
const $ = (el) => {
    return doc.querySelector(el)
}
class Game {
    constructor(arg) {
        this.opt = Object.assign({
                el: 'body', // 棋盘节点
                chessboard: 5, // 棋盘行数
                timeCallback() {}, // 计时器回调
                stepSuccess() {}, // 下棋正确
                success() {} // 成功完成游戏
        }, arg)
        this.__recordSteps = [] // 下棋步数记录
        this.el = $(this.opt.el)
    }
}

✅ 绘制棋盘的方法

class Game {
    paint() { // 绘制棋盘
        this.el.innerHTML = ""
        this.__ms = 0
        this.__paintInit = true
        const chessboard = Array.from({length: this.opt.chessboard}).map((row, index) => {
                index = index + 1
                const rowEl = doc.createElement('div')
                rowEl.className = 'game-row'
                this.el.appendChild(rowEl)

                return Array.from({length: index}).map((child, cindex) => {
                        const colEl = doc.createElement('div')
                        colEl.className = 'game-col'
                        rowEl.appendChild(colEl)

                        const chess = doc.createElement('div')
                        const id = `game-chess-${index}-${cindex+1}`
                        chess.id = id
                        chess.className = 'game-chess'
                        colEl.appendChild(chess)
                        const obj = {
                                position: [index, cindex + 1],
                                el: chess,
                                status: false // 默认棋子未打开
                        }
                        chess.addEventListener('click', () => {
                                this.step(obj, chess)
                        })
                        return obj
                })
        })
        this.chessboard = chessboard
    }
}

✅ 其他代码

咱们主要还是玩游戏🎮，代码就不全放了，可以在仓库里查阅

class Game {
    step() { // 绘制棋盘
    }
    toStep(){ // 计算目标位置是否符合游戏规则
    }
    recordStep(){ // 记录步骤
    }
    time(){ // 计时器
    }
    isSucessGame(){ // 是否成功完成游戏
    }
    reset(){ // 重置
    }
}

代码地址

Gitee