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

Gaming experience

rendering

The rules of the game

As you can see from the renderings, this is a minesweeper game. Therefore, the rules of this game also follow the same set of rules of mine clearance. Click to review minesweeper rules

After all the fireworks and firecrackers are found, they will be lit automatically, and the New Year greeting eggs will be presented (everyone’s different oh, welcome to receive the eggs in the comments section).

Demo address

Click the link to try: HXKJ.vip /demo/firecr…

Code implementation

Next is the code implementation link, let’s step by step, step by step slowly.

Initialization phase

  • Calculate the total number of squares, open state, marked state
  • Refresh firecracker position
// Initialize the game
init (width, height, mineCount) {
    this.isEnd = false;
    const total = width * height;
    const mines = new Array(total).fill(0);
    for (let i = 0; i < mineCount; i++) {
        mines[i] = 1;
    }
    shuffle(mines, mineCount);
    this.mines = mines;
    this.openStatus = new Array(total).fill(0);
    this.markStatus = new Array(total).fill(0);
    this.selectedMineCount = 0;
},
// Shuffle the order
shuffle (mines, start) {
    for (let i = start; i < mines.length; i++) {
        const randomIndex = Math.floor(Math.random() * (i + 1));
        consttmp = mines[randomIndex]; mines[randomIndex] = mines[i]; mines[i] = tmp; }}Copy the code

Click on the event

  • Calculate the number of firecrackers around the click box (when the value is 0, it means that the 9 surrounding squares do not contain firecrackers, and directly open the surrounding squares at this time)
// Count the number of firecrackers around
neighbourMineCount () {
    const result = new Array(this.width * this.height).fill(0);
    for (let i = 0; i < result.length; i++) {
        if (!this.mines[i]) {
            continue;
        }
        const y = i % this.width;
        const x = (i - y) / this.width;
        for (let j = -1; j < 2; j++) {
            const newX = x + j;
            if (newX < 0 || newX === this.height) {
                continue;
            }
            for (let k = -1; k < 2; k++) {
                const newY = y + k;
                if (newY < 0 || newY === this.width) {
                    continue;
                }
                result[newX * this.width + newY]++; }}}return result;
},
Copy the code

Right mouse click event

  • Mark the grid according to the operation
handleRightClick (x, y) {
    if (this.isEnd) {
        return;
    }
    const index = x * this.width + y;
    if (this.openStatus[index] === 1) {
        return;
    }
    this.markStatus.splice(index, 1, (this.markStatus[index] + 1) % 3);
    if (this.markStatus[index] === 1) {
        this.selectedMineCount++;
    } else if (this.markStatus[index] === 2) {
        this.selectedMineCount--; }},Copy the code

Generally speaking, the amount of core code is still quite small, I wish you a happy New Year!

The project address

Yards cloud gitee: gitee.com/HashTang/fi…

conclusion

Author: HashTang

Personal Space: HXKJ.VIP