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

<template><view><!-- 对战信息 --><view><view><u-icon></u-icon><view>电脑</view></view><view>VS</view><view><u-icon></u-icon><view>玩家</view></view></view><view><!-- 棋盘底座 --><view><!-- 棋盘网格 --><view><view><view><view></view></view></view><view></view><view></view><view></view><view></view><view></view></view><!-- 隐藏的棋盘网格  用于下棋子用的 --><view><view><view><image></image></view></view></view></view><!-- 规则说明 --><view><view>规则说明:</view><view>1、玩家先手</view><view>2、其他规则，不知道就百度去，惯得！！！</view></view></view><!-- 功能按钮 --><view><view><u-icon></u-icon><text>悔棋</text></view><view><u-icon></u-icon><text>重来</text></view><view><u-icon></u-icon><text>认输</text></view></view></view></template>

<style>page{background-color: #F3F2F7;}</style><style>// #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>

<script>export default {	data() {		return {			player: {	// 0=没有子  1=电脑  2=玩家0: null, 1: &#39;/static/image/gobang/black.png&#39;, 2: &#39;/static/image/gobang/white.png&#39;			}, 			chessBoard: [],  	// 棋盘数组			isWho: true,  		// 该谁下			isOver: false,		// 游戏是否结束			allWins: [], 		// 全部赢法的数组			allCount: 0,		// 一共有多少种赢法			playerWins: [],		// 玩家赢法的数组			computerWins: [],	// 电脑赢法的数组		};	},	onLoad() {		this.chess_init();		uni.showToast({title: "欢迎来到五子棋~", icon:&#39;none&#39;});	},	methods:{		// 悔棋		regret(){			uni.showToast({title: "世上没有后悔药~", icon:&#39;none&#39;});		},		// 重来		restart(){			uni.showToast({title: "欢迎来到五子棋~", icon:&#39;none&#39;});			this.chessBoard = [];			this.isOver = false;			this.isWho = true;			this.chess_init();		},		// 认输		defeat(){			if(this.isOver){uni.showToast({title: "游戏已结束，可以重新开始了", icon:&#39;none&#39;});			}else{this.isOver = trueuni.showToast({title: "就这？就这？就这？回家喂猪吧!", icon:&#39;none&#39;});			}		},		// 玩家落子		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>