简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
ホームページ > ウェブフロントエンド > uni-app > 本文

uni-app を使用してバックギャモン ゲームを作成する方法をご覧ください (ゲーム コード付き)

青灯夜游
リリース： 2021-12-30 19:27:52
転載
8152 人が閲覧しました

uni-app を使用してバックギャモン ゲームを作成するにはどうすればよいですか?次の記事では、uni-app を使用して作成されたバックギャモン ゲームを紹介します。

uni-app を使用してバックギャモン ゲームを作成する方法をご覧ください (ゲーム コード付き)

#1. ゲームのレンダリング

uni-app を使用してバックギャモン ゲームを作成する方法をご覧ください (ゲーム コード付き)

# #2. ゲームの説明

レイアウト: プレーヤー、ボード、ルール、ボタン
  1. ゲーム: プレーヤーの配置、コンピューターはプレーヤーに従って動きますまたは、チェスの駒自体を切り取ったり形を整えたりします。
  2. デザイン: コンピューターは
    3. weight
  3. を使用して、どのポイントが最も高いスコアを持つかを決定します。ゲームは uniapp uview を使用して書かれています。スタイル 、いくつかは私が定義したグローバルなもの、そしていくつかは uview に組み込まれており、自分で解決できます

3. ゲーム コード

(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: &#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 = true
					uni.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>
ログイン後にコピー

推奨: 「

uniapp チュートリアル」 "

以上がuni-app を使用してバックギャモン ゲームを作成する方法をご覧ください (ゲーム コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
uni-app
ソース：juejin.cn
前の記事：uniappでライブブロードキャストバイパスプッシュを実装する方法（ステップ共有） 次の記事：UniApp 複雑なシナリオ向けのテーブル コンポーネントの実用的な開発
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
npx create-react-app コマンドでエラーが発生しました。どうすれば修正できますか? 「npxcreate-react-app」コマンドを使用して新しい React アプリを作成しようとしていますが、うまく機能していないようです。最近この問題に遭遇した人は他にもいま...
から 2024-04-05 14:42:18
0
1
3511
React では、localstorage.getItem は null を返します Index.js：importReactfrom'react';importReactDOMfrom'react-dom/client';import'./index.css';i...
から 2024-04-05 14:18:19
0
1
1523
React Router のネストされたルーティングと検索パラメーターの使用 ネストされた React ルートで検索パラメーターを使用する場合、/app 上で、/app/user に移動するリンクをクリックした後、ナビゲーションが機能しません。ネストせずに試...
から 2024-04-05 13:48:33
0
1
1475
Vue 2.7 に Vuex 3 を追加するにはどうすればよいですか? yarncretenuxt-app を実行すると、package.json に次のように表示されます: "dependency":{"nuxt&quo...
から 2024-04-05 13:49:24
0
1
1382
vite を使用して React アプリケーションを構築するときに発生する Axios 関連のエラー Axios は運用環境では完全に動作しますが、アプリケーションをビルドするとこのエラーが発生します。 >react-app@0.0.0build>vitebuildvi...
から 2024-04-05 13:20:02
0
1
326
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！