Pre –

Create a folder, open the editor and type in the backgroundvue create . Create a vUE project in the current directory. It’s pretty simple, so just go with Babel. Move up or down, space select, press Enter ok.Should we use separate parts or write them all in the package? The second

Do you want to save the configuration for later use? Is not recommended

Yarn or NPM? yarn

After setting, press Enter and wait for SUCCESS. Run Yarn Serve to obtain the port, and open the replication in the browser to view the page.





Here is a simple analysis of the requirements. The game we want to make is as follows: ↓, draw a cross, the next click is draw a circle, when the three same symbols are connected in a row, the game ends.If you don’t have any ideas, we can break it down to a box with a cross.


Start coding

So let’s just make it click on the space, so X comes up. I’m going to use if else to switch data.

You can also use template instead of div because templates will eventually disappear (template does not support the onclick event!).

But we have 9 cells, should we copy the code 9 times? Onclick = a1, a2, a1, a2, a1, a1, a2, a1, a1, a2, a1, a1, a2, a1, a2, a1, a2, a1, a2, a1, a2, a1, a2, a1, a2, a1, a2, a1, a2, a1, a2, a1, a2 That’s silly. That’s where the componentization comes in.

Create a cell. vue page in SRC, copy the code and import it in the original app.vue.In this way, each cell is independent and does not conflict, and each cell has its own A.

You can’t just draw x, you have to click x the first time, o the next time, how do you know if it’s x or O? We have to make this x variable, and it has to change depending on how many times the user clicks.

Vue component communication

How can these components know what to display? Let’s experiment with a box: listen for the click

And also inside the component to say, ‘I’ve been clicked.’

This is the listening event, write on: click outside and $emit(‘click’) inside the component.

Add tap monitor, and add a number n to each cell. Bind each cell to an N, and fetch the value of n in the cell component, so that each click of the component knows what its value is, so that the components can calculate whether to display x or O.

If bing is used to pass the value, the other party needs to use props to receive it.All v-on:click can be shortened to @click, and all v-bing can be shortened to :n=”n”

Let the value of text be determined by n

Here, if you use the computed property of vUE, computed, yes, you can click x and o next time, but it all changes at once. Because n changes and text changes, it doesn’t work.

computed:{
  text(){
    return this.n % 2 === 0 ? "x" :"o"
    }
 }
Copy the code

Instead, change the value of text to “, and the value of text should be determined when clicked

methods:{ onClickSelf(){ this.a=true this.text = this.n % 2 === 0 ? $emit('click')} "x" : "o" this.$emit('click')Copy the code

Every time you click on it, you compute it, and that’s how you do it: x down, o down.

To this part of the function is basically realized, but there are still bugs, a grid can be repeated click, repeated variable value. So we’re not done yet. Add a judgment, if there is already an X or o in the box will not accept the click.

if(this.text ! == ''){ return }Copy the code

Determine if the user has won

How do you tell if the user has won? You still need to add a number to each cell. The function is not executed immediately, but only after the user clicks

<div > <div class="row"> <Cell @click="onClickCell(0)" :n="n"/> <Cell @click="onClickCell(1)" :n="n"/> <Cell @click="onClickCell(2)" :n="n"/> </div> ....... </div> ........... Methods :{onClickCell(I){console.log(' ${I} 'is clicked) this.n+=1}}Copy the code

Try it out:

Ok, we also need to know is the box being clicked on x or O?

$emit('click',this.text) // let me know if I am x or OCopy the code

In the component, we need to emit the text value using $emit. At the same time, outside the corresponding place, use $event to receive the incoming text value.

<div class="row">
      <Cell @click="onClickCell(0,$event)" :n="n"/>
      <Cell @click="onClickCell(1,$event)" :n="n"/>
      <Cell @click="onClickCell(2,$event)" :n="n"/>
 </div>
  .....
  methods:{
    onClickCell(i,text){
      console.log(`${i}号被点击，内容是：${text}`)
      this.n+=1
    }
  }
  
Copy the code

Then we store it in an array, and knowing who clicked, we put the data in the map, and when clicked, the value of the map is changed to x or O. Then call tell to see if you win or lose.

data(){ return { n:0, map:[ [null,null,null], [null,null,null], [null,null,null], ] } }, Methods :{onClickCell(I,text){console.log(' ${I} ') ${text}`) this.map[Math.floor(i/3)][i%3] = text this.n+=1 this.tell() }, tell(){ const map = this.map for(let i=0; i<2; i++){ if(map[i][0] ! == null && map[i][0] === map[i][1] && map[i][1] === map[i][2]){ this.result = map[i][0] } } for(let j=0; j<2; j++){ if(map[0][j] ! == null && map[0][j] === map[1][j] && map[1][j] === map[2][j]){ this.result = map[0][j] } } if(map[0][0] ! == null && map[0][0] === map[1][1] && map[1][1] === map[2][2]){ this.result = map[0][0] } if(map[0][2] ! == null && map[0][2] === map[1][1] && map[1][1] === map[2][0]){ this.result = map[0][2] } } }Copy the code

The loop iterates to determine whether the horizontal and vertical directions have the same value linked together, if true, the connected side wins.

If you want to see the source code, you can check it out: github.com/VHJFKDS/Tic…