基于VueJs实现的井字棋小游戏
程序员文章站
2022-04-07 19:16:43
...
这几天在温习VueJs 简单写了一个井字棋小游戏 分享下思路 目前只是实现了基本的逻辑判断，还未进行服务器等等的编写 后期有时间再加
首先，我们的井字棋，主要就是要判断每一次落子的时候该颜色的棋子对应的行、列、斜向下、斜向上几个方向有无三个同色的棋子 有则胜利
游戏的基本html如下：
加上css后界面效果如下图（看起来比较简陋哈，毕竟长得好看只是一时半会的事，能用才是一辈子的事情吗哈哈）：
以下是预习的主要方法(落子)：
在这里我用的是二维数组来控制，点击元素 当turn等于1的时候将chess数组对应的行列变为1，进而通过属性绑定的方法直接更改cell的value属性 ，当turn等于2时 反之将数组改为-1
然后就可以直接通过css的属性选择器直接给样式
下面是落子后的视觉效果（还是只停留在能实现功能的基础上 美观什么的不重要嘿嘿）
接着就是胜利条件的判断了，因为前面每一次点击的时候都已经将chess数组对应白棋变为1 黑棋变为-1 所以这里只需要判断当前点击位置所在的行列 斜向上、斜向下几个数组元素相加的值 当满足这几个值相加等于3或-3也就对应的判断出了白子或者黑子占据了整行货整列列 从而实现游戏胜利条件的编写
rule(){
for(var i=0;i<3;i++){
for(var j=0;j<3;j++){
//打横
if(this.chess[i][0]+this.chess[i][1]+this.chess[i][2]==3){
this.gameOver();
return false;
}else if(this.chess[i][0]+this.chess[i][1]+this.chess[i][2]==-3){
this.gameOver();
return false;
}
//打竖
else if(this.chess[0][j]+this.chess[1][j]+this.chess[2][j]==3){
this.gameOver();
return false;
}else if(this.chess[0][j]+this.chess[1][j]+this.chess[2][j]==-3){
this.gameOver();
return false;
}
//斜向下
else if(this.chess[0][0]+this.chess[1][1]+this.chess[2][2]==3){
this.gameOver();
return false;
}else if(this.chess[0][0]+this.chess[1][1]+this.chess[2][2]==-3){
this.gameOver();
return false;
}
//斜向上
else if(this.chess[2][0]+this.chess[1][1]+this.chess[0][2]==3){
this.gameOver();
return false;
}else if(this.chess[2][0]+this.chess[1][1]+this.chess[0][2]==-3){
this.gameOver();
return false;
}
}
}
},
最后附上完整的代码，顺便求一下人机互动AI的思路
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>井字棋</title>
<style>
.content{
position: relative;
margin: 0 auto;
width:600px;
height: 600px;
box-sizing: border-box;
}
.cell{
position: relative;
float: left;
width: 200px;
height: 200px;
box-sizing: border-box;
border:1px solid red;
}
.cell[value="1"] .chess{
position: absolute;
width: 180px;
height:180px;
top: 50%;
left: 50%;
margin: -90px 0 0 -90px;
border-radius: 50%;
background:lightgray;
}
.cell[value="-1"] .chess{
position: absolute;
width: 180px;
height:180px;
top: 50%;
left: 50%;
margin: -90px 0 0 -90px;
background:black;
border-radius: 50%;
}
.mask{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index:999;
background:white;
}
.gameResult{
position: absolute;
bottom: 60%;
left: 50%;
width: 400px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 0 0 0 -200px;
}
.gameStart{
position: absolute;
top: 40%;
left: 50%;
width: 200px;
height: 50px;
line-height: 50px;
text-align: center;
margin: 0 0 0 -100px;
}
</style>
</head>
<body>
<div id="main">
<!--遮罩层-->
<div class="mask" v-if="maskshow">
<div class="gameResult" v-if="resultshow">游戏结束,{{turn==2?"白":"黑"}}方胜</div>
<div class="gameStart"><button @click="gameStart()">{{masktips}}</button></div>
</div>
<!--主代码-->
<div class="content">
<div class="cell" :value="chess[0][0]" @click="active(0,0)"><div class="chess"></div></div>
<div class="cell" :value="chess[0][1]" @click="active(0,1)"><div class="chess"></div></div>
<div class="cell" :value="chess[0][2]" @click="active(0,2)"><div class="chess"></div></div>
<div class="cell" :value="chess[1][0]" @click="active(1,0)"><div class="chess"></div></div>
<div class="cell" :value="chess[1][1]" @click="active(1,1)"><div class="chess"></div></div>
<div class="cell" :value="chess[1][2]" @click="active(1,2)"><div class="chess"></div></div>
<div class="cell" :value="chess[2][0]" @click="active(2,0)"><div class="chess"></div></div>
<div class="cell" :value="chess[2][1]" @click="active(2,1)"><div class="chess"></div></div>
<div class="cell" :value="chess[2][2]" @click="active(2,2)"><div class="chess"></div></div>
</div>
</div>
</body>
<script src="js/vue-2.6.7.js"></script>
<script>
let vm = new Vue({
"el":"#main",
data:{
//遮罩文字显示情况
"maskshow":true,
//遮罩文字
"masktips":"游戏开始",
//结果信息显示情况
"resultshow":false,
//当前回合轮到谁
"turn:":1,
//棋子信息
"chess":[
[0,0,0],
[0,0,0],
[0,0,0]
]
},
methods:{
//点击开始，遮罩消失
gameStart(){this.maskshow=false},
//游戏结束，初始化游戏状态,并提示
gameOver(){
this.maskshow=true;
this.masktips="再来一局";
this.resultshow=true,
this.chess=[
[0,0,0],
[0,0,0],
[0,0,0]
]
},
//游戏规则判断
rule(){
for(var i=0;i<3;i++){
for(var j=0;j<3;j++){
//打横
if(this.chess[i][0]+this.chess[i][1]+this.chess[i][2]==3){
this.gameOver();
return false;
}else if(this.chess[i][0]+this.chess[i][1]+this.chess[i][2]==-3){
this.gameOver();
return false;
}
//打竖
else if(this.chess[0][j]+this.chess[1][j]+this.chess[2][j]==3){
this.gameOver();
return false;
}else if(this.chess[0][j]+this.chess[1][j]+this.chess[2][j]==-3){
this.gameOver();
return false;
}
//斜向下
else if(this.chess[0][0]+this.chess[1][1]+this.chess[2][2]==3){
this.gameOver();
return false;
}else if(this.chess[0][0]+this.chess[1][1]+this.chess[2][2]==-3){
this.gameOver();
return false;
}
//斜向上
else if(this.chess[2][0]+this.chess[1][1]+this.chess[0][2]==3){
this.gameOver();
return false;
}else if(this.chess[2][0]+this.chess[1][1]+this.chess[0][2]==-3){
this.gameOver();
return false;
}
}
}
},
//落子
active(x,y){
if(this.chess[x][y]!=0){
alert("此处已有子")
}else{
if(this.turn==1){
this.$set(this.chess[x],y,1)
this.rule();
this.turn=2;
}else{
this.$set(this.chess[x],y,-1)
this.rule();
this.turn=1;
}
}
}
}
})
</script>
</html>
PS：本文纯属本人原创，如有更优做法 欢迎指点 互相学习
上一篇： 二分查找写法
下一篇： 灰度处理之图片转字符串