vue2实现井字棋小游戏附代码

用写东西来学习是最好的效果

运用到了子组件传递数据给父组件，父组件在回调里用$event做为参数，在调用函数时接收并使用父组件传递数据给子组件，子组件用props接收用map定义了一个二维数组来接收点击时出现x和o值的位置并判断胜负逻辑

一.先静态简单九宫格样式先做出来

创建单个格子的组件名grid 宽高100px,点击后出现的字要水平垂直居中用grid布局两行代码搞定

引入grid组件并循环出九个grid 组件

外层包一层div 宽高300px,样式布局用flex自动换行，盒子模型要用标准模型边框才不会影响布局

二.开始实现交互

上面所说的循环引入九个grid组件已经是运用到了vue2了

在单个格子grid组件,也是唯一一个组件，做的比较简单

结构上包两层div外层div标签上给个点击事件，点击事件上绑定触发事件函数名里面放置点击是x还是o在data里定义一个xo初始值为空，在点击事件上改变xo值在data里定义一个isxo始控制XO值是隐藏显示

下面代码是grid子组件代码

<template>

<div>

<div class="gird" @click="num" >

<template v-if="isxo">{{xo}}</template>

</div>

</div>

</template>

<script>

export default {

name: 'Gird',

props:['n'],

data(){

return{

//点击出现的XO初始值

xo:' ',

//初始控制XO值是空隐藏

isxo:false,

}

},

methods:{

num(){

//如果已点击就不能再点击了

if (this.xo !== ' '){

return ;

}

//点击有值控制xo值显示

this.isxo = true;

//:n="n"是父组件给子组件传递n的值，让子组件n是单数xo值就变成X 是偶数就是o

this.n % 2 !==0 ? this.xo='O' : this.xo='X';

//给父组件传递数据

this.$emit('click',this.xo);

}

},

}

</script>

下面是父组件代码

<template>

<div class="grids" >

<div v-for="(id,index) in indexs" :key="id" >

<!--v-on:click="nam(index,$event)"

index是模版遍历出来的索引相当于给每个grid组件一个号码

$event是接收子组件的数组 xo值

:n="n"是给子组件传递n的值，让子组件n是单数xo值就变成X 是偶数就是o

-->

<Gridv-on:click="nam(index,$event)" :n="n"></Grid>

</div>

<div class="over" v-if="overs" >{{overs}}

</div>

</div >

</div>

</template>

<script>

import Gridfrom "./components/row"

export default {

name: 'App',

components:{Grid},

data(){

return{

//结束弹出框文字

overs:null,

//记录点击次数初始值

n:0,

//为了给子组件遍历用的，刚好是九个做个九宫格

indexs:[1,2,3,4,5,6,7,8,9],

//下了什么棋就给对应的位置里放对应的xo值 初始值

map:[[null,null,null],[null,null,null],[null,null,null]]

}

},

methods:{

//点击一次就执行一次这里面的代码

nam(i,xo){

//点击一次就加一

this.n++

//下了什么棋就给对应的位置里放对应map数组的xo值

this.map[Math.floor(i/3)][i%3]=xo

//判断胜利

for (let i=0;i<3; i++){

if(

this.map[i][0] !== null && this.map[i][0] === this.map[i][1] && this.map[i][1] === this.map[i][2]){

this.overs=`${this.map[i][0]}赢了`

}else if(

this.map[0][i] !== null && this.map[0][i] === this.map[1][i] && this.map[1][i] === this.map[2][i]

){

this.overs=`${this.map[0][i]}赢了`

}else if(

this.map[0][0] !== null && this.map[0][0] === this.map[1][1] && this.map[1][1] === this.map[2][2]

){

this.overs=`${this.map[0][0]}赢了`

}else if(

this.map[0][2] !== null && this.map[0][2] === this.map[1][1] && this.map[1][1] === this.map[2][0]

){

this.overs=`${this.map[i][0]}赢了`

}

}

}

},