Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > uni-app > Sehen Sie, wie Sie mit Uni-App ein Backgammon-Spiel schreiben (mit Spielcode)

Sehen Sie, wie Sie mit Uni-App ein Backgammon-Spiel schreiben (mit Spielcode)

青灯夜游
Freigeben： 2021-12-30 19:27:52
nach vorne
8213 Leute haben es durchsucht

Wie programmiert man ein Backgammon-Minispiel mit der Uni-App? Der folgende Artikel stellt Ihnen ein Backgammon-Spiel vor, das mit der Uni-App geschrieben wurde. Ich hoffe, es wird Ihnen hilfreich sein! 1. Spieldarstellungen Spielerbewegungen, Computer basierend auf Spieler Oder Ihre eigenen Schachfiguren zum Schneiden oder Formen

Design: Der Computer verwendet Sehen Sie, wie Sie mit Uni-App ein Backgammon-Spiel schreiben (mit Spielcode)Gewichte

, um zu bestimmen, welcher Punkt die höchste Punktzahl hat

Das Spiel wird mit uniapp + uview geschrieben. Einige der darin enthaltenen Stile sind global und andere sind definiert von mir selbst. , einige sind in uview integriert und können selbst gelöst werden

Sehen Sie, wie Sie mit Uni-App ein Backgammon-Spiel schreiben (mit Spielcode)3 Spielcode

(1) Layout

<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>
Nach dem Login kopieren
(2) Stil

<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>
Nach dem Login kopieren
(3) Logik
    <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>
    Nach dem Login kopieren
  1. Empfohlen: „
    2. uniapp-Tutorial
  2. 》

    3. Das obige ist der detaillierte Inhalt vonSehen Sie, wie Sie mit Uni-App ein Backgammon-Spiel schreiben (mit Spielcode). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
uni-app
Quelle：juejin.cn
Vorheriger Artikel：So implementieren Sie Live-Broadcast-Bypass-Push in Uniapp (Schrittfreigabe) Nächster Artikel：UniApp Praktische Entwicklung einer Tabellenkomponente für komplexe Szenarien
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Beim Befehl „npx create-react-app' ist ein Fehler aufgetreten. Wie kann ich ihn beheben? Ich habe versucht, mit dem Befehl „npxcreate-react-app“ eine neue React-App zu erstellen, ...
Aus 2024-04-05 14:42:18
0
1
3511
In React gibt localstorage.getItem null zurück index.js：importReactfrom'react';importReactDOMfrom'react-dom/client';import'./index.css';i...
Aus 2024-04-05 14:18:19
0
1
1523
React Router verschachteltes Routing und Verwendung von Suchparametern Wenn ich Suchparameter in einer verschachtelten React-Route verwende, wenn ich mich in /ap...
Aus 2024-04-05 13:48:33
0
1
1475
Wie füge ich Vuex 3 für Vue 2.7 hinzu? Wenn ich „garncreatenuxt-app“ ausführe, sehe ich in package.json: „dependencies“:{“nuxt“:^...
Aus 2024-04-05 13:49:24
0
1
1382
Beim Erstellen von React-Anwendungen mit Vite sind Axios-bezogene Fehler aufgetreten Axios funktioniert in der Produktion einwandfrei, aber beim Erstellen der Anwendung erhalt...
Aus 2024-04-05 13:20:02
0
1
326
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage