preface

Having nothing to do, I remembered a small game “Ten Drops of Water” that I often played before. I simply developed the logic of the game and did not write animation and different difficulties due to time reasons. Based on Vue development, the effect is as follows.

1. Rules of the game

Click the mouse to consume bullets to increase water droplets, saturated water droplets and then add water will rupture, the rupture will be to the four directions splash droplets, causing a series of explosions. Instead of water droplets, we use squares, which are filled to mean the water droplets are saturated. Each time a droplet explodes, score points, and all droplets break to win, enter the next level, and reward a number of bullets. Run out of bullets do not enter the next level, the end of the game.

2. Development ideas

1. Map design

Drops are randomly scattered on a matrix, and each element is a water drop. The water drop has its own attributes, such as X: row, Y: column,level: current level.

2. The firing of bullets

Each time an element is clicked, it consumes a bullet and accumulates 1 for the element level, which is greater than 0, indicating the presence of a water drop in that coordinate.

3. Water droplets

When the level of the element reaches the maximum set level, it means that the water drop explodes, disappears itself (the level goes to 0), and emits water droplets around (up, down, left and right).

4. Drip sputtering

Water splash will launch in the direction of the four around water droplets, if the launch of the droplets through the elements of the hierarchy is 0, indicates the element is not water, continue to fly in the direction, until you find a hierarchy (water) element, for the level of + 1, such as beyond the border, is not for processing, and repeat the appeal condition judgment.

5. Winning conditions

When all the drops do not exist (all elements in the matrix have a level of 0), the player wins and moves on to the next level.

3. The source code

3.1 Template section

<template>
  <div class="st">
    hasBlock:{{ hasBlock }} bullets:{{ bullets }} scores:{{ scores }} level:{{
      gLevel
    }}
    <div v-for="(ytem, y) in martix" :key="y">
      <div
        class="cbutton"
        :class="ytem.class"
        v-for="(xtem, x) in ytem"
        :key="x"
        @click="sendBullet(xtem)"
      >
        <div class="btn_cover" v-for="ltem in xtem.level" :key="ltem"></div>
      </div>
    </div>
  </div>
</template>
Copy the code

3.2 the Script part

<script> export default {data() {return {mapSize: {x: 5, y: 5},// Matrix size martix: [], // matrix data Bullets: LevelMax: 0, levelMax: 0, hasBlock: 0, gLevel: 0}; }, mounted() { this.__INIT(); }, methods: {GetRandomNum(Min, Max) {const Range = max-min; const Rand = Math.random(); return Min + Math.round(Rand * Range); }, __INIT() {// map size this.glevel = 0; this.scores = 0; this.bullets = 15; // Initial bullet count this.createmap (); }, // Nextmap () {this.glevel ++; this.bullets += 8; // 8 bullets per level this.createmap (); }, // createMap, initialize data createMap() {let hasBlock = 0; const m = this.mapSize; const martix = []; for (let y = 0; y < m.y; y++) { for (let x = 0; x < m.x; x++) { martix[x] = martix[x] || []; Martix [x][y] = {x, y, level: this.getrandomNum (0, 3), class: []}; If (martix[x][y].level > 0) {// record the number of drops to destroy hasBlock++; } } } this.martix = martix; this.hasBlock = hasBlock; }, radioActive(tem, direction) { let { x, y } = tem; If (direction) {// If (direction) {// If (direction) {let data = null; switch (direction) { case "up": { while (x >= 0 && ! data? .level) { x--; data = this.martix[x]? .[y]; } data? .level && this.upLevelOnce(data); break; } case "down": { while (x < this.martix.length && ! data? .level) { x++; data = this.martix[x]? .[y]; } data? .level && this.upLevelOnce(data); break; } case "left": { while (y >= 0 && ! data? .level) { y--; data = this.martix[x]? .[y]; } data? .level && this.upLevelOnce(data); break; } case "right": { while (y < this.martix[x].length && ! data? .level) { y++; data = this.martix[x]? .[y]; } data? .level && this.upLevelOnce(data); break; } default: {}}} else {// No direction present, so this.radioActive(tem, "up"); this.radioActive(tem, "down"); this.radioActive(tem, "left"); this.radioActive(tem, "right"); }, // upLevelOnce(tem) {if (! tem) return; let { x, y, level } = tem; if (level + 1 ! == this.levelMax) { this.martix[x][y].level++; return; } else {this.martix[x][y]. Level = 0; // Drop to be destroyed minus 1 this.hasblock --; This.score ++; If (this.hasblock === 0) {// this.__nextmap (); return; } // TODO: Animate // Update other data // setTimeout(() => {this.radioactive (tem); }, 1000); }}, // Specify a point to raise sendBullet(tem) {this.bullets--; this.upLevelOnce(tem); If (this.bullets === 0) {alert(" You are dying "); // If (this.bullets === 0) {alert(" You are dying "); this.__INIT(); // reinitialize return; }}}}; </script>Copy the code

3.3 Style part

<style> body { background: #242943; color: #ffffff; } .cbutton { width: 120px; position: relative; display: inline-flex; padding: 0; box-shadow: inset 0 0 0 2px #ffffff; color: #ffffff; cursor: pointer; Height: 3.5 em. } .btn_cover { width: 25%; background-color: #fff; } </style>Copy the code