友情提示：本人是菜鸟前端，有些地方做的不好，希望大家在评论区指点，互相学习互相进步啦~
去年中秋的时候，我们学校的书院做了一次线下的猜谜游戏，因此想把它用小程序的方式实现。
我们要实现的目标明确，就是要实现一个 中秋猜谜游戏 。
我们的目标明确了，那我们如何让Chat帮我们完成任务呢？ 我们不可能把一个问题直接抛给它，这样得到的答案真的让人头疼，回答的跟没有回答一样。
这时我们需要拆分任务，我们在平常的学习 or 生活中 都面临问题，这时我们通常选择拆分任务，然后逐个实现就能解决问题。因此这里也是同样的道理。
新的问题又出现了，我不会拆解用小程序做 "中秋猜谜游戏" 的任务呀？ 我没有做过类似的项目，那怎么办呀？ 哎！ 这里我们就用到Chat啦 ，以前只能搜索相关项目去逐个看，耗费很多时间，但现在不一样了。 有chat在， 他会快速帮你解决问题。
好！那我们开始让他去拆解任务吧！
Prompt：我想用微信小程序 开发 中秋猜谜游戏 帮我拆解如何开发，用纯前端方式去开发
ChatGPT：
-
项目规划和设计：
- 明确游戏规则和特点：定义游戏的基本规则，包括谜题类型、答案验证方式、得分计算、难度等。
- 用户界面设计：设计小程序的用户界面，包括主页、游戏页面、积分榜等。确保设计符合中秋主题。
-
微信小程序开发：
- 使用微信开发工具创建一个新的小程序项目。
- 设计小程序的页面结构，包括主页、游戏页面、积分榜页面等。
-
谜题数据管理：
- 创建一个存储谜题数据的JSON文件，包含谜题文本、答案、难度等信息。
- 开发JavaScript代码以从JSON文件中加载和管理谜题数据。
-
用户界面开发：
- 使用WXML和WXSS创建小程序的各个页面，包括主页、游戏页面和积分榜页面。
- 添加用户交互元素，如答题输入框、提交按钮、倒计时器等。
-
游戏逻辑：
- 使用JavaScript编写游戏的逻辑，包括接受用户输入、检查答案的正确性、计算得分、倒计时等功能。
- 设计游戏流程，如开始游戏、显示谜题、处理用户答案等。
-
积分系统：
- 使用本地存储或
wx.setStorage来存储用户的得分和排名信息。 - 更新并显示积分榜。
- 使用本地存储或
-
用户认证（可选） ：
- 如果需要追踪不同用户的进度和积分，可以考虑使用微信登录或其他认证方式。
-
测试和调试：
- 对小程序进行全面测试，确保游戏功能正常运作，没有错误和漏洞。
- 修复和调试任何发现的问题。
-
发布和分享：
- 将小程序提交到微信小程序平台进行审核和发布。
- 分享小程序链接给朋友、家人和社交媒体上的用户。
-
维护和更新：
- 定期更新游戏内容，添加新的谜题和功能，以保持玩家的兴趣。
- 监听用户反馈，修复bug和改进用户体验。
列出这么多，但是我们做的是简单的小游戏制作，能简单则简单，因此 我们有些功能和流程就可以自行删掉~
第一步：项目规划和设计
第二步：微信小程序开发 - 搭建工程
第三步：谜题数据管理 - 生成数据
第四步：用户界面开发
第五步：游戏逻辑
我们就做这个五步，剩余的舍弃掉~
那我们根据这个拆分任务逐个去实现，那么第一步是：项目规划和设计
我们对游戏规则同样没有头绪，什么都不知道，怎么办捏？ 别忘了，有Chat爸爸！
你想做独特并且完美的游戏规则，那就可以让chat列出很多游戏规则，并且解释为什么这样去做，然后根据这些你可以自己设计。
这里我为了省力，直接让他简单生成一个游戏规则。
游戏规则：
Prompt：推荐简单的游戏规则
友情提示：Chat有上下文理解能力，因此我没有表明要推荐猜谜游戏的规则，它也能理解~
ChatGPT：
游戏规则和玩法：
-
游戏目标：
- 玩家的目标是猜出尽可能多的中秋主题的谜语。
-
游戏界面：
- 游戏界面包括谜语文本、答案输入框、提交按钮。
-
游戏流程：
- 游戏从第一道谜语开始，依次显示每个谜语。
- 玩家需要在规定时间内输入谜底的答案，并点击提交按钮。
- 如果答案正确，玩家获得一分，并进入下一道谜语。
- 如果答案错误或时间用尽，玩家不得分，但仍然进入下一道谜语。
- 游戏结束后，显示玩家的总得分。
-
得分计算：
- 每道谜语的得分都是固定的（例如，每道谜语答对得1分）。
- 游戏结束后，显示总得分。
-
随机谜题：
- 游戏包含多个中秋主题的谜语，随机选择并呈现给玩家。
-
倒计时：
- 可以考虑添加一个简单的倒计时器，例如30秒，以增加一定的紧迫感。
-
游戏结束：
- 游戏可以设置一个谜语数量上限，当玩家猜完指定数量的谜语后，游戏结束。
-
用户界面：
- 游戏提供一个简单的开始按钮，点击后开始游戏。
- 游戏结束后，显示玩家的总得分。
这里游戏规则很明显啦，在游戏流程 那边描述的相当清晰了，我们也对开发这款游戏有了很清晰的一个认知啦~
用户界面设计：
我们从游戏规则可以看出，页面总共四个，开始页面，答题页面，失败页面，成功页面
设计页面时，您可以去提问Chat帮助你的设计，这里为了省事儿不操作啦~ 哈哈哈哈哈哈有点偷懒哈
- 使用微信开发工具创建一个新的小程序项目
- 设计小程序的页面
这里有四个页面：开始页面，答题页面，失败页面，成功页面 （页面设计的时候，已经定好啦~）
创建四个页面
以前啊，没有数据只能苦苦的自己去找 or 找自动生成的工具，并且这些工具生成的数据只能凑合用，但有了Chat那就不一样了呀 哥们!!
我们直接让chat 生成即可，我们首先得考虑好数据结构，给Chat说明，他就直接生成啦!
若我们不知道数据结构，同样让Chat去帮我们~
这里的数据与结构比较简单，我就不用它了，每个东西都让他做，我们没有进行思考也是不行的，Chat不是替代我们而是帮助我们!!
数据结构想好了以后，那我们可以让Chat，去生成数据
Prompt：
ChatGPT:
{
"allPuzzles": [
{
"puzzleQuestion": "中秋之夜，月明星稀，猜一食物。",
"puzzleAnswers": "月饼",
"isCorrect": false
},
{
"puzzleQuestion": "皮黄肉白红褐彩，鲜美异常妙不可言，煮、炸、炖，样样好，是谁制作最拿手？",
"puzzleAnswers": "妈妈",
"isCorrect": false
},
{
"puzzleQuestion": "中秋之夜，天上的星星格外多，猜一成语。",
"puzzleAnswers": "满天星斗",
"isCorrect": false
},
{
"puzzleQuestion": "中秋佳节，爸爸妈妈带着你去哪里？",
"puzzleAnswers": "公园",
"isCorrect": false
},
{
"puzzleQuestion": "中秋之夜，吃的是什么食物，外皮金黄，馅料丰富多样？",
"puzzleAnswers": "月饼",
"isCorrect": false
},
{
"puzzleQuestion": "夜晚的中秋，你可以去户外放一种玩具，看谁的飞得最高？",
"puzzleAnswers": "风筝",
"isCorrect": false
},
{
"puzzleQuestion": "中秋之夜，一轮明月挂天空，照亮了大地，是什么节日？",
"puzzleAnswers": "中秋节",
"isCorrect": false
},
{
"puzzleQuestion": "中秋之夜，猜一种美味的水果，通常在此时上市。",
"puzzleAnswers": "柚子",
"isCorrect": false
},
{
"puzzleQuestion": "中秋之夜，大家都聚在一起，围坐在桌前，共同品尝一种美味的食物，猜一家庭活动。",
"puzzleAnswers": "团圆饭",
"isCorrect": false
},
{
"puzzleQuestion": "中秋之夜，你可以与家人朋友一起举行的户外活动，猜一种游戏。",
"puzzleAnswers": "烧烤",
"isCorrect": false
},
{
"puzzleQuestion": "中秋之夜，猜一种美味的食物，外皮脆皮，内馅软糯。",
"puzzleAnswers": "月饼",
"isCorrect": false
},
{
"puzzleQuestion": "中秋之夜，大家在室外点亮的是什么？",
"puzzleAnswers": "灯笼",
"isCorrect": false
},
{
"puzzleQuestion": "中秋之夜，你可以在户外看到的天体是什么？",
"puzzleAnswers": "月亮",
"isCorrect": false
},
{
"puzzleQuestion": "中秋之夜，大家都在天空中放的是什么？",
"puzzleAnswers": "孔明灯",
"isCorrect": false
},
{
"puzzleQuestion": "中秋之夜，猜一种美味的食物，外皮脆皮，内馅丰富。",
"puzzleAnswers": "月饼",
"isCorrect": false
},
{
"puzzleQuestion": "中秋之夜，你可以在户外看到的是什么？",
"puzzleAnswers": "星星",
"isCorrect": false
},
{
"puzzleQuestion": "中秋之夜，谁会在天上和嫦娥一起观赏月亮？",
"puzzleAnswers": "玉兔",
"isCorrect": false
},
{
"puzzleQuestion": "中秋之夜，家家户户都点亮了什么？",
"puzzleAnswers": "灯笼",
"isCorrect": false
},
{
"puzzleQuestion": "中秋之夜，猜一种美味的食物，外皮金黄，内馅多样。",
"puzzleAnswers": "月饼",
"isCorrect": false
},
{
"puzzleQuestion": "中秋之夜，夜空中闪烁着的小星星，猜一成语。",
"puzzleAnswers": "满天星斗",
"isCorrect": false
}
]
}
终于要撸代码啦！！！！！
界面我们确定好了，【开始页面，答题页面，失败页面，成功页面 】
让chat 生成一下先~
Prompt： 写一个开始页面 开始页面包含中秋风格的样式，中间标题：小哈猜谜游戏 这个要艺术感， 下面有 开始按钮 这个按钮样式要跟主题搭配 并且需要中秋风格的装饰
ChatGPT:
<!-- 开始页面 -->
<view class="start-page">
<!-- 标题 -->
<view class="title">小哈猜谜游戏</view>
<!-- 开始按钮 -->
<button class="start-button">开始游戏</button>
</view>
/* 开始页面样式 */
.start-page {
background-image: url('中秋背景图.jpg'); /* 设置背景图片 */
background-size: cover; /* 背景图片铺满整个页面 */
background-repeat: no-repeat; /* 禁止背景图重复 */
background-position: center center; /* 居中对齐背景图 */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh; /* 设置页面高度为视窗高度，铺满整个屏幕 */
}
/* 标题样式 */
.title {
font-size: 28px;
font-weight: bold;
color: #fff; /* 文字颜色为白色 */
text-shadow: 2px 2px 4px #000; /* 添加文字阴影效果 */
margin-bottom: 20px;
}
/* 开始按钮样式 */
.start-button {
background-color: #fbd12a; /* 设置按钮背景颜色 */
color: #fff; /* 按钮文字颜色为白色 */
font-size: 18px;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 2px 2px 4px #000; /* 添加按钮阴影效果 */
}
/* 添加中秋风格的装饰，可以在按钮周围加上月亮、兔子等元素的图片或图标 */
展示结果：
需要调整，把标题往上一点并且字体大一点，就很好看啦~~ (背景图自己找，然后贴上去即可)
Prompt： 帮我写答题页面 背景颜色要种相关的 上面展示谜题，然后下面输入框，给用户输入 右上角有个闹钟的样式 然后里面要显示计时数字 布局要合理
ChatGPT：
<!-- game.wxml -->
<view class="game-page">
{{ currentPuzzle.puzzleQuestion }}
<!-- 输入答案 -->
<input class="answer-input" placeholder="请输入答案" bindinput="onInput"></input>
</view>
<!-- 回答完毕按钮 -->
<button class="finish-button" bindtap="finishAnswer">回答完毕</button>
<!-- 闹钟样式 -->
<view class="clock">
<!-- 计时数字 -->
<view class="timer">{{ timer }}</view>
</view>
</view>
/* 答题页面样式 */
.game-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #fbd12a; /* 设置背景颜色 */
color: #fff;
}
/* 谜题容器样式 /
.puzzle-container {
background-color: rgba(0, 0, 0, 0.5); / 半透明的背景颜色 */
padding: 20px;
border-radius: 10px;
text-align: center;
margin-bottom:90px;
}
/* 谜题题目样式 */
.puzzle-question {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
/* 输入框样式 */
.answer-input {
width: 80%;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 18px;
margin: 0 auto;
}
/*按钮*/
.finish-button{
background-color: #fff;
}
/* 闹钟样式 */
.clock {
position: fixed;
top: 20px;
right: 20px;
background-color: rgba(0, 0, 0, 0.7); /* 半透明的背景颜色 */
padding: 10px;
border-radius: 50%;
}
/* 计时数字样式 */
.timer {
font-size: 18px;
font-weight: bold;
color: #fff;
}
展示效果
Prompt： 写游戏没有通过，失败的页面
ChatGPT：
<!-- game-fail.wxml -->
<view class="game-fail-page">
<!-- 失败提示 -->
<view class="fail-text">很遗憾，游戏未通过。</view>
<!-- 返回按钮 -->
<button class="return-button" bindtap="returnToMenu">返回菜单</button>
</view>
/* 游戏失败页面样式 */
.game-fail-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #fbd12a; /* 设置背景颜色 */
color: #fff;
}
/* 失败提示样式 */
.fail-text {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
/* 返回按钮样式 */
.return-button {
background-color: #ff5722; /* 设置按钮背景颜色 */
color: #fff; /* 按钮文字颜色为白色 */
font-size: 18px;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 2px 2px 4px #000; /* 添加按钮阴影效果 */
}
展示效果
直接复用失败的页面即可 （偷懒啦~~~）
既然要复用，那还不如 把失败页面何成功页面合并起来 改为 “gameResults” 页面，也就是 游戏结果页面
当用户失败 or 成功 时把中间的字改一下即可；
在开始页面，点击按钮时跳转回答页面
//开始页面
Page({
data: {
},
//点击跳转页面
redirectToGame: function () {
wx.navigateTo({
url: '/pages/answer/index', // 跳转到游戏页面的路径
});
},
});
在回答页面时，我们导入游戏规则代码，监听输入框和按钮 （这里计时器功能没有做~）
import Game from "../../game/playGame";
Page({
data: {
puzzleQuestion: "", //题目
timer: 180, // 计时器，根据具体需求设置初始值
userAnswer: "", // 用户输入的答案
},
onLoad() {
const games = new Game(); //实例化类
this.__proto__.games = games //把类放到原型链
games.init() //初始化
},
// 输入框输入事件处理函数
onInput: function (event) {
this.setData({
userAnswer: event.detail.value,
});
},
//回答完毕后
finishAnswer() {
const userAnswer = this.data.userAnswer; //用户输入的答案
this.games.checkAnswer(userAnswer) //调用games实例的检查函数
},
//卸载页面时关闭游戏
onunload: function () {
this.__proto__.games = null //清空游戏实例
}
});
结果页面获取url参数，并展示结果
Page({
data: {
target:'', //是否成功
num:'', //积分
},
onLoad: function (options) {
const target = options.target; // 获取名为 "target" 的参数
const num = options.num; // 获取名为 "num" 的参数
this.setData({
target,
num
});
},
// 返回按钮点击事件处理函数
returnToMenu: function () {
// 处理返回菜单的逻辑，可以跳转到菜单页面或其他操作
wx.navigateBack({
delta: 1, // 返回上一页
});
},
});
Prompt： 用类 去编程 游戏开始 开始后从题库随机获取五个题， 用户每次输入正确过下一个，失败则立刻结束并且记分 三个连续答对则成功
// game.js
class Game {
constructor() {
this.questions = []; // 存储题库的数组
this.currentQuestionIndex = 0; // 当前题目索引
this.score = 0; // 得分
this.correctStreak = 0; // 连续答对的次数
this.maxCorrectStreak = 3; // 三连对成功
}
// 初始化游戏，加载题库
init() {
this.loadQuestions();
this.shuffleQuestions();
this.startGame();
}
// 加载题库
loadQuestions() {
// 将题目添加到 this.questions 数组中
this.questions= [
{
"puzzleQuestion": "皮黄肉白红褐彩，鲜美异常妙不可言，煮、炸、炖，样样好，是谁制作最拿手？",
"puzzleAnswers": "妈妈",
},
{
"puzzleQuestion": "中秋之夜，天上的星星格外多，猜一成语。",
"puzzleAnswers": "满天星斗",
},
{
"puzzleQuestion": "中秋佳节，爸爸妈妈带着你去哪里？",
"puzzleAnswers": "公园",
},
{
"puzzleQuestion": "中秋之夜，吃的是什么食物，外皮金黄，馅料丰富多样？",
"puzzleAnswers": "月饼",
},
{
"puzzleQuestion": "夜晚的中秋，你可以去户外放一种玩具，看谁的飞得最高？",
"puzzleAnswers": "风筝",
}]
}
// 打乱题目顺序
shuffleQuestions() {
// 洗牌算法
for (let i = this.questions.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[this.questions[i], this.questions[j]] = [this.questions[j], this.questions[i]];
}
}
// 开始游戏
startGame() {
this.displayQuestion();
}
// 显示当前题目
displayQuestion() {
const currentQuestion = this.questions[this.currentQuestionIndex];
const page = getCurrentPages()[1]; // 获取当前页面实例
// 在页面中显示题目，并监听用户输入
page.setData({
puzzleQuestion: currentQuestion.puzzleQuestion,
userAnswer: "", // 清空用户答案
});
}
// 检查用户答案
checkAnswer(userAnswer) {
const currentQuestion = this.questions[this.currentQuestionIndex];
if (userAnswer === currentQuestion.puzzleAnswers) {
this.correctAnswer();
} else {
this.wrongAnswer();
}
}
// 回答正确
correctAnswer() {
this.score++;
this.correctStreak++;
wx.showToast({
title: "回答正确！",
icon: "success",
});
if (this.correctStreak === this.maxCorrectStreak) {
this.gameSuccess();
} else {
this.nextQuestion();
}
}
// 回答错误
wrongAnswer() {
wx.showToast({
title: "回答错误，游戏结束。",
icon: "none",
});
this.gameOver();
}
// 进入下一题
nextQuestion() {
this.currentQuestionIndex++;
if (this.currentQuestionIndex < this.questions.length) {
this.displayQuestion();
} else {
this.gameOver();
}
}
// 游戏结束
gameOver() {
// 处理游戏结束逻辑，显示分数等信息
wx.redirectTo({
url: `/pages/gameResults/index?target=0&num=${this.score}`, // 跳转到游戏页面的路径
});
}
// 游戏成功
gameSuccess() {
// 处理游戏成功逻辑，显示胜利信息
wx.redirectTo({
url: `/pages/gameResults/index?target=1&num=${this.score}`, // 跳转到游戏页面的路径
});
}
}
module.exports = Game;
到这里我们就开发完成，用ChatGPT来工作确实会提升工作效率，提供开发幸福指数昂 哈哈哈哈。
本人是菜鸟前端，有些地方做的不好，希望大家在评论区指点，互相学习互相进步啦~
第一次完全靠用ChatGPT来实现一个项目，项目本身很小但是这次是我大胆的去拥抱人工智能，一起协作做出来的，心里还是很开心的~
希望大家拥抱科技，提升自身能力，也呼吁大家自己去挑战一下，哪怕写我这样的小项目~
最后望大家 圆我的一个小小的梦，想获得掘金的中秋奖品，懂的都懂~ 🙇
废话不多说结果展示啦~
结果展示：
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent