看看使用uni-app如何编写一个五子棋小游戏（附游戏代码）

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

一、游戏效果图

二、游戏说明

1. 布局：玩家、棋盘、规则、按钮
2. 游戏：玩家落子，电脑根据玩家或者自身的棋子，来进行堵截或成型
3. 设计：电脑利用 权重 来判断哪个点的分值最高
4. 游戏是用 uniapp + uview 写的，里面一些样式，有的我自己定义的全局的，有的是uview内置的，可自行解决

三、游戏代码

(1) 布局

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

(2) 样式

<style> page{background-color: #F3F2F7;} </style> <style scoped> // #F7E7B6 棋盘背景  #C0A47C 网格条纹 .goBang{padding: 30rpx;} .goBang-chess{width: 50rpx;height: 50rpx; border-radius: 50%;box-shadow: 0 0 8rpx 4rpx rgba(0,0,0,.2);} .goBang-board{ width: 100%;height: 690rpx;background-color: #f7e7b6;border-radius: 10rpx;border: 2rpx solid rgba(0,0,0,.05);box-shadow: 0 0 6rpx 2rpx rgba(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: 2rpx solid #C0A47C;border-left: 2rpx solid #C0A47C;display: flex;flex-direction: column; .goBang-grid-tr{width: 100%;display: flex;flex: 1;} .goBang-grid-td{flex: 1;border-right: 2rpx solid #C0A47C;border-bottom: 2rpx solid #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: 0 2rpx 10rpx 0rpx rgba(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: 0 0 10rpx 4rpx rgba(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> 	export default { 		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 = true 					uni.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(let k = 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(){ 				// 电脑落子 利用算法————权重值 				// 判断哪一点的值最高，也就是对电脑的利益最大 				// 每下一步，就会判断某点对于玩家利益大还是自身利益大，来进行围堵和进攻 				const playerScore = [];  	// 对于玩家而言，每一个空点的数值集合 				const computerScore = [];	// 对于电脑而言，每一个空点的数值集合 				let maxScore = 0;			// 最大值 				let x = 0, y = 0;			// 最后决定电脑落子的位置 				 				// 初始化玩家和电脑每个点的数值 				for(let i = 0; i < 15; i++){ 					playerScore[i] = []; 					computerScore[i] = []; 					for(let j = 0; j < 15; j++){ 						playerScore[i][j] = 0; 						computerScore[i][j] = 0; 					} 				} 				// 开始遍历棋盘（查看当前棋盘中所有空点） 				for(let i = 0; i < 15; i++){ 					for(let j = 0; j < 15; j++){ 						if(this.chessBoard[i][j] == 0){		// 此点可落子 							 							// 遍历所有赢法 给玩家和电脑的每个空点 打分 分值最高的点则是电脑落子点 							for(let k = 0; k < this.allCount; k++){		 								if(this.allWins[i][j][k] == true){		// 判断当前点的赢法中有没有玩家或者电脑的棋子 									 									// 如果有玩家的棋子 									if(this.playerWins[k] === 1){		// 赢法中包含一个玩家棋子... 										playerScore[i][j] += 100; 									}else if(this.playerWins[k] === 2){ 										playerScore[i][j] += 400; 									}else if(this.playerWins[k] === 3){ 										playerScore[i][j] += 800; 									}else if(this.playerWins[k] === 4){ 										playerScore[i][j] += 2000; 									} 									// 如果有电脑的棋子 									// 相同棋子数时，电脑的权重值要比玩家的高，首先考虑自己； 									// 但是当玩家达到三颗时，自身如果没有机会，则玩家权重值大 									if(this.computerWins[k] === 1){		// 赢法中包含一个电脑棋子... 										computerScore[i][j] += 150; 									}else if(this.computerWins[k] === 2){ 										computerScore[i][j] += 450; 									}else if(this.computerWins[k] === 3){ 										computerScore[i][j] += 950; 									}else if(this.computerWins[k] === 4){ 										computerScore[i][j] += 10000; 									} 									 								} 							} 							 							// 比较玩家和电脑在某点的分值 							// 玩家 							if(playerScore[i][j] > maxScore){ 								maxScore = playerScore[i][j]; 								x = i; 								y = j; 							}else if(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; 							}else if(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(let k = 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(let i = 0; i < 15; i++){ 					this.chessBoard[i] = []; 					for(let j = 0; j < 15; j++){ 						this.chessBoard[i][j] = 0; 					} 				} 				// 初始化所有赢法的数组 				for(let i = 0; i < 15; i++){ 					this.allWins[i] = []; 					for(let j = 0; j < 15; j++){ 						this.allWins[i][j] = []; 					} 				} 				// 横向赢法 				for(let i = 0; i < 15; i++){ 					for(let j = 0; j < 11; j++){ 						for(let k = 0; k < 5; k++){ 							this.allWins[i][j+k][this.allCount] = true; 						} 						this.allCount++; 					} 				} 				// 竖向赢法 				for(let i = 0; i < 11; i++){ 					for(let j = 0; j < 15; j++){ 						for(let k = 0; k < 5; k++){ 							this.allWins[i+k][j][this.allCount] = true; 						} 						this.allCount++; 					} 				} 				// 斜向（左上 -> 右下） 				for(let i = 0; i < 11; i++){ 					for(let j = 0; j < 11; j++){ 						for(let k = 0; k < 5; k++){ 							this.allWins[i+k][j+k][this.allCount] = true; 						} 						this.allCount++; 					} 				} 				// 斜向（右上 -> 左下） 				for(let i = 0; i < 11; i++){ 					for(let j = 14; j > 3; j--){ 						for(let k = 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(let i = 0; i < this.allCount; i++){ 					this.playerWins[i] = 0; 					this.computerWins[i] = 0; 				} 			}, 		} 	} </script>

推荐：《uniapp教程》