01  开场

我们今天要完成的是这样的一个小游戏。但是我们今天不仅仅是教一个小游戏，而是带着大家走一遍，从一个想法到部署上线的完整的过程。

02  共学实践

本节内容：

• 上手实践AI编程

• 完成一个AI编程游戏并部署上线

小游戏案例

游戏展示 ：

https://xintiaostark.github.io/fortune-game/

我们今天要完成的是这样的一个小游戏。但是我们今天不仅仅是教一个小游戏，而是带着大家走一遍，从一个想法到部署上线的完整的过程。

在正常情况下，如果你要做一个“东西”，一定是要有一个目标，无论是一个虚拟的还是真实的。那在我在做这个小游戏的时候，也是有一个目标的，我想做一个这样的小游戏。但是这个想法是一个比较模糊的、不具体、不系统的想法。

我在用文字表述的时候很难表达清晰。我通常会选择使用原型工具，把这个想法画出来。

我使用的墨刀工具，只是为了在呈现的时候，让大家看得更方便，更直观。而通常情况下，我是这样画的，大家可以在纸上画，在文档里拼，不必纠结于工具，只要能够你做的一个小“样品”能够让你整理好你的思绪即可。

那我们看到现在的这个小“样品”，就在一定程度上清晰表达了我们的需求。

现在我们，只需要将他转化成语言，描述出来，然后发给AI，让AI理解我们的需求后，来页面的生成。

首先下载通义灵码插件：https://lingma.aliyun.com/lingma/download

以 VSCode 为例：

1. 打开 Visual Studio Code 扩展窗口，搜索 TONGYI Lingma，找到通义灵码后单击安装。

2. 安装完成后，请重启 Visual Studio Code。

3. 通义灵码支持模型选择，大家可以按需选择模型来体验。

清晰表达用总-分-总的方式，一般是比较好的。

我们根据这个小游戏，来书写我们的需求：

需要实现一个网页版小游戏，游戏主要功能是在30s内，通过电脑键盘左右方向键或手机屏幕滑动操作游戏人物来接住从天而降的福袋，获得积分。

游戏一共由三个页面构成，分别为：欢迎页、游戏页、结算弹窗页。

....

因为时间关系，我们后续要通过对话来完善步骤和将完成的游戏部署上线，我已经准备好了这个提示词。

需要实现一个网页版小游戏，游戏主要功能是在30s内，通过电脑键盘左右方向键或手机屏幕滑动操作游戏人物来接住从天而降的福袋，获得积分。
游戏一共由三个页面构成，分别为：欢迎页、游戏页、结算弹窗页。

1. 欢迎页： 
	- 页面构成：
    欢迎页由“背景”和“开始接福”按钮组成。 “开始接福”按钮放在页面2/3高度的位置。
	- 功能操作：
    点击“开始接福”按钮，进入“游戏页”，并开始播放背景音乐。

2. 游戏页（重要页面）： 
	- 页面构成：
    由（1）背景图，（2）财宝掉落，（3）玩家角色，（4）福气值计算 （5）游戏倒计时 组成。
	- 游戏页面画面分布：
    	- 背景图
    	- 顶部信息栏
        	- 50%通明底色
        	- 福气值
        	- 倒计时
    	- 游戏画面
        	- 底部有玩家角色
        	- 画面顶部财宝掉落
	- 功能操作（主要游戏逻辑，重点实现）： 
		 1. 游戏开始，倒计时自动开始30s计时。计时期间，从**屏幕顶部**自动不断掉落不同的“财宝”和“炸弹”。 
		 2. 用户可通过**使用键盘的左、右键或者手机屏幕**滑动，来操作底部的人物，在底部左右平移滑动，接住掉落的“财宝” ，每接住1个财宝，就记10分福气值。如果接住掉落的“炸弹”则游戏结束。 
		 3. 左上角显示的福气值和30s倒计时，实时计数。
         4. **当倒计时结束或接到“炸弹”时**，游戏结束。同时，**掉落物暂停**，弹出“结算弹窗”。

    
3. 结算弹窗页：
    - 当倒计时结束或接到“炸弹”时，弹出“结算弹窗”。
	- 无需新起一个页面，直接在游戏页中弹出，停止游戏，掉落物暂停，弹出结算弹窗
	- 弹窗构成：
  	  - 页面居中弹窗 
  	  - 标题：游戏结束 
  	  - 小标题：福气值 小标题下方：{最终分数}
	- 弹窗下方是一个“再来！”按钮，点击返回游戏欢迎页。

4. 图片素材
	- 已准备好游戏图片素材，在当前工程的image文件夹中：
		1. 欢迎页-背景：welcome_background.jpeg 
    	2. 游戏页-背景：game_background.jpeg 
    	3. 掉落物素材及对应的图片名：
       	 - 元宝：yuanbao.png
       	 - 红包：hongbao.png
       	 - 福袋：fudai.png
       	 - 金砖：jintiao.png
       	 - 钻石：zhuanshi.png
       	 - 支红包：zhihongbao.png
       	 - 双红包：dahongbao.png 
       	 - 用户人物：user.png
	-  玩家角色（user.png）：120x203px  
	-  掉落物品大小统一：50x50px 

5. 音频素材
 - 当前已准备好需要用到的音频素材，在当前工程的music文件夹中：
    - 全局背景音乐，持续循环播放：background_music.mp3 
    - 开始游戏和再来按钮的按钮点击音效：button.mp3 
    - 接住炸弹时的音效：bomb.mp3 
    - 接住元宝、红包的音效：music1.mp3 
    - 接住福袋、金砖的音效：music2.mp3 
    - 接住钻石、支红包的音效：music3.mp3 
    - 接住双红包的音效：music4.mp3

相关素材包：

链接：https://pan.baidu.com/s/11X_4r2ml9I6GRV9ihU7NLA?pwd=3j3X
提取码：3j3X 

因为这个需求描述里依然存在了大量的空白可以让模型自由的发挥，比如物品的下降速度、刷新数量和频率，比如背景图的透明度、弹窗的大小等等。这些都会影响模型的生成。

所以，大家在跟通义灵码 AI 程序员对话的过程中，也能进一步梳理页面的设计、游戏的运行优化等。

---

一般完整的调试大概是需要30分钟来完成，在过程中，大家可以通过自然语言的方式，跟通义灵码 AI 程序员持续对话，提出你的需求并优化。

其他推荐的小游戏：

俄罗斯方块小游戏

HTML 结构：
创建一个 <canvas> 元素，用于绘制俄罗斯方块的游戏区域。
在 canvas 元素上方，创建一个 <div> 用于显示游戏信息（例如：当前分数、下一个方块、游戏状态等）。
页面布局使用 Flexbox，确保游戏区域居中显示，且随着浏览器窗口的变化自适应调整。

CSS 样式：
页面背景色为深灰色（#222），canvas 元素有黑色边框（1px solid #000）。
使用 flex 布局使游戏区域居中。canvas 居中且上下左右留白适当。
游戏区域的背景色为黑色（#000），canvas 边框为黑色。canvas 的边框与背景色形成对比。
游戏说明文字区域采用绝对定位，放置在页面顶部，居中显示，文字颜色为浅色（如 #fff）。

JavaScript 游戏逻辑：
画布设置：
默认画布尺寸为 width = 600px 和 height = 800px，游戏区域的宽度为15列，比例为 scale = 40。
默认游戏区的尺寸为 arenaWidth = 15 和 arenaHeight = 20，每个方块的尺寸为 scale = 40（40px x 40px）。
方块矩阵和旋转：
方块类型使用矩阵表示：
'T' 方块：[ [0, 1, 0], [1, 1, 1], [0, 0, 0] ]
'O' 方块：[ [2, 2], [2, 2] ]
'L' 方块：[ [0, 0, 3], [3, 3, 3], [0, 0, 0] ]
'J' 方块：[ [4, 0, 0], [4, 4, 4], [0, 0, 0] ]
'I' 方块：[ [0, 5, 0, 0], [0, 5, 0, 0], [0, 5, 0, 0], [0, 5, 0, 0] ]
'S' 方块：[ [0, 6, 6], [6, 6, 0], [0, 0, 0] ]
'Z' 方块：[ [7, 7, 0], [0, 7, 7], [0, 0, 0] ]
每种方块对应一个颜色，颜色映射如下：
'T' 方块：#FF0D72
'O' 方块：#0DC2FF
'L' 方块：#0DFF72
'J' 方块：#F538FF
'I' 方块：#FF8E0D
'S' 方块：#FFE138
'Z' 方块：#3877FF
方块均设置黑色描边，确保方块单个元素在背景中可以被识别。
方块移动与碰撞检测：
移动操作：
左右移动：当按下左或右箭头键时，方块分别向左或右移动，检测碰撞后停止移动。
下落加速：按下下箭头键时，方块的下落速度加快，dropInterval 的值为 1000ms，即每秒下落一次。
旋转：按 Q 和 W 键，方块顺时针和逆时针旋转，旋转后会检测是否发生碰撞，若发生碰撞则恢复原状。
碰撞检测：
每次移动或旋转后，检测当前方块是否与其他已放置方块或边界发生碰撞，若发生碰撞，则停止该次操作。
计时器与自动下落：
使用 dropCounter 来控制方块的自动下落，dropInterval 初始值为 1000ms，即每秒自动下落一次。
当 dropCounter 超过 dropInterval，触发 playerDrop() 方法，进行方块下落，若检测到碰撞，则将方块固定在游戏区域内并生成新方块。
清除满行与得分：
每当清除一行时，得分增加 1。arenaSweep() 方法负责检查并清除所有满行。
每行清除后，上方的方块会下移，并且得分会增加。
游戏结束与重置：
如果新生成的方块与已放置的方块发生碰撞，则游戏结束。
在游戏结束后，游戏区域会重置，得分清零。

动画效果：
方块下落时，每次更新画面时，使用 requestAnimationFrame() 平滑过渡

五子棋小游戏：

生成一个五子棋游戏的HTML页面

包含以下功能：
游戏区域为400*400像素的画布。
玩家通过点击画布下棋，黑棋先行。
绘制棋子时，你需要通过arc方法绘制一个圆形，使用Math.round来确保棋子落在棋盘的交界处。
当一方连成五个相同的棋子时，游戏结束并显示获胜信息。

页面样式要求：
背景颜色为#f0f0f0。
画布背景颜色为#f3d2b5，并带有轻微阴影效果，阴影的透明度不超过0.2
提示信息字体大小为20px，居中显示。

请根据上述要求生成完整的HTML代码。

扫雷小游戏：

设计并实现一个完整的扫雷游戏，通过 HTML、CSS 和 JavaScript 构建，以下是详细要求：

HTML 要求
使用语义化的 HTML 结构：

包含标题区域，用于显示游戏标题“Minesweeper”和炸弹图标。
在游戏容器中动态生成大小可变的网格（例如：10x10）。
在网格区域下方添加一个按钮，用于重置游戏。
游戏结束时，通过一个覆盖层显示胜利或失败的消息。
提供合理的 ID 和类名以便样式化和 JavaScript 操作，示例如下：

每个方块 <div> 应动态分配 data-tile 属性，表示其坐标（例如：data-tile="3,2"）。
游戏区域的容器使用 .board 类名。
CSS 要求
颜色和字体：

使用 Google Fonts 的 Arial Black 字体，并设置加粗样式。
背景颜色为柔和的淡蓝色：#D5EDFF，网格方块的背景为浅灰色：#d3d3d3。
不同的数字颜色需表示炸弹周围的炸弹数：
1 - 蓝色 #0101FE
2 - 绿色 #0A8209
3 - 红色 #e74c3c
...依次递增（最多到 8）。
响应式布局：

游戏容器支持手机和桌面设备的动态调整，网格方块的大小应随设备尺寸变化：
小于 600px：方块大小为 15px。
其他：方块大小为 30px。
方块样式：

未点击的方块显示凸起样式（3D 效果），点击后平坦化。
点击方块后，显示内容（数字或炸弹），背景颜色改变为浅灰色 #c1c1c1。
动画效果：

添加平滑的过渡效果（transition: all 0.2s ease）用于方块翻转或颜色变化。
JavaScript 要求
模块化代码结构：

使用独立的函数管理初始化、事件绑定、逻辑处理（如胜利检查、递归翻开）。
初始化逻辑：

动态生成网格，大小由变量 size 控制，炸弹分布由 bombFrequency 确定（例如：15%）。
将炸弹位置存储在数组中，记录每个方块的炸弹邻居数量。
事件绑定：

左键点击：揭开当前方块，若为数字则显示数字，若为炸弹则触发结束逻辑。
右键点击：切换标记/取消标记状态（添加红旗图标）。
游戏逻辑：

判断胜利条件：所有非炸弹的方块均被揭开。
游戏失败：点击炸弹后显示所有炸弹，同时禁用后续操作。
递归翻开逻辑：

当点击空白方块（无炸弹邻居）时，自动翻开其相邻区域，直至数字边界。
性能优化：

使用事件委托管理方块点击事件，避免对每个方块逐一绑定事件监听器。
外部资源
使用 Google Fonts 加载 Arial Black：

html
复制代码
<link href="https://fonts.googleapis.com/css2?family=Arial:wght@900&display=swap" rel="stylesheet">
使用阿里巴巴图标库加载炸弹和旗帜图标：

炸弹图标：https://img.alicdn.com/imgextra/i3/O1CN01sMUftH1WAB0m3EG8W_!!6000000002747-2-tps-357-356.png
旗帜图标：https://img.alicdn.com/imgextra/i1/O1CN011JCO9B23Ug3p5EzB8_!!6000000007259-2-tps-898-898.png
功能验证
提供一个 New Game 按钮，可以重置当前游戏。
动态计算炸弹数量、标记数量并实时更新（显示在标题区域）。
胜利或失败后显示覆盖层消息，并禁用方块点击操作。
代码输出预期
输出的代码包含：

完整的 HTML 结构，包括所有动态内容的占位符和初始样式的类名。
详细的 CSS 样式，包括响应式设计、动画效果和主题颜色。
注释良好的 JavaScript，涵盖初始化、逻辑判断、递归操作和事件绑定的完整实现。
**附加说明：**生成的代码应适合初学者学习，可直接运行，无需额外配置环境

03  云端托管

我们这次演示使用的托管位置是：GitHub。

整个托管流程十分简单：

1、注册一个GitHub账号

2、建立一个公开代码仓库

3、发布并等待部署完成

4、分享链接给小伙伴们使用

 注册 GitHub 账号

打开：https://github.com/

点击右上角的：“Sign up”。进入注册页面。

在注册页面，你需要填写一些必要的信息，包括用户名、电子邮箱地址和密码。

• Username是比较重要的设置，是你的登录凭证，尽量设置一个自己好记的。

• 待会需要验证邮箱的有效性，所以要使用一个自己可登录的邮箱。

填写完这些信息后，点击下方的“Continue”按钮，提交注册信息，然后会进入奇奇怪怪的验证码

验证通过后，会想你的邮箱发送一封邮件，把邮件中的验证码输入即可验证成功。

然后会自动跳转至登录，或者你自己点击“sign in”，登录刚才注册的账号即可。

 部署上线

点击右上角的“Your repositories”

1. 点击 “NEW”

2. 为你的项目起一个名字（英文）

3. 点击“Create repository”，进入页面后点击“uploading an existing file”

4. 进入以下页面

5. 回到你自己电脑上的代码文件目录，选择全部文件，然后拖入上方页面上传。

6. 上传时会有进度条，等待上传完成后进度条消失。点击“Commit change”

此时已经完成了代码的上传。

7. 现在到“Setting”-“Pages””设置页面。进行如下配置，并点击save。

8. 等待1-3分钟，刷新当前页面，构建完成后，会有一个提醒：Your site is live at xxxxx。蓝色的就是你的在线地址了，可以分享你的游戏给朋友们玩耍了！

欢迎大家在评论区分享你的作品