コミュニティ
学ぶ
ツールライブラリ
AIツール
レジャー
検索
日本語
ホームページ ウェブフロントエンド uni-app uni-app を使用してバックギャモン ゲームを作成する方法をご覧ください (ゲーム コード付き)

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

青灯夜游
青灯夜游
Dec 30, 2021 pm 07:27 PM
uni-app

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 サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最高のグラフィック設定
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
アサシンのクリードシャドウズ：シーシェルリドルソリューション
2週間前 By DDD
R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.チャットコマンドとそれらの使用方法
4週間前 By 尊渡假赌尊渡假赌尊渡假赌
もっと見る

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7526
15
CakePHP チュートリアル
1378
52
Steamのアカウント名の形式は何ですか
81
11
Win11 Activation Key Permanent
54
19
NYTの接続はヒントと回答です
21
74
もっと見る
Related knowledge
VSCode でユニアプリを開発するにはどうすればよいですか? (チュートリアルの共有) VSCode でユニアプリを開発するにはどうすればよいですか? (チュートリアルの共有) May 13, 2022 pm 08:11 PM

VSCode でユニアプリを開発するにはどうすればよいですか?次の記事では、VSCode でのユニアプリ開発に関するチュートリアルを紹介します。これは、おそらく最も詳細なチュートリアルです。ぜひ見に来てください！

uniapp を使用してシンプルなマップ ナビゲーションを開発する uniapp を使用してシンプルなマップ ナビゲーションを開発する Jun 09, 2022 pm 07:46 PM

uniapp を使用してシンプルなマップ ナビゲーションを開発するにはどうすればよいですか?この記事では簡単な地図の作り方を紹介しますので、ぜひ参考にしてください。

uniapp を使用してスネーク ゲームを開発する方法について話しましょう。 uniapp を使用してスネーク ゲームを開発する方法について話しましょう。 May 20, 2022 pm 07:56 PM

uniapp を使用してスネーク ゲームを開発するにはどうすればよいですか?次の記事では、Uniapp に Snake ゲームを実装する手順を段階的に説明します。お役に立てば幸いです。

uni-app vue3 インターフェイスリクエストをカプセル化する方法 uni-app vue3 インターフェイスリクエストをカプセル化する方法 May 11, 2023 pm 07:28 PM

uni-app インターフェイス、グローバル メソッドのカプセル化 1. ルート ディレクトリに API ファイルを作成し、API フォルダーに api.js、baseUrl.js、および http.js ファイルを作成します。 2.baseUrl.js ファイル コード exportdefault"https://XXXX .test03.qcw800.com/api/"3.http.js ファイル コードexportfunctionhttps(opts,data){lethttpDefaultOpts={url:opts.url,data:data,method:opts.method

uniapp が複数選択ボックスの全選択機能を実装する方法を説明する例 uniapp が複数選択ボックスの全選択機能を実装する方法を説明する例 Jun 22, 2022 am 11:57 AM

この記事では、uniapp に関する関連知識を提供します。主に、複数選択ボックスの全選択機能の実装に関する問題を整理します。全選択機能が実装できない理由は、チェックボックスのチェックされたフィールドがオンになっている場合です。動的に変更されると、インターフェイス上のステータスはリアルタイムに変更されますが、checkbox-group の変更イベントはトリガーされません。

ユニアプリ カレンダー プラグインを開発 (および公開) する手順を段階的に説明します。 ユニアプリ カレンダー プラグインを開発 (および公開) する手順を段階的に説明します。 Jun 30, 2022 pm 08:13 PM

この記事では、ユニアプリ カレンダー プラグインの開発をステップごとに説明し、次期カレンダー プラグインの開発からリリースまでの手順を紹介します。

uniapp のスクロールビュー ドロップダウンの読み込みについて話しましょう uniapp のスクロールビュー ドロップダウンの読み込みについて話しましょう Jul 14, 2022 pm 09:07 PM

uniapp はスクロールビューのドロップダウン読み込みをどのように実装しますか?次の記事では、uniapp WeChat アプレットのスクロールビューのドロップダウン読み込みについて説明しています。

uniapp が電話録音機能を実装する方法の詳細な例 (コード付き) uniapp が電話録音機能を実装する方法の詳細な例 (コード付き) Jan 05, 2023 pm 04:41 PM

この記事では、uniapp に関する関連知識を皆さんに提供します。主に uniapp を使用して電話をかける方法と同期録音する方法を紹介します。興味のある友人はぜひご覧ください。皆様のお役に立てれば幸いです。

See all articles