uni-app을 사용하여 주사위 놀이 미니 게임을 프로그래밍하는 방법은 무엇입니까? 다음 기사는 uni-app을 사용하여 작성된 주사위 놀이 게임을 여러분에게 공유할 것입니다. 여러분에게 도움이 되기를 바랍니다!
1. 게임 렌더링
2. 게임 설명
- 게임: 플레이어 이동 , 플레이어 기반 컴퓨터 또는 자신만의 체스 조각을 자르거나 모양을 만들 수도 있습니다.
- 디자인: 컴퓨터는
가중치- 를 사용하여 어느 지점이 가장 높은 점수를 받았는지 결정합니다. 게임은 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: '/static/image/gobang/black.png',
2: '/static/image/gobang/white.png'
},
chessBoard: [], // 棋盘数组
isWho: true, // 该谁下
isOver: false, // 游戏是否结束
allWins: [], // 全部赢法的数组
allCount: 0, // 一共有多少种赢法
playerWins: [], // 玩家赢法的数组
computerWins: [], // 电脑赢法的数组
};
},
onLoad() {
this.chess_init();
uni.showToast({title: "欢迎来到五子棋~", icon:'none'});
},
methods:{
// 悔棋
regret(){
uni.showToast({title: "世上没有后悔药~", icon:'none'});
},
// 重来
restart(){
uni.showToast({title: "欢迎来到五子棋~", icon:'none'});
this.chessBoard = [];
this.isOver = false;
this.isWho = true;
this.chess_init();
},
// 认输
defeat(){
if(this.isOver){
uni.showToast({title: "游戏已结束，可以重新开始了", icon:'none'});
}else{
this.isOver = true
uni.showToast({title: "就这？就这？就这？回家喂猪吧!", icon:'none'});
}
},
// 玩家落子
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명
이 기사는 掘金社区에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제
다른 플랫폼 (예 : 모바일, 웹)에서 문제를 어떻게 디버그합니까?Mar 27, 2025 pm 05:07 PM이 기사는 모바일 및 웹 플랫폼 용 디버깅 전략, Android Studio, Xcode 및 Chrome DevTools와 같은 도구 및 OS 및 성능 최적화 전반에 걸쳐 일관된 결과를위한 기술을 강조 표시합니다.
UniAPP 개발에 사용할 수있는 디버깅 도구는 무엇입니까?Mar 27, 2025 pm 05:05 PM이 기사는 HBuilderx, WeChat 개발자 도구 및 Chrome Devtools와 같은 도구에 중점을 둔 UniAPP 개발을위한 디버깅 도구 및 모범 사례에 대해 설명합니다.
UNIAPP 응용 프로그램에 대한 엔드 투 엔드 테스트를 어떻게 수행합니까?Mar 27, 2025 pm 05:04 PM이 기사는 여러 플랫폼에서 UniAPP 응용 프로그램에 대한 엔드 투 엔드 테스트에 대해 설명합니다. 테스트 시나리오 정의, Appium 및 Cypress와 같은 도구 선택, 환경 설정, 테스트 작성 및 실행, 결과 분석 및 Integrat을 다룹니다.
UNIAPP 응용 프로그램에서 수행 할 수있는 다양한 유형의 테스트는 무엇입니까?Mar 27, 2025 pm 04:59 PM이 기사는 장치, 통합, 기능, UI/UX, 성능, 크로스 플랫폼 및 보안 테스트를 포함한 UniAPP 응용 프로그램에 대한 다양한 테스트 유형에 대해 설명합니다. 또한 크로스 플랫폼 호환성을 보장하고 JES와 같은 도구를 권장합니다.
UnIAPP에서 일반적인 성능 방지 방지는 무엇입니까?Mar 27, 2025 pm 04:58 PM이 기사는 과도한 글로벌 데이터 사용 및 비효율적 인 데이터 바인딩과 같은 UniAPP 개발의 일반적인 성능 방지 방지에 대해 설명하며, 더 나은 앱 성능을 위해 이러한 문제를 식별하고 완화하는 전략을 제공합니다.
프로파일 링 도구를 사용하여 UniAPP에서 성능 병목 현상을 식별 할 수있는 방법은 무엇입니까?Mar 27, 2025 pm 04:57 PM이 기사는 프로파일 링 도구를 사용하여 UniAPP의 성능 병목 현상을 식별하고 해결하고 설정, 데이터 분석 및 최적화에 중점을 둡니다.
UniAPP에서 네트워크 요청을 어떻게 최적화 할 수 있습니까?Mar 27, 2025 pm 04:52 PM이 기사는 UNIAPP에서 네트워크 요청을 최적화하고 대기 시간을 줄이고 캐싱 구현 및 모니터링 도구를 사용하여 응용 프로그램 성능을 향상시키는 전략에 대해 설명합니다.
UniAPP에서 웹 성능을위한 이미지를 어떻게 최적화 할 수 있습니까?Mar 27, 2025 pm 04:50 PM이 기사에서는 압축, 반응 형 디자인, 게으른로드, 캐싱 및 Webp 형식 사용을 통해 웹 성능을 향상시키기 위해 UniAPP의 이미지 최적화에 대해 설명합니다.
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
3 몇 주 전ByDDD
Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법
2 몇 주 전ByDDD
Will R.E.P.O. 크로스 플레이가 있습니까?
1 몇 달 전By尊渡假赌尊渡假赌尊渡假赌
뜨거운 도구
WebStorm Mac 버전
유용한 JavaScript 개발 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
Atom Editor Mac 버전 다운로드
가장 인기 있는 오픈 소스 편집기
SecList
SecLists는 최고의 보안 테스터의 동반자입니다. 보안 평가 시 자주 사용되는 다양한 유형의 목록을 한 곳에 모아 놓은 것입니다. SecLists는 보안 테스터에게 필요할 수 있는 모든 목록을 편리하게 제공하여 보안 테스트를 더욱 효율적이고 생산적으로 만드는 데 도움이 됩니다. 목록 유형에는 사용자 이름, 비밀번호, URL, 퍼징 페이로드, 민감한 데이터 패턴, 웹 셸 등이 포함됩니다. 테스터는 이 저장소를 새로운 테스트 시스템으로 간단히 가져올 수 있으며 필요한 모든 유형의 목록에 액세스할 수 있습니다.
Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.
