首页-教程-Web前端

看看使用uni-app如何编写一个五子棋小游戏

 5512

使用uni-app如何编写一个五子棋小游戏？下面本篇文章给大家分享一个使用uni-app编写的五子棋小游戏，希望对大家有所帮助！


看看使用uni-app如何编写一个五子棋小游戏


一、游戏效果图


看看使用uni-app如何编写一个五子棋小游戏


二、游戏说明

布局：玩家、棋盘、规则、按钮

游戏：玩家落子，电脑根据玩家或者自身的棋子，来进行堵截或成型

设计：电脑利用 权重 来判断哪个点的分值最高

游戏是用 uniapp + uview 写的，里面一些样式，有的我自己定义的全局的，有的是uview内置的，可自行解决


三、游戏代码

(1) 布局

  1. <template>
  2.     <view class="goBang u-border-top">
  3.         <!-- 对战信息 -->
  4.         <view class="goBang-user flexItems">
  5.             <view class="flexCenter flexColumn flex1 box">
  6.                 <u-icon class="goBang-chess" name="/static/image/gobang/black.png" size="50"></u-icon>
  7.                 <view class="u-m-t-20 fontBold c757575">电脑</view>
  8.             </view>
  9.             <view class="fontBold cmain u-font-40">VS</view>
  10.             <view class="flexCenter flexColumn flex1 box">
  11.                 <u-icon class="goBang-chess" name="/static/image/gobang/white.png" size="50"></u-icon>
  12.                 <view class="u-m-t-20 fontBold c757575">玩家</view>
  13.             </view>
  14.         </view>
  15.         <view class="goBang-container boxtb">
  16.             <!-- 棋盘底座 -->
  17.             <view class="goBang-board u-rela">
  18.                 <!-- 棋盘网格 -->
  19.                 <view class="goBang-grid-box u-rela">
  20.                     <view class="goBang-grid">
  21.                         <view class="goBang-grid-tr" v-for="(item,index) in 14" :key="index">
  22.                             <view class="goBang-grid-td" v-for="(item,index) in 14" :key="index"></view>
  23.                         </view>
  24.                     </view>
  25.                     <view class="point-c"></view>
  26.                     <view class="point-1"></view>
  27.                     <view class="point-2"></view>
  28.                     <view class="point-3"></view>
  29.                     <view class="point-4"></view>
  30.                 </view>
  31.                 <!-- 隐藏的棋盘网格  用于下棋子用的 -->
  32.                 <view class="goBang-check">
  33.                     <view class="goBang-check-tr" v-for="(item1,index1) in chessBoard" :key="index1">
  34.                         <view class="goBang-check-td" v-for="(item2,index2) in item1" :key="index2" @click="playerChess(index1,index2)">
  35.                             <image class="goBang-check-chess" :src="player[item2]" v-if="item2!=0"></image>
  36.                         </view>
  37.                     </view>
  38.                 </view>
  39.             </view>
  40.             <!-- 规则说明 -->
  41.             <view class="boxtb">
  42.                 <view class="u-m-t-10 fontBold u-font-32 c757575">规则说明:</view>
  43.                 <view class="u-m-t-20 c757575">1、玩家先手</view>
  44.                 <view class="u-m-t-10 c757575">2、其他规则，不知道就百度去，惯得！！！</view>
  45.             </view>
  46.         </view>
  47.          
  48.         <!-- 功能按钮 -->
  49.         <view class="goBang-btns">
  50.             <view class="goBang-btn" @click="regret" v-if="!isOver">
  51.                 <u-icon name="thumb-down-fill" size="30" color="#999"></u-icon>
  52.                 <text>悔棋</text>
  53.             </view>
  54.             <view class="goBang-btn" @click="restart">
  55.                 <u-icon name="reload" size="30" color="#999"></u-icon>
  56.                 <text>重来</text>
  57.             </view>
  58.             <view class="goBang-btn" @click="defeat" v-if="!isOver">
  59.                 <u-icon name="fingerprint" size="30" color="#999"></u-icon>
  60.                 <text>认输</text>
  61.             </view>
  62.         </view>
  63.     </view>
  64. </template>


(2) 样式

  1. <style>
  2. page{background-color: #F3F2F7;}
  3. </style>
  4. <style>
  5. /* #F7E7B6 棋盘背景  #C0A47C 网格条纹  */
  6. .goBang{padding: 30rpx;}
  7. .goBang-chess{width: 50rpx;height: 50rpx; border-radius: 50%;box-shadow: 0 0 8rpx 4rpx rgba(0,0,0,.2);}
  8. .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;}
  9. .goBang-grid-box{width: 100%;height: 100%;}
  10. .point-c{position: absolute;width: 14rpx;height: 14rpx;border-radius: 50%;background-color: #C0A47C; top: 50%;left: 50%;transform: translate(-50%,-50%);}
  11. .point-1{position: absolute;width: 14rpx;height: 14rpx;border-radius: 50%;background-color: #C0A47C; top: 21.5%;left: 21.5%;transform: translate(-50%,-50%);}
  12. .point-2{position: absolute;width: 14rpx;height: 14rpx;border-radius: 50%;background-color: #C0A47C; top: 21.5%;right: 21.5%;transform: translate(50%,-50%);}
  13. .point-3{position: absolute;width: 14rpx;height: 14rpx;border-radius: 50%;background-color: #C0A47C; bottom: 21.5%;right: 21.5%;transform: translate(50%,50%);}
  14. .point-4{position: absolute;width: 14rpx;height: 14rpx;border-radius: 50%;background-color: #C0A47C; bottom: 21.5%;left: 21.5%;transform: translate(-50%,50%);}
  15. .goBang-grid{width: 100%;height: 100%;border-top: 2rpx solid #C0A47C;border-left: 2rpx solid #C0A47C;display: flex;flex-direction: column;}
  16. .goBang-grid-tr{width: 100%;display: flex;flex: 1;}
  17. .goBang-grid-td{flex: 1;border-right: 2rpx solid #C0A47C;border-bottom: 2rpx solid #C0A47C;}
  18. .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;}
  19. .goBang-check-tr{width: 100%;display: flex;flex: 1;}
  20. .goBang-check-td{flex: 1;display: flex;align-items: center;justify-content: center;}
  21. .goBang-check-chess{width: 38rpx;height: 38rpx;border-radius: 50%;box-shadow: 0 2rpx 10rpx 0rpx rgba(0,0,0,.5);}}
  22. .goBang-btns{display: flex;align-items: center;justify-content: center; position: fixed;bottom: 30rpx;right: 0;left: 0;padding: 30rpx;}
  23. .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;}
  24. </style>


(3) 逻辑

  1. <script>
  2.     export default {
  3.         data() {
  4.             return {
  5.                 player: {   // 0=没有子  1=电脑  2=玩家
  6.                     0: null, 
  7.                     1: '/static/image/gobang/black.png', 
  8.                     2: '/static/image/gobang/white.png'
  9.                 }, 
  10.                 chessBoard: [],     // 棋盘数组
  11.                 isWho: true,        // 该谁下
  12.                 isOver: false,      // 游戏是否结束
  13.                 allWins: [],        // 全部赢法的数组
  14.                 allCount: 0,        // 一共有多少种赢法
  15.                 playerWins: [],     // 玩家赢法的数组
  16.                 computerWins: [],   // 电脑赢法的数组
  17.             };
  18.         },
  19.         onLoad() {
  20.             this.chess_init();
  21.             uni.showToast({title: "欢迎来到五子棋~", icon:'none'});
  22.         },
  23.         methods:{
  24.             // 悔棋
  25.             regret(){
  26.                 uni.showToast({title: "世上没有后悔药~", icon:'none'});
  27.             },
  28.             // 重来
  29.             restart(){
  30.                 uni.showToast({title: "欢迎来到五子棋~", icon:'none'});
  31.                 this.chessBoard = [];
  32.                 this.isOver = false;
  33.                 this.isWho = true;
  34.                 this.chess_init();
  35.             },
  36.             // 认输
  37.             defeat(){
  38.                 if(this.isOver){
  39.                     uni.showToast({title: "游戏已结束，可以重新开始了", icon:'none'});
  40.                 }else{
  41.                     this.isOver = true
  42.                     uni.showToast({title: "就这？就这？就这？回家喂猪吧!", icon:'none'});
  43.                 }
  44.             },
  45.             // 玩家落子
  46.             playerChess(x, y){
  47.                 // 当此点有棋子 或者 游戏结束 或者 不论到你时，则不能落子
  48.                 if(this.chessBoard[x][y] != 0 || !this.isWho || this.isOver){
  49.                     return;
  50.                 }
  51.                 // 落子
  52.                 this.chessBoard[x][y] = 2;      
  53.                 this.$forceUpdate();
  54.                 // 判断输赢
  55.                 setTimeout(()=>{             
  56.                     for(let k = 0; k < this.allCount; k++){
  57.                         if(this.allWins[x][y][k] == true){
  58.                             this.playerWins[k]++;
  59.                             this.computerWins[k] = 6;
  60.                             if(this.playerWins[k] == 5){
  61.                                 this.isOver = true;
  62.                                 uni.showToast({title: "玩家获胜!!!!"});
  63.                             }
  64.                         }
  65.                     }
  66.                 },50)
  67.                 // 如果玩家没获胜 则该电脑落子
  68.                 setTimeout(()=>{
  69.                     if(!this.isOver){           
  70.                         this.isWho = !this.isWho;
  71.                         this.computerChess();
  72.                     }
  73.                 },100)
  74.             },
  75.             // 电脑落子
  76.             computerChess(){
  77.                 // 电脑落子 利用算法————权重值
  78.                 // 判断哪一点的值最高，也就是对电脑的利益最大
  79.                 // 每下一步，就会判断某点对于玩家利益大还是自身利益大，来进行围堵和进攻
  80.                 const playerScore = [];     // 对于玩家而言，每一个空点的数值集合
  81.                 const computerScore = [];   // 对于电脑而言，每一个空点的数值集合
  82.                 let maxScore = 0;           // 最大值
  83.                 let x = 0, y = 0;           // 最后决定电脑落子的位置
  84.                  
  85.                 // 初始化玩家和电脑每个点的数值
  86.                 for(let i = 0; i < 15; i++){
  87.                     playerScore[i] = [];
  88.                     computerScore[i] = [];
  89.                     for(let j = 0; j < 15; j++){
  90.                         playerScore[i][j] = 0;
  91.                         computerScore[i][j] = 0;
  92.                     }
  93.                 }
  94.                 // 开始遍历棋盘（查看当前棋盘中所有空点）
  95.                 for(let i = 0; i < 15; i++){
  96.                     for(let j = 0; j < 15; j++){
  97.                         if(this.chessBoard[i][j] == 0){     // 此点可落子
  98.                              
  99.                             // 遍历所有赢法 给玩家和电脑的每个空点 打分 分值最高的点则是电脑落子点
  100.                             for(let k = 0; k < this.allCount; k++){      
  101.                                 if(this.allWins[i][j][k] == true){      // 判断当前点的赢法中有没有玩家或者电脑的棋子
  102.                                      
  103.                                     // 如果有玩家的棋子
  104.                                     if(this.playerWins[k] === 1){       // 赢法中包含一个玩家棋子...
  105.                                         playerScore[i][j] += 100;
  106.                                     }else if(this.playerWins[k] === 2){
  107.                                         playerScore[i][j] += 400;
  108.                                     }else if(this.playerWins[k] === 3){
  109.                                         playerScore[i][j] += 800;
  110.                                     }else if(this.playerWins[k] === 4){
  111.                                         playerScore[i][j] += 2000;
  112.                                     }
  113.                                     // 如果有电脑的棋子
  114.                                     // 相同棋子数时，电脑的权重值要比玩家的高，首先考虑自己；
  115.                                     // 但是当玩家达到三颗时，自身如果没有机会，则玩家权重值大
  116.                                     if(this.computerWins[k] === 1){     // 赢法中包含一个电脑棋子...
  117.                                         computerScore[i][j] += 150;
  118.                                     }else if(this.computerWins[k] === 2){
  119.                                         computerScore[i][j] += 450;
  120.                                     }else if(this.computerWins[k] === 3){
  121.                                         computerScore[i][j] += 950;
  122.                                     }else if(this.computerWins[k] === 4){
  123.                                         computerScore[i][j] += 10000;
  124.                                     }
  125.                                      
  126.                                 }
  127.                             }
  128.                              
  129.                             // 比较玩家和电脑在某点的分值
  130.                             // 玩家
  131.                             if(playerScore[i][j] > maxScore){
  132.                                 maxScore = playerScore[i][j];
  133.                                 x = i;
  134.                                 y = j;
  135.                             }else if(playerScore[i][j] == maxScore){        
  136.                                 // 如果玩家在当前点的分跟前一个相等，就再跟电脑自身在该点的值进行比较
  137.                                 // 如果电脑在当前点，比在上一个点的分大，说明电脑下这个点的优势更大， 以此类推，推出所有点的结果
  138.                                 if(computerScore[i][j] > computerScore[x][y]){
  139.                                     maxScore = computerScore[i][j];
  140.                                     x = i;
  141.                                     y = j;
  142.                                 }
  143.                             }
  144.                             // 电脑
  145.                             if(computerScore[i][j] > maxScore){
  146.                                 maxScore = computerScore[i][j];
  147.                                 x = i;
  148.                                 y = j;
  149.                             }else if(computerScore[i][j] == maxScore){
  150.                                 if(playerScore[i][j] > playerScore[x][y]){
  151.                                     maxScore = playerScore[i][j];
  152.                                     x = i;
  153.                                     y = j;
  154.                                 }
  155.                             }
  156.                              
  157.                         }
  158.                     }
  159.                 }
  160.                  
  161.                 // 此时电脑就可以落子了
  162.                 this.chessBoard[x][y] = 1;
  163.                 this.$forceUpdate();
  164.                 // 判断电脑是否获胜
  165.                 setTimeout(()=>{
  166.                     for(let k = 0; k < this.allCount; k++){
  167.                         if(this.allWins[x][y][k] == true){
  168.                             this.computerWins[k]++;
  169.                             this.playerWins[k] = 6;
  170.                             if(this.computerWins[k] == 5){
  171.                                 this.isOver = true;
  172.                                 uni.showToast({title: "电脑获胜！"});
  173.                             }
  174.                         }
  175.                     }
  176.                 },50)
  177.                  
  178.                 if(!this.isOver){
  179.                     this.isWho = !this.isWho;
  180.                 }
  181.             },
  182.              
  183.             // 初始化
  184.             chess_init(){
  185.                 //棋盘 
  186.                 for(let i = 0; i < 15; i++){
  187.                     this.chessBoard[i] = [];
  188.                     for(let j = 0; j < 15; j++){
  189.                         this.chessBoard[i][j] = 0;
  190.                     }
  191.                 }
  192.                 // 初始化所有赢法的数组
  193.                 for(let i = 0; i < 15; i++){
  194.                     this.allWins[i] = [];
  195.                     for(let j = 0; j < 15; j++){
  196.                         this.allWins[i][j] = [];
  197.                     }
  198.                 }
  199.                 // 横向赢法
  200.                 for(let i = 0; i < 15; i++){
  201.                     for(let j = 0; j < 11; j++){
  202.                         for(let k = 0; k < 5; k++){
  203.                             this.allWins[i][j+k][this.allCount] = true;
  204.                         }
  205.                         this.allCount++;
  206.                     }
  207.                 }
  208.                 // 竖向赢法
  209.                 for(let i = 0; i < 11; i++){
  210.                     for(let j = 0; j < 15; j++){
  211.                         for(let k = 0; k < 5; k++){
  212.                             this.allWins[i+k][j][this.allCount] = true;
  213.                         }
  214.                         this.allCount++;
  215.                     }
  216.                 }
  217.                 // 斜向（左上 -> 右下）
  218.                 for(let i = 0; i < 11; i++){
  219.                     for(let j = 0; j < 11; j++){
  220.                         for(let k = 0; k < 5; k++){
  221.                             this.allWins[i+k][j+k][this.allCount] = true;
  222.                         }
  223.                         this.allCount++;
  224.                     }
  225.                 }
  226.                 // 斜向（右上 -> 左下）
  227.                 for(let i = 0; i < 11; i++){
  228.                     for(let j = 14; j > 3; j--){
  229.                         for(let k = 0; k < 5; k++){
  230.                             this.allWins[i+k][j-k][this.allCount] = true;
  231.                         }
  232.                         this.allCount++;
  233.                     }
  234.                 }
  235.                 // console.log(this.allCount); // 572种赢法
  236.                  
  237.                 // 统计玩家与电脑的赢法数组
  238.                 // 简单来说，玩家和电脑都有572种赢法，每种赢法初始值是0；
  239.                 // 例如当玩家在第一种赢法中落一颗子，与之对应的赢法就+1，当前加到5的时候，说明第一种赢法中有了玩家五颗子，所以玩家赢。
  240.                 // 反之，当第一种赢法中玩家落了四颗，但是电脑落了一颗，那么第一种赢法对应的玩家就+4，电脑+1，这样在第一种赢法里，玩家与电脑都不能获胜。
  241.                 // 以此类推其他的赢法...
  242.                 for(let i = 0; i < this.allCount; i++){
  243.                     this.playerWins[i] = 0;
  244.                     this.computerWins[i] = 0;
  245.                 }
  246.             },
  247.         }
  248.     }
  249. </script>


TAG标签：
本文网址：https://www.zztuku.com/detail-10603.html
站长图库 - 看看使用uni-app如何编写一个五子棋小游戏
申明：本文转载于《掘金社区》，如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐