使用uni-app如何編寫一個(gè)五子棋小游戲？下面本篇文章給大家分享一個(gè)使用uni-app編寫的五子棋小游戲，希望對(duì)大家有所幫助！

一、游戲效果圖

二、游戲說(shuō)明

1. 布局：玩家、棋盤、規(guī)則、按鈕
2. 游戲：玩家落子，電腦根據(jù)玩家或者自身的棋子，來(lái)進(jìn)行堵截或成型
3. 設(shè)計(jì)：電腦利用 權(quán)重 來(lái)判斷哪個(gè)點(diǎn)的分值最高
4. 游戲是用 uniapp + uview 寫的，里面一些樣式，有的我自己定義的全局的，有的是uview內(nèi)置的，可自行解決

三、游戲代碼

(1) 布局

<template> 	<view class="goBang u-border-top"> 		<!-- 對(duì)戰(zhàn)信息 --> 		<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"> 				<!-- 棋盤網(wǎng)格 --> 				<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> 				<!-- 隱藏的棋盤網(wǎng)格  用于下棋子用的 --> 				<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> 			<!-- 規(guī)則說(shuō)明 --> 			<view class="boxtb"> 				<view class="u-m-t-10 fontBold u-font-32 c757575">規(guī)則說(shuō)明:</view> 				<view class="u-m-t-20 c757575">1、玩家先手</view> 				<view class="u-m-t-10 c757575">2、其他規(guī)則，不知道就百度去，慣得?。?！</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>重來(lái)</text> 			</view> 			<view class="goBang-btn" @click="defeat" v-if="!isOver"> 				<u-icon name="fingerprint" size="30" color="#999"></u-icon> 				<text>認(rèn)輸</text> 			</view> 		</view> 	</view> </template>

(2) 樣式

<style> page{background-color: #F3F2F7;} </style> <style scoped> // #F7E7B6 棋盤背景  #C0A47C 網(wǎng)格條紋 .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=沒(méi)有子  1=電腦  2=玩家 					0: null,  					1: '/static/image/gobang/black.png',  					2: '/static/image/gobang/white.png' 				},  				chessBoard: [],  	// 棋盤數(shù)組 				isWho: true,  		// 該誰(shuí)下 				isOver: false,		// 游戲是否結(jié)束 				allWins: [], 		// 全部贏法的數(shù)組 				allCount: 0,		// 一共有多少種贏法 				playerWins: [],		// 玩家贏法的數(shù)組 				computerWins: [],	// 電腦贏法的數(shù)組 			}; 		}, 		onLoad() { 			this.chess_init(); 			uni.showToast({title: "歡迎來(lái)到五子棋~", icon:'none'}); 		}, 		methods:{ 			// 悔棋 			regret(){ 				uni.showToast({title: "世上沒(méi)有后悔藥~", icon:'none'}); 			}, 			// 重來(lái) 			restart(){ 				uni.showToast({title: "歡迎來(lái)到五子棋~", icon:'none'}); 				this.chessBoard = []; 				this.isOver = false; 				this.isWho = true; 				this.chess_init(); 			}, 			// 認(rèn)輸 			defeat(){ 				if(this.isOver){ 					uni.showToast({title: "游戲已結(jié)束，可以重新開(kāi)始了", icon:'none'}); 				}else{ 					this.isOver = true 					uni.showToast({title: "就這？就這？就這？回家喂豬吧!", icon:'none'}); 				} 			}, 			// 玩家落子 			playerChess(x, y){ 				// 當(dāng)此點(diǎn)有棋子 或者 游戲結(jié)束 或者 不論到你時(shí)，則不能落子 				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) 				// 如果玩家沒(méi)獲勝 則該電腦落子 				setTimeout(()=>{ 					if(!this.isOver){			 						this.isWho = !this.isWho; 						this.computerChess(); 					} 				},100) 			}, 			// 電腦落子 			computerChess(){ 				// 電腦落子 利用算法————權(quán)重值 				// 判斷哪一點(diǎn)的值最高，也就是對(duì)電腦的利益最大 				// 每下一步，就會(huì)判斷某點(diǎn)對(duì)于玩家利益大還是自身利益大，來(lái)進(jìn)行圍堵和進(jìn)攻 				const playerScore = [];  	// 對(duì)于玩家而言，每一個(gè)空點(diǎn)的數(shù)值集合 				const computerScore = [];	// 對(duì)于電腦而言，每一個(gè)空點(diǎn)的數(shù)值集合 				let maxScore = 0;			// 最大值 				let x = 0, y = 0;			// 最后決定電腦落子的位置 				 				// 初始化玩家和電腦每個(gè)點(diǎn)的數(shù)值 				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; 					} 				} 				// 開(kāi)始遍歷棋盤（查看當(dāng)前棋盤中所有空點(diǎn)） 				for(let i = 0; i < 15; i++){ 					for(let j = 0; j < 15; j++){ 						if(this.chessBoard[i][j] == 0){		// 此點(diǎn)可落子 							 							// 遍歷所有贏法 給玩家和電腦的每個(gè)空點(diǎn) 打分 分值最高的點(diǎn)則是電腦落子點(diǎn) 							for(let k = 0; k < this.allCount; k++){		 								if(this.allWins[i][j][k] == true){		// 判斷當(dāng)前點(diǎn)的贏法中有沒(méi)有玩家或者電腦的棋子 									 									// 如果有玩家的棋子 									if(this.playerWins[k] === 1){		// 贏法中包含一個(gè)玩家棋子... 										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; 									} 									// 如果有電腦的棋子 									// 相同棋子數(shù)時(shí)，電腦的權(quán)重值要比玩家的高，首先考慮自己； 									// 但是當(dāng)玩家達(dá)到三顆時(shí)，自身如果沒(méi)有機(jī)會(huì)，則玩家權(quán)重值大 									if(this.computerWins[k] === 1){		// 贏法中包含一個(gè)電腦棋子... 										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; 									} 									 								} 							} 							 							// 比較玩家和電腦在某點(diǎn)的分值 							// 玩家 							if(playerScore[i][j] > maxScore){ 								maxScore = playerScore[i][j]; 								x = i; 								y = j; 							}else if(playerScore[i][j] == maxScore){		 								// 如果玩家在當(dāng)前點(diǎn)的分跟前一個(gè)相等，就再跟電腦自身在該點(diǎn)的值進(jìn)行比較 								// 如果電腦在當(dāng)前點(diǎn)，比在上一個(gè)點(diǎn)的分大，說(shuō)明電腦下這個(gè)點(diǎn)的優(yōu)勢(shì)更大， 以此類推，推出所有點(diǎn)的結(jié)果 								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; 								} 							} 							 						} 					} 				} 				 				// 此時(shí)電腦就可以落子了 				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; 					} 				} 				// 初始化所有贏法的數(shù)組 				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種贏法 				 				// 統(tǒng)計(jì)玩家與電腦的贏法數(shù)組 				// 簡(jiǎn)單來(lái)說(shuō)，玩家和電腦都有572種贏法，每種贏法初始值是0； 				// 例如當(dāng)玩家在第一種贏法中落一顆子，與之對(duì)應(yīng)的贏法就+1，當(dāng)前加到5的時(shí)候，說(shuō)明第一種贏法中有了玩家五顆子，所以玩家贏。 				// 反之，當(dāng)?shù)谝环N贏法中玩家落了四顆，但是電腦落了一顆，那么第一種贏法對(duì)應(yīng)的玩家就+4，電腦+1，這樣在第一種贏法里，玩家與電腦都不能獲勝。 				// 以此類推其他的贏法... 				for(let i = 0; i < this.allCount; i++){ 					this.playerWins[i] = 0; 					this.computerWins[i] = 0; 				} 			}, 		} 	} </script>

推薦：《uniapp教程》