PK creative Spring Festival, I am participating in the “Spring Festival creative submission contest”, please see: Spring Festival creative submission Contest

preface

It was interesting to see a little game called “GM’s Secret Base” while playing station B in June 2020. I did it on the spur of the moment. More than a year later, I can’t play now.

Gameplay is introduced

• 👆 opening can be arbitrarily click open a chess piece
• 📍 then click on an unopened piece on the same line with an empty space in the middle as the destination
• 👆 click the opening piece again, you can open the destination and the middle piece, the opening piece will restore
• 👆 then repeat until there is only one empty position left to win
• 💥 win after fireworks oh
• 😈 that’s all for the tutorial. I heard that anyone with an IQ lower than 120 won’t win (there is a tutorial demo button on the page)

Click the link to try it out

Code implementation

The code is pretty simple

✅ defines a game class, dependency nodes, and dependency methods

const doc = window.document
const$=(el) = > {
    return doc.querySelector(el)
}
class Game {
    constructor(arg) {
        this.opt = Object.assign({
                el: 'body'.// The checkerboard node
                chessboard: 5.// Number of checkerboard lines
                timeCallback() {}, // Timer callback
                stepSuccess() {}, // Play chess correctly
                success() {} // Successfully complete the game
        }, arg)
        this.__recordSteps = [] // Record the number of moves in chess
        this.el = $(this.opt.el)
    }
}
Copy the code

✅ method of drawing checkerboard

class Game {
    paint() { // Draw the checkerboard
        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 // The default chess piece is not open
                        }
                        chess.addEventListener('click'.() = > {
                                this.step(obj, chess)
                        })
                        return obj
                })
        })
        this.chessboard = chessboard
    }
}
Copy the code

✅ Other codes

We mainly play the game 🎮, the code is not all put, can be consulted in the warehouse

class Game {
    step() { // Draw the checkerboard
    }
    toStep(){ // Calculate whether the target position conforms to the rules of the game
    }
    recordStep(){ // Record the steps
    }
    time(){ / / timer
    }
    isSucessGame(){ // Whether the game was successfully completed
    }
    reset(){ / / reset}}Copy the code

The code address

Gitee