祝贺中秋，让ChatGPT写中秋猜谜小游戏~

祝贺中秋，让ChatGPT写中秋猜谜小游戏~

Git:github.com/Hashan0217/...

友情提示：本人是菜鸟前端，有些地方做的不好，希望大家在评论区指点，互相学习互相进步啦~

大佬们先欣赏~

去年中秋的时候，我们学校的书院做了一次线下的猜谜游戏，因此想把它用小程序的方式实现。

我们要实现的目标明确，就是要实现一个 中秋猜谜游戏 。

我们的目标明确了，那我们如何让Chat帮我们完成任务呢？ 我们不可能把一个问题直接抛给它，这样得到的答案真的让人头疼，回答的跟没有回答一样。

这时我们需要拆分任务，我们在平常的学习 or 生活中 都面临问题，这时我们通常选择拆分任务，然后逐个实现就能解决问题。因此这里也是同样的道理。

新的问题又出现了，我不会拆解用小程序做 "中秋猜谜游戏" 的任务呀？ 我没有做过类似的项目，那怎么办呀？ 哎！ 这里我们就用到Chat啦 ，以前只能搜索相关项目去逐个看，耗费很多时间，但现在不一样了。 有chat在， 他会快速帮你解决问题。

好！那我们开始让他去拆解任务吧！

---

任务拆解：

Prompt：我想用微信小程序 开发 中秋猜谜游戏 帮我拆解如何开发，用纯前端方式去开发

ChatGPT：

1. 项目规划和设计：

   • 明确游戏规则和特点：定义游戏的基本规则，包括谜题类型、答案验证方式、得分计算、难度等。
   • 用户界面设计：设计小程序的用户界面，包括主页、游戏页面、积分榜等。确保设计符合中秋主题。

2. 微信小程序开发：

   • 使用微信开发工具创建一个新的小程序项目。
   • 设计小程序的页面结构，包括主页、游戏页面、积分榜页面等。

3. 谜题数据管理：

   • 创建一个存储谜题数据的JSON文件，包含谜题文本、答案、难度等信息。
   • 开发JavaScript代码以从JSON文件中加载和管理谜题数据。

4. 用户界面开发：

   • 使用WXML和WXSS创建小程序的各个页面，包括主页、游戏页面和积分榜页面。
   • 添加用户交互元素，如答题输入框、提交按钮、倒计时器等。

5. 游戏逻辑：

   • 使用JavaScript编写游戏的逻辑，包括接受用户输入、检查答案的正确性、计算得分、倒计时等功能。
   • 设计游戏流程，如开始游戏、显示谜题、处理用户答案等。

6. 积分系统：

   • 使用本地存储或wx.setStorage来存储用户的得分和排名信息。
   • 更新并显示积分榜。

7. 用户认证（可选） ：

   • 如果需要追踪不同用户的进度和积分，可以考虑使用微信登录或其他认证方式。

8. 测试和调试：

   • 对小程序进行全面测试，确保游戏功能正常运作，没有错误和漏洞。
   • 修复和调试任何发现的问题。

9. 发布和分享：

   • 将小程序提交到微信小程序平台进行审核和发布。
   • 分享小程序链接给朋友、家人和社交媒体上的用户。

10. 维护和更新：

    • 定期更新游戏内容，添加新的谜题和功能，以保持玩家的兴趣。
    • 监听用户反馈，修复bug和改进用户体验。

列出这么多，但是我们做的是简单的小游戏制作，能简单则简单，因此 我们有些功能和流程就可以自行删掉~

第一步：项目规划和设计

第二步：微信小程序开发 - 搭建工程

第三步：谜题数据管理 - 生成数据

第四步：用户界面开发

第五步：游戏逻辑

我们就做这个五步，剩余的舍弃掉~

---

那我们根据这个拆分任务逐个去实现，那么第一步是：项目规划和设计

游戏规则和特点：

我们对游戏规则同样没有头绪，什么都不知道，怎么办捏？ 别忘了，有Chat爸爸！

你想做独特并且完美的游戏规则，那就可以让chat列出很多游戏规则，并且解释为什么这样去做，然后根据这些你可以自己设计。

这里我为了省力，直接让他简单生成一个游戏规则。

游戏规则：

Prompt：推荐简单的游戏规则

友情提示：Chat有上下文理解能力，因此我没有表明要推荐猜谜游戏的规则，它也能理解~

ChatGPT：

游戏规则和玩法：

1. 游戏目标：

   • 玩家的目标是猜出尽可能多的中秋主题的谜语。

2. 游戏界面：

   • 游戏界面包括谜语文本、答案输入框、提交按钮。

3. 游戏流程：

   • 游戏从第一道谜语开始，依次显示每个谜语。
   • 玩家需要在规定时间内输入谜底的答案，并点击提交按钮。
   • 如果答案正确，玩家获得一分，并进入下一道谜语。
   • 如果答案错误或时间用尽，玩家不得分，但仍然进入下一道谜语。
   • 游戏结束后，显示玩家的总得分。

4. 得分计算：

   • 每道谜语的得分都是固定的（例如，每道谜语答对得1分）。
   • 游戏结束后，显示总得分。

5. 随机谜题：

   • 游戏包含多个中秋主题的谜语，随机选择并呈现给玩家。

6. 倒计时：

   • 可以考虑添加一个简单的倒计时器，例如30秒，以增加一定的紧迫感。

7. 游戏结束：

   • 游戏可以设置一个谜语数量上限，当玩家猜完指定数量的谜语后，游戏结束。

8. 用户界面：

   • 游戏提供一个简单的开始按钮，点击后开始游戏。
   • 游戏结束后，显示玩家的总得分。

这里游戏规则很明显啦，在游戏流程 那边描述的相当清晰了，我们也对开发这款游戏有了很清晰的一个认知啦~

用户界面设计：

我们从游戏规则可以看出，页面总共四个，开始页面，答题页面，失败页面，成功页面

设计页面时，您可以去提问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">
  
​
  <!-- 谜题容器 -->
  <view class="puzzle-container">
    <!-- 谜题题目 -->
    <view class="puzzle-question">{{ currentPuzzle.puzzleQuestion }}</view>
​
    <!-- 输入答案 -->
    <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来实现一个项目，项目本身很小但是这次是我大胆的去拥抱人工智能，一起协作做出来的，心里还是很开心的~

希望大家拥抱科技，提升自身能力，也呼吁大家自己去挑战一下，哪怕写我这样的小项目~

最后望大家 圆我的一个小小的梦，想获得掘金的中秋奖品，懂的都懂~ 🙇‍

废话不多说结果展示啦~

结果展示：