[Games] Mirror flip – VUe3

I am participating in the nuggets Community game creative submission Contest. For details, please see: Game Creative Submission Contest

preface

Coincides with the spring April, the weather is hot and cool, meet game contest, with clumsy skills, book a short article.

Rules of the game: there are 5*5 grids, need to turn them all into another side, each side of the flip, its up and down around will be flipped, all turned into a color that is through!

The environment

Main Environment:

Vue3 version: 3.2.4 vite version: 2.5.0

Note: Considering that the game is not too complex, vue-Router was not introduced without a multi-page approach

Main plug-ins:

Windicss version: 3.5.1 track of

Preview: vaggchen. Making. IO/turnBox /

Code address: github.com/vaggchen/tu…

Run as shown:

Train of thought

1. Build an environment and download dependencies
2. Run the project
3. Use WindicSS main compatible PC and mobile terminal

Let’s say anything less than 1024 is a tablet or phone LG (1024px)

App.vue
<div class="relative w-full h-full lg:(w-750px h-800px)">
    <Game />
</div>
Copy the code

4. Main game. vue sets four main components: GameTool. Vue Game toolbar, Gamecnt. vue Game body, tip. vue opening prompt, GamePass

implementation

GameCnt

layout

First draw 5*5 grid, there are a variety of methods, the author here to take the simplest grid layout implementation

// Define the number of rows
const rowLen = 5
// Define an array
const lists = ref([])
lists.value = new Array(rowLen * colLen).fill(0)

<div class="h-full p-4 py-8 grid gap-2" :class="`grid-cols-${rowLen}`">
    <div v-for="(item,index ) in lists" class="bg-blue-300 rounded-md">
      <! -- {{item}} -->
    </div>
</div>
Copy the code

Click the flip of the element

Implement a simple rollover:

// When you click box
const boxClick = (index) = > {
  lists.value[index] = lists.value[index]?0:1
}

<div v-for="(item,index ) in lists" class=" rounded-md" :class=! "" item? 'bg-blue-300':'bg-red-300'" @click="boxClick(index)"> <! -- {{item}} --> </div>Copy the code

Click to flip the element left, right, up, down

You think the same way up and down, and you think the same way left and right, so I’ll talk about it briefly

How do I change the value above this element?

1. Gets the ordinal value of the previous row, index-rowlen
2. Index-rowlen > -1
3. The assignment can be

Two lines of code:

  let topInxdex = index - rowLen;
  topInxdex > -1 && (lists.value[topInxdex] = changeVal(topInxdex))
Copy the code

So what do WE do with the value to the left of that element?

1. Gets the ordinal value to the left of the element, index-1
2. RowLen === parseInt(leftInxdex/rowLen)
3. The assignment can be

Two lines of code:

  let leftInxdex = index - 1;
  leftInxdex > -1 && (parseInt(index / rowLen) === parseInt(leftInxdex / rowLen)) && (lists.value[leftInxdex] = changeVal(leftInxdex))
Copy the code

Judge the game pass

This place can be monitored using computed and Watch, but for simplicity, write the method directly inside the click element method

// Whether they all succeed
  const getIsAllOk = () = > {
    return lists.value.some(item= > item === 0)}// Check whether they are all successful
  const flag = getIsAllOk()
  if(! flag) { gamePass() }// Successfully called method
const gamePass = () = > {
  emit('gamePass')}Copy the code

Note: This gamePass needs to be registered at defineEmits

GameTool

On the left is the number of moves and on the right is the restart button

After moving the number of steps, the left side will be adjusted to the number of moves

GamePass

For component independence, integration into GameCnt is not considered for now

1. Let me draw the same red 5 by 5 grid
2. Set up a picture to display (it could be a funny picture or a picture of your girlfriend)
3. Write animation @keyframes

GameTip

This component is the opening prompt component

The last

Game.cnt can write some test code to test what happens after finishing the Game

Game. CNT has been optimized for rollover, otherwise it will only have color change

The overall difficulty is not high, you can practice VUE3, and game thinking

The author compares dish, very difficult customs clearance, welcome everybody big guy to try!