看看使用uni-app如何编写一个五子棋小游戏

使用uni-app如何编写一个五子棋小游戏？下面本篇文章给大家分享一个使用uni-app编写的五子棋小游戏，希望对大家有所帮助！

一、游戏效果图

二、游戏说明

布局：玩家、棋盘、规则、按钮

游戏：玩家落子，电脑根据玩家或者自身的棋子，来进行堵截或成型

设计：电脑利用权重来判断哪个点的分值最高

游戏是用 uniapp + uview 写的，里面一些样式，有的我自己定义的全局的，有的是uview内置的，可自行解决

三、游戏代码

(1) 布局

<template><viewclass="goBangu-border-top"><!--对战信息--><viewclass="goBang-userflexItems"><viewclass="flexCenterflexColumnflex1box"><u-iconclass="goBang-chess"name="/static/image/gobang/black.png"size="50"></u-icon><viewclass="u-m-t-20fontBoldc757575">电脑</view></view><viewclass="fontBoldcmainu-font-40">VS</view><viewclass="flexCenterflexColumnflex1box"><u-iconclass="goBang-chess"name="/static/image/gobang/white.png"size="50"></u-icon><viewclass="u-m-t-20fontBoldc757575">玩家</view></view></view><viewclass="goBang-containerboxtb"><!--棋盘底座--><viewclass="goBang-boardu-rela"><!--棋盘网格--><viewclass="goBang-grid-boxu-rela"><viewclass="goBang-grid"><viewclass="goBang-grid-tr"v-for="(item,index)in14":key="index"><viewclass="goBang-grid-td"v-for="(item,index)in14":key="index"></view></view></view><viewclass="point-c"></view><viewclass="point-1"></view><viewclass="point-2"></view><viewclass="point-3"></view><viewclass="point-4"></view></view><!--隐藏的棋盘网格用于下棋子用的--><viewclass="goBang-check"><viewclass="goBang-check-tr"v-for="(item1,index1)inchessBoard":key="index1"><viewclass="goBang-check-td"v-for="(item2,index2)initem1":key="index2"@click="playerChess(index1,index2)"><imageclass="goBang-check-chess":src="player[item2]"v-if="item2!=0"></image></view></view></view></view><!--规则说明--><viewclass="boxtb"><viewclass="u-m-t-10fontBoldu-font-32c757575">规则说明:</view><viewclass="u-m-t-20c757575">1、玩家先手</view><viewclass="u-m-t-10c757575">2、其他规则，不知道就百度去，惯得！！！</view></view></view><!--功能按钮--><viewclass="goBang-btns"><viewclass="goBang-btn"@click="regret"v-if="!isOver"><u-iconname="thumb-down-fill"size="30"color="#999"></u-icon><text>悔棋</text></view><viewclass="goBang-btn"@click="restart"><u-iconname="reload"size="30"color="#999"></u-icon><text>重来</text></view><viewclass="goBang-btn"@click="defeat"v-if="!isOver"><u-iconname="fingerprint"size="30"color="#999"></u-icon><text>认输</text></view></view></view></template>

(2) 样式

<style>page{background-color:#F3F2F7;}</style><style>/*#F7E7B6棋盘背景#C0A47C网格条纹*/.goBang{padding:30rpx;}.goBang-chess{width:50rpx;height:50rpx;border-radius:50%;box-shadow:008rpx4rpxrgba(0,0,0,.2);}.goBang-board{width:100%;height:690rpx;background-color:#f7e7b6;border-radius:10rpx;border:2rpxsolidrgba(0,0,0,.05);box-shadow:006rpx2rpxrgba(0,0,0,.1);padding:20rpx;}.goBang-grid-box{width:100%;height:100%;}.point-c{position:absolute;width:14rpx;height:14rpx;border-radius:50%;background-color:#C0A47C;top:50%;left:50%;transform:translate(-50%,-50%);}.point-1{position:absolute;width:14rpx;height:14rpx;border-radius:50%;background-color:#C0A47C;top:21.5%;left:21.5%;transform:translate(-50%,-50%);}.point-2{position:absolute;width:14rpx;height:14rpx;border-radius:50%;background-color:#C0A47C;top:21.5%;right:21.5%;transform:translate(50%,-50%);}.point-3{position:absolute;width:14rpx;height:14rpx;border-radius:50%;background-color:#C0A47C;bottom:21.5%;right:21.5%;transform:translate(50%,50%);}.point-4{position:absolute;width:14rpx;height:14rpx;border-radius:50%;background-color:#C0A47C;bottom:21.5%;left:21.5%;transform:translate(-50%,50%);}.goBang-grid{width:100%;height:100%;border-top:2rpxsolid#C0A47C;border-left:2rpxsolid#C0A47C;display:flex;flex-direction:column;}.goBang-grid-tr{width:100%;display:flex;flex:1;}.goBang-grid-td{flex:1;border-right:2rpxsolid#C0A47C;border-bottom:2rpxsolid#C0A47C;}.goBang-check{display:flex;flex-direction:column;position:absolute;width:100%;height:100%;top:0;right:0;left:0;bottom:0;z-index:1;border-radius:10rpx;}.goBang-check-tr{width:100%;display:flex;flex:1;}.goBang-check-td{flex:1;display:flex;align-items:center;justify-content:center;}.goBang-check-chess{width:38rpx;height:38rpx;border-radius:50%;box-shadow:02rpx10rpx0rpxrgba(0,0,0,.5);}}.goBang-btns{display:flex;align-items:center;justify-content:center;position:fixed;bottom:30rpx;right:0;left:0;padding:30rpx;}.goBang-btn{width:90rpx;height:90rpx;border-radius:50%;background-color:#fff;box-shadow:0010rpx4rpxrgba(0,0,0,.1);display:flex;align-items:center;justify-content:center;flex-direction:column;margin-left:30rpx;color:#999;font-size:24rpx;}</style>

(3) 逻辑

<script>exportdefault{data(){return{player:{//0=没有子1=电脑2=玩家0:null,1:'/static/image/gobang/black.png',2:'/static/image/gobang/white.png'},chessBoard:[],//棋盘数组isWho:true,//该谁下isOver:false,//游戏是否结束allWins:[],//全部赢法的数组allCount:0,//一共有多少种赢法playerWins:[],//玩家赢法的数组computerWins:[],//电脑赢法的数组};},onLoad(){this.chess_init();uni.showToast({title:"欢迎来到五子棋~",icon:'none'});},methods:{//悔棋regret(){uni.showToast({title:"世上没有后悔药~",icon:'none'});},//重来restart(){uni.showToast({title:"欢迎来到五子棋~",icon:'none'});this.chessBoard=[];this.isOver=false;this.isWho=true;this.chess_init();},//认输defeat(){if(this.isOver){uni.showToast({title:"游戏已结束，可以重新开始了",icon:'none'});}else{this.isOver=trueuni.showToast({title:"就这？就这？就这？回家喂猪吧!",icon:'none'});}},//玩家落子playerChess(x,y){//当此点有棋子或者游戏结束或者不论到你时，则不能落子if(this.chessBoard[x][y]!=0||!this.isWho||this.isOver){return;}//落子this.chessBoard[x][y]=2;this.$forceUpdate();//判断输赢setTimeout(()=>{for(letk=0;k<this.allCount;k++){if(this.allWins[x][y][k]==true){this.playerWins[k]++;this.computerWins[k]=6;if(this.playerWins[k]==5){this.isOver=true;uni.showToast({title:"玩家获胜!!!!"});}}}},50)//如果玩家没获胜则该电脑落子setTimeout(()=>{if(!this.isOver){this.isWho=!this.isWho;this.computerChess();}},100)},//电脑落子computerChess(){//电脑落子利用算法————权重值//判断哪一点的值最高，也就是对电脑的利益最大//每下一步，就会判断某点对于玩家利益大还是自身利益大，来进行围堵和进攻constplayerScore=[];//对于玩家而言，每一个空点的数值集合constcomputerScore=[];//对于电脑而言，每一个空点的数值集合letmaxScore=0;//最大值letx=0,y=0;//最后决定电脑落子的位置//初始化玩家和电脑每个点的数值for(leti=0;i<15;i++){playerScore[i]=[];computerScore[i]=[];for(letj=0;j<15;j++){playerScore[i][j]=0;computerScore[i][j]=0;}}//开始遍历棋盘（查看当前棋盘中所有空点）for(leti=0;i<15;i++){for(letj=0;j<15;j++){if(this.chessBoard[i][j]==0){//此点可落子//遍历所有赢法给玩家和电脑的每个空点打分分值最高的点则是电脑落子点for(letk=0;k<this.allCount;k++){if(this.allWins[i][j][k]==true){//判断当前点的赢法中有没有玩家或者电脑的棋子//如果有玩家的棋子if(this.playerWins[k]===1){//赢法中包含一个玩家棋子...playerScore[i][j]+=100;}elseif(this.playerWins[k]===2){playerScore[i][j]+=400;}elseif(this.playerWins[k]===3){playerScore[i][j]+=800;}elseif(this.playerWins[k]===4){playerScore[i][j]+=2000;}//如果有电脑的棋子//相同棋子数时，电脑的权重值要比玩家的高，首先考虑自己；//但是当玩家达到三颗时，自身如果没有机会，则玩家权重值大if(this.computerWins[k]===1){//赢法中包含一个电脑棋子...computerScore[i][j]+=150;}elseif(this.computerWins[k]===2){computerScore[i][j]+=450;}elseif(this.computerWins[k]===3){computerScore[i][j]+=950;}elseif(this.computerWins[k]===4){computerScore[i][j]+=10000;}}}//比较玩家和电脑在某点的分值//玩家if(playerScore[i][j]>maxScore){maxScore=playerScore[i][j];x=i;y=j;}elseif(playerScore[i][j]==maxScore){//如果玩家在当前点的分跟前一个相等，就再跟电脑自身在该点的值进行比较//如果电脑在当前点，比在上一个点的分大，说明电脑下这个点的优势更大，以此类推，推出所有点的结果if(computerScore[i][j]>computerScore[x][y]){maxScore=computerScore[i][j];x=i;y=j;}}//电脑if(computerScore[i][j]>maxScore){maxScore=computerScore[i][j];x=i;y=j;}elseif(computerScore[i][j]==maxScore){if(playerScore[i][j]>playerScore[x][y]){maxScore=playerScore[i][j];x=i;y=j;}}}}}//此时电脑就可以落子了this.chessBoard[x][y]=1;this.$forceUpdate();//判断电脑是否获胜setTimeout(()=>{for(letk=0;k<this.allCount;k++){if(this.allWins[x][y][k]==true){this.computerWins[k]++;this.playerWins[k]=6;if(this.computerWins[k]==5){this.isOver=true;uni.showToast({title:"电脑获胜！"});}}}},50)if(!this.isOver){this.isWho=!this.isWho;}},//初始化chess_init(){//棋盘for(leti=0;i<15;i++){this.chessBoard[i]=[];for(letj=0;j<15;j++){this.chessBoard[i][j]=0;}}//初始化所有赢法的数组for(leti=0;i<15;i++){this.allWins[i]=[];for(letj=0;j<15;j++){this.allWins[i][j]=[];}}//横向赢法for(leti=0;i<15;i++){for(letj=0;j<11;j++){for(letk=0;k<5;k++){this.allWins[i][j+k][this.allCount]=true;}this.allCount++;}}//竖向赢法for(leti=0;i<11;i++){for(letj=0;j<15;j++){for(letk=0;k<5;k++){this.allWins[i+k][j][this.allCount]=true;}this.allCount++;}}//斜向（左上->右下）for(leti=0;i<11;i++){for(letj=0;j<11;j++){for(letk=0;k<5;k++){this.allWins[i+k][j+k][this.allCount]=true;}this.allCount++;}}//斜向（右上->左下）for(leti=0;i<11;i++){for(letj=14;j>3;j--){for(letk=0;k<5;k++){this.allWins[i+k][j-k][this.allCount]=true;}this.allCount++;}}//console.log(this.allCount);//572种赢法//统计玩家与电脑的赢法数组//简单来说，玩家和电脑都有572种赢法，每种赢法初始值是0；//例如当玩家在第一种赢法中落一颗子，与之对应的赢法就+1，当前加到5的时候，说明第一种赢法中有了玩家五颗子，所以玩家赢。//反之，当第一种赢法中玩家落了四颗，但是电脑落了一颗，那么第一种赢法对应的玩家就+4，电脑+1，这样在第一种赢法里，玩家与电脑都不能获胜。//以此类推其他的赢法...for(leti=0;i<this.allCount;i++){this.playerWins[i]=0;this.computerWins[i]=0;}},}}</script>