用Deepseek写一个五子棋微信小程序

devtools/2025/3/14 17:58:52/

在当今快节奏的生活中,休闲小游戏成为了许多人放松心情的好选择。五子棋作为一款经典的策略游戏,不仅规则简单,还能锻炼思维。最近,我借助 DeepSeek 的帮助,开发了一款五子棋小程序>微信小程序。在这篇文章中,我将分享整个开发过程,包括与 DeepSeek 的对话、代码实现思路以及最终的成果。

1. 初识 DeepSeek:从需求到实现 

一开始,我对如何实现一个五子棋小程序并没有太多头绪。于是,我向 DeepSeek 提出了需求:

我:用小程序>微信小程序帮我写一个五子棋,要求功能和思路清晰。

DeepSeek 很快给出了一个清晰的实现思路和代码示例。它建议使用一个二维数组来表示棋盘,并通过点击事件实现落子功能。此外,它还提供了胜负判断的逻辑,确保游戏能够正常运行。 

2. 代码实现:从零到一

2.1 棋盘与落子 

 DeepSeek 提供的代码中,棋盘用一个 15x15 的二维数组表示,每个元素代表棋盘上的一个交叉点。0 表示空位,1 表示黑子,2 表示白子。玩家点击棋盘时,程序会根据点击的位置更新数组,并在界面上显示对应的棋子。

// 初始化棋盘
initBoard() {const board = new Array(15);for (let i = 0; i < 15; i++) {board[i] = new Array(15).fill(0);}this.setData({ board });
}

2.2 胜负判断

 每次落子后,程序会检查当前落子的位置是否形成五子连珠。DeepSeek 提供了一个高效的检查函数,通过遍历四个方向(水平、垂直、对角线、反对角线)来判断是否有五子连珠。

// 检查是否胜利
checkWin(row, col, player) {const { board } = this.data;const directions = [[1, 0], // 水平[0, 1], // 垂直[1, 1], // 对角线[1, -1] // 反对角线];for (let [dx, dy] of directions) {let count = 1;for (let i = 1; i < 5; i++) {if (board[row + i * dx] && board[row + i * dx][col + i * dy] === player) {count++;} else {break;}}for (let i = 1; i < 5; i++) {if (board[row - i * dx] && board[row - i * dx][col - i * dy] === player) {count++;} else {break;}}if (count >= 5) return true;}return false;
}

2.3 添加 AI 对手

为了让游戏更具挑战性,我向 DeepSeek 提出了新的需求:

我:帮我增加AI对手功能。

 DeepSeek 很快给出了一个基于规则的 AI 实现。AI 会优先阻止玩家获胜,并尝试自己获胜。它的逻辑如下:

  1. 如果 AI 可以形成五子连珠,直接获胜。

  2. 如果玩家可以形成五子连珠,AI 会阻止。

  3. 如果 AI 可以形成四子连珠,优先落子。

  4. 如果玩家可以形成四子连珠,AI 会阻止。

  5. 随机选择一个空位落子。

// AI 落子逻辑
findBestMove(board) {// 优先级1:AI 可以形成五子连珠for (let i = 0; i < 15; i++) {for (let j = 0; j < 15; j++) {if (board[i][j] === 0 && this.checkPotentialWin(i, j, 2)) {return { row: i, col: j };}}}// 优先级2:阻止玩家形成五子连珠for (let i = 0; i < 15; i++) {for (let j = 0; j < 15; j++) {if (board[i][j] === 0 && this.checkPotentialWin(i, j, 1)) {return { row: i, col: j };}}}// 其他优先级...
}

3. 与 DeepSeek 的对话:从问题到解决方案

在整个开发过程中,DeepSeek 不仅提供了代码,还解释了每一步的逻辑。例如,当我询问如何实现 AI 时,它详细说明了 AI 的优先级规则,并提供了相应的代码片段。这种交互式的学习方式让我对五子棋的实现有了更深的理解。

4. 最终成果:一款优雅的五子棋小程序

经过与 DeepSeek 的合作,我成功开发了一款五子棋小程序>微信小程序。它的主要功能包括:

  • 双人对战:玩家可以和朋友一起对战。

  • 人机对战:玩家可以与 AI 对战,AI 具备一定的智能。

  • 胜负判断:实时判断游戏结果,并显示胜利信息。

  • 重新开始:游戏结束后,可以一键重置棋盘

附:完整代码

首先,创建一个小程序>微信小程序项目,项目结构如下:

five-in-a-row/
├── pages/
│   ├── index/
│   │   ├── index.js
│   │   ├── index.wxml
│   │   ├── index.wxss
│   │   └── index.json
├── app.js
├── app.json
├── app.wxss
└── project.config.json

index.wxml - 棋盘界面 

<view class="container"><view class="board"><block wx:for="{{board}}" wx:for-item="row" wx:for-index="i"><view class="row"><block wx:for="{{row}}" wx:for-item="cell" wx:for-index="j"><view class="cell" bindtap="onTap" data-row="{{i}}" data-col="{{j}}"><view class="stone {{cell === 1 ? 'black' : (cell === 2 ? 'white' : '')}}"></view></view></block></view></block></view><view class="status">{{status}}</view>
</view>

index.wxss - 样式

 

.container {display: flex;flex-direction: column;align-items: center;padding: 20px;
}.board {display: flex;flex-direction: column;border: 1px solid #000;
}.row {display: flex;
}.cell {width: 40px;height: 40px;border: 1px solid #000;display: flex;justify-content: center;align-items: center;
}.stone {width: 30px;height: 30px;border-radius: 50%;
}.black {background-color: black;
}.white {background-color: white;border: 1px solid #000;
}.status {margin-top: 20px;font-size: 20px;
}

index.js - 逻辑代码

Page({data: {board: [], // 棋盘currentPlayer: 1, // 当前玩家,1表示黑子,2表示白子status: '黑子先下', // 游戏状态gameOver: false // 游戏是否结束},onLoad() {this.initBoard();},// 初始化棋盘initBoard() {const board = new Array(15);for (let i = 0; i < 15; i++) {board[i] = new Array(15).fill(0);}this.setData({board,currentPlayer: 1,status: '黑子先下',gameOver: false});},// 点击棋盘事件onTap(e) {if (this.data.gameOver) return;const { row, col } = e.currentTarget.dataset;const { board, currentPlayer } = this.data;if (board[row][col] !== 0) return; // 该位置已经有棋子board[row][col] = currentPlayer;this.setData({ board });if (this.checkWin(row, col, currentPlayer)) {this.setData({status: currentPlayer === 1 ? '黑子胜利!' : '白子胜利!',gameOver: true});return;}const nextPlayer = currentPlayer === 1 ? 2 : 1;this.setData({currentPlayer: nextPlayer,status: nextPlayer === 1 ? '黑子下' : '白子下'});},// 检查是否胜利checkWin(row, col, player) {const { board } = this.data;const directions = [[1, 0], // 水平[0, 1], // 垂直[1, 1], // 对角线[1, -1] // 反对角线];for (let [dx, dy] of directions) {let count = 1;for (let i = 1; i < 5; i++) {if (board[row + i * dx] && board[row + i * dx][col + i * dy] === player) {count++;} else {break;}}for (let i = 1; i < 5; i++) {if (board[row - i * dx] && board[row - i * dx][col - i * dy] === player) {count++;} else {break;}}if (count >= 5) return true;}return false;},// 重新开始游戏restartGame() {this.initBoard();}
});

 运行效果

  • 打开微信开发者工具,导入项目。

  • 运行后,你会看到一个15x15的棋盘,玩家可以点击棋盘上的交叉点落子。

  • 游戏会实时判断是否有五子连珠,如果有则显示胜利信息。

  • 游戏结束后,可以通过调用 restartGame 方法重新开始游戏。

 


http://www.ppmy.cn/devtools/167076.html

相关文章

投资早报 3.13

一、 市场概述 1.全网加密货币总市值为2.80万亿美元&#xff0c;24小时交易量为1229.116亿美元。比特币(BTC)市值占比为59.3%&#xff0c;以太坊市值占比为8.21%。 2.美股三大指数涨跌不一&#xff0c;其中标普500指数涨0.49%&#xff0c;报5599.30点&#xff1b;道琼斯指数跌…

vscode调试python量化项目经验

第一步&#xff1a;安装插件&#xff0c;如下图&#xff0c;这款几款vscode插件都装上&#xff1a; 第二步&#xff1a;新建文件如上图所示&#xff0c;在项目根目录下新建.vscode文件夹&#xff0c;该文件夹下新建launch.json文件 launch.json里的配置代码如下&#xff1a; {…

ubuntu20 安装、配置Gitlab

1. 安装依赖 sudo apt update sudo apt install ca-certificates curl openssh-server postfix 对于postfix的安装&#xff0c;请在出现提示时选择“ Internet站点”&#xff0c;其余选项按默认值即可。 2. 下载安装gitlab 下载 sudo apt-get install wget wget -P /Downlo…

【Academy】服务器端模板注入 ------ Server-side template injection

服务器端模板注入 ------ Server-side template injection 1. 什么是服务器端模板注入&#xff1f;2. 服务器端模板注入有什么影响&#xff1f;3. 服务器端模板注入漏洞是如何产生的&#xff1f;4. 构建服务器端模板注入4.1 检测4.1.1 纯文本上下文4.1.2 代码上下文 4.2 识别4.…

Matplotlib

Matplotlib 使用前需要先导入模块 import matplotlib.pyplot as plt import numpy as np绘制x点和y点 plot()函数用于在图表中绘制点&#xff08;标记&#xff09; 默认情况下&#xff0c;会从点到点之间绘制一条直线 参数1是一个包含x轴上点的数组 参数2是一个包含y轴上点的…

HTML5(Web前端开发笔记第一期)

p.s.这是萌新自己自学总结的笔记&#xff0c;如果想学习得更透彻的话还是请去看大佬的讲解 目录 三件套标签标题标签段落标签文本格式化标签图像标签超链接标签锚点链接默认链接地址 音频标签视频标签 HTML基本骨架综合案例->个人简介列表表格表单input标签单选框radio上传…

安装 ubuntu 2404 LTS 服务器 设置 服务器名称

安装 ubuntu服务器 设置 服务器名称 hostname 打开终端&#xff08;Terminal&#xff09;&#xff0c;通过快捷键CtrlAltT或在应用程序中搜索"终端"来打开&#xff1b;在终端中输入以下命令&#xff1a;hostname&#xff0c;然后按下回车键即可查看本机服务器名称。…

探索移动端开发新可能: Android Termux环境下部署MariaDB数据库

文章目录 前言1. 安装MariaDB2. 安装cpolar内网穿透工具3. 创建安全隧道映射mysql4. 公网远程连接5. 固定远程连接地址 前言 在这个数字时代&#xff0c;我们的智能手机早已突破了通话、发短信和刷社交媒体的界限。你知道吗&#xff1f;现在的智能机性能强大到足以支持我们进行…