IT评测·应用市场-qidao123.com

标题: 用Deepseek写一个五子棋微信小程序 [打印本页]

作者: 曂沅仴駦    时间: 2025-3-10 02:57
标题: 用Deepseek写一个五子棋微信小程序
在当今快节奏的生活中,休闲小游戏成为了很多人放松心情的好选择。五子棋作为一款经典的战略游戏,不但规则简单,还能锻炼头脑。近来,我借助 DeepSeek 的资助,开辟了一款五子棋微信小程序。在这篇文章中,我将分享整个开辟过程,包括与 DeepSeek 的对话、代码实现思路以及最终的结果。
  1. 初识 DeepSeek:从需求到实现 

一开始,我对怎样实现一个五子棋小程序并没有太多头绪。于是,我向 DeepSeek 提出了需求:
   我:用微信小程序帮我写一个五子棋,要求功能和思路清晰。  
DeepSeek 很快给出了一个清晰的实现思路和代码示例。它发起使用一个二维数组来表示棋盘,并通过点击事件实现落子功能。此外,它还提供了胜负判定的逻辑,确保游戏能够正常运行。 
2. 代码实现:从零到一

2.1 棋盘与落子 

 DeepSeek 提供的代码中,棋盘用一个 15x15 的二维数组表示,每个元素代表棋盘上的一个交叉点。0 表示空位,1 表示黑子,2 表示白子。玩家点击棋盘时,程序会根据点击的位置更新数组,并在界面上显示对应的棋子。
  1. // 初始化棋盘
  2. initBoard() {
  3.   const board = new Array(15);
  4.   for (let i = 0; i < 15; i++) {
  5.     board[i] = new Array(15).fill(0);
  6.   }
  7.   this.setData({ board });
  8. }
复制代码
2.2 胜负判定

 每次落子后,程序会检查当前落子的位置是否形成五子连珠。DeepSeek 提供了一个高效的检查函数,通过遍历四个方向(程度、垂直、对角线、反对角线)来判定是否有五子连珠。
  1. // 检查是否胜利
  2. checkWin(row, col, player) {
  3.   const { board } = this.data;
  4.   const directions = [
  5.     [1, 0], // 水平
  6.     [0, 1], // 垂直
  7.     [1, 1], // 对角线
  8.     [1, -1] // 反对角线
  9.   ];
  10.   for (let [dx, dy] of directions) {
  11.     let count = 1;
  12.     for (let i = 1; i < 5; i++) {
  13.       if (board[row + i * dx] && board[row + i * dx][col + i * dy] === player) {
  14.         count++;
  15.       } else {
  16.         break;
  17.       }
  18.     }
  19.     for (let i = 1; i < 5; i++) {
  20.       if (board[row - i * dx] && board[row - i * dx][col - i * dy] === player) {
  21.         count++;
  22.       } else {
  23.         break;
  24.       }
  25.     }
  26.     if (count >= 5) return true;
  27.   }
  28.   return false;
  29. }
复制代码
2.3 添加 AI 对手

为了让游戏更具寻衅性,我向 DeepSeek 提出了新的需求:
   我:帮我增加AI对手功能。   DeepSeek 很快给出了一个基于规则的 AI 实现。AI 会优先阻止玩家获胜,并尝试本身获胜。它的逻辑如下:
  1. // AI 落子逻辑
  2. findBestMove(board) {
  3.   // 优先级1:AI 可以形成五子连珠
  4.   for (let i = 0; i < 15; i++) {
  5.     for (let j = 0; j < 15; j++) {
  6.       if (board[i][j] === 0 && this.checkPotentialWin(i, j, 2)) {
  7.         return { row: i, col: j };
  8.       }
  9.     }
  10.   }
  11.   // 优先级2:阻止玩家形成五子连珠
  12.   for (let i = 0; i < 15; i++) {
  13.     for (let j = 0; j < 15; j++) {
  14.       if (board[i][j] === 0 && this.checkPotentialWin(i, j, 1)) {
  15.         return { row: i, col: j };
  16.       }
  17.     }
  18.   }
  19.   // 其他优先级...
  20. }
复制代码
3. 与 DeepSeek 的对话:从问题到办理方案

在整个开辟过程中,DeepSeek 不但提供了代码,还解释了每一步的逻辑。例如,当我询问怎样实现 AI 时,它详细说明白 AI 的优先级规则,并提供了相应的代码片段。这种交互式的学习方式让我对五子棋的实现有了更深的理解。
4. 最闭幕果:一款优雅的五子棋小程序

经过与 DeepSeek 的互助,我乐成开辟了一款五子棋微信小程序。它的紧张功能包括:

附:完整代码

首先,创建一个微信小程序项目,项目布局如下:
  1. five-in-a-row/
  2. ├── pages/
  3. │   ├── index/
  4. │   │   ├── index.js
  5. │   │   ├── index.wxml
  6. │   │   ├── index.wxss
  7. │   │   └── index.json
  8. ├── app.js
  9. ├── app.json
  10. ├── app.wxss
  11. └── project.config.json
复制代码
index.wxml - 棋盘界面 
  1. <view class="container">
  2.   <view class="board">
  3.     <block wx:for="{{board}}" wx:for-item="row" wx:for-index="i">
  4.       <view class="row">
  5.         <block wx:for="{{row}}" wx:for-item="cell" wx:for-index="j">
  6.           <view class="cell" bindtap="onTap" data-row="{{i}}" data-col="{{j}}">
  7.             <view class="stone {{cell === 1 ? 'black' : (cell === 2 ? 'white' : '')}}"></view>
  8.           </view>
  9.         </block>
  10.       </view>
  11.     </block>
  12.   </view>
  13.   <view class="status">{{status}}</view>
  14. </view>
复制代码

index.wxss - 样式
 
  1. .container {
  2.   display: flex;
  3.   flex-direction: column;
  4.   align-items: center;
  5.   padding: 20px;
  6. }
  7. .board {
  8.   display: flex;
  9.   flex-direction: column;
  10.   border: 1px solid #000;
  11. }
  12. .row {
  13.   display: flex;
  14. }
  15. .cell {
  16.   width: 40px;
  17.   height: 40px;
  18.   border: 1px solid #000;
  19.   display: flex;
  20.   justify-content: center;
  21.   align-items: center;
  22. }
  23. .stone {
  24.   width: 30px;
  25.   height: 30px;
  26.   border-radius: 50%;
  27. }
  28. .black {
  29.   background-color: black;
  30. }
  31. .white {
  32.   background-color: white;
  33.   border: 1px solid #000;
  34. }
  35. .status {
  36.   margin-top: 20px;
  37.   font-size: 20px;
  38. }
复制代码
index.js - 逻辑代码
  1. Page({
  2.   data: {
  3.     board: [], // 棋盘
  4.     currentPlayer: 1, // 当前玩家,1表示黑子,2表示白子
  5.     status: '黑子先下', // 游戏状态
  6.     gameOver: false // 游戏是否结束
  7.   },
  8.   onLoad() {
  9.     this.initBoard();
  10.   },
  11.   // 初始化棋盘
  12.   initBoard() {
  13.     const board = new Array(15);
  14.     for (let i = 0; i < 15; i++) {
  15.       board[i] = new Array(15).fill(0);
  16.     }
  17.     this.setData({
  18.       board,
  19.       currentPlayer: 1,
  20.       status: '黑子先下',
  21.       gameOver: false
  22.     });
  23.   },
  24.   // 点击棋盘事件
  25.   onTap(e) {
  26.     if (this.data.gameOver) return;
  27.     const { row, col } = e.currentTarget.dataset;
  28.     const { board, currentPlayer } = this.data;
  29.     if (board[row][col] !== 0) return; // 该位置已经有棋子
  30.     board[row][col] = currentPlayer;
  31.     this.setData({ board });
  32.     if (this.checkWin(row, col, currentPlayer)) {
  33.       this.setData({
  34.         status: currentPlayer === 1 ? '黑子胜利!' : '白子胜利!',
  35.         gameOver: true
  36.       });
  37.       return;
  38.     }
  39.     const nextPlayer = currentPlayer === 1 ? 2 : 1;
  40.     this.setData({
  41.       currentPlayer: nextPlayer,
  42.       status: nextPlayer === 1 ? '黑子下' : '白子下'
  43.     });
  44.   },
  45.   // 检查是否胜利
  46.   checkWin(row, col, player) {
  47.     const { board } = this.data;
  48.     const directions = [
  49.       [1, 0], // 水平
  50.       [0, 1], // 垂直
  51.       [1, 1], // 对角线
  52.       [1, -1] // 反对角线
  53.     ];
  54.     for (let [dx, dy] of directions) {
  55.       let count = 1;
  56.       for (let i = 1; i < 5; i++) {
  57.         if (board[row + i * dx] && board[row + i * dx][col + i * dy] === player) {
  58.           count++;
  59.         } else {
  60.           break;
  61.         }
  62.       }
  63.       for (let i = 1; i < 5; i++) {
  64.         if (board[row - i * dx] && board[row - i * dx][col - i * dy] === player) {
  65.           count++;
  66.         } else {
  67.           break;
  68.         }
  69.       }
  70.       if (count >= 5) return true;
  71.     }
  72.     return false;
  73.   },
  74.   // 重新开始游戏
  75.   restartGame() {
  76.     this.initBoard();
  77.   }
  78. });
复制代码
 运行结果


 


免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。




欢迎光临 IT评测·应用市场-qidao123.com (https://dis.qidao123.com/) Powered by Discuz! X3.4