InsCode AI IDE

外观

打砖块 ​

游戏介绍 ​

  • 打砖块是一款经典的街机游戏，玩家需要控制一个挡板，通过挡板反弹小球，击碎屏幕上的砖块。

游戏规则 ​

  • 游戏开始后，屏幕上会出现一个球和一个挡板。玩家需要控制挡板左右移动，使小球反弹并击碎砖块。每次击碎砖块，玩家得分增加。游戏的目标是尽可能多地击碎砖块，获得高分。尽可能多地击碎砖块，获得高分。

开发过程 ​

（1）创建工程 ​

  • 创建工程“BlockBreaker”，选择一个位置来创建工程文件夹，然后是Python解释器的环境选择项，可以使用新建一个虚拟环境或使用当前电脑上安装好的Python版本的解释器。点击“创建”后，InsCode AI IDE就按需求创建好工程文件夹，并创建好一个简单的main.py文件作为当前项目的启动文件。 Alt text

（2）代码生成 ​

  • 在main.py按下CTRL+A全选代码后删除，在空白代码编辑区中按下CTRL+J组合键，呼出AI对话框，这时就可以开始我们本节的AI游戏开发了。 Alt text

  • 与传统的编程开发不同，采用InsCode AI IDE进行开发，重点并不是掌握编程技巧，而是编写需求说明，专业术语叫提示词（prompt），也就是我们要知道告诉AI什么样的需求说明，才能得到较为满意的生成结果。比如，我们在输入框中输入我们的需求：“生成一个pygame打砖块游戏”。在这一段提示词中，有几个关键性词语。分别是“pygame”、“打砖块”、“游戏”。其中“pygame”明确了游戏开发的基本图形库是pygame，“打砖块”告诉AI做的是打砖块游戏，而不是贪吃蛇或五子棋。“游戏”指出输出的是游戏，而不是网页或应用。

  • 还有一个要注意的点，是InsCode AI IDE会跟据语境判断用户的需求是对代码进行增删查改还是普通的问答，比如：“开发一个RPG游戏”。那么IDE就可能不在代码区中生成代码，而是会在右边的AI聊天面板中显示方案。这是因为AI 理解这个提示语不是简单的一段代码生成，更像是提供一个项目的方案，所以在进行代码生成的时候，如果我们明确是代码生成，可以尽量的细化和明确一下需求，或者在“生成”关键词前加入一行：“请编写一段代码”，这样就比较明确说是生成代码还是提供方案了。

Alt text

  • 这么看下来，似乎还是有规律可遵循的，那是当然啦！要学会举一反三，比如我们做一个计算器软件，那提示词就是“生成一个tkinter计算器工具软件”，如果做一个投票页面，那提示词就是“生成一个streamlit投票网页”。是不是感觉立刻就学会啦！输入完成后，我们按下回车键，稍作等待后，InsCode AI IDE就会在代码编程区中生成出一个基于pygame的打砖块游戏框架了。 Alt text

  • 等生成过程结束后，最上部AI对话框的中的生成按钮会消失，变成“补充生成提示”、“取消”、“接受”三个按钮。分别用于对当前代码进行提示词完善后再次生成或者对当前生成的结果进行取消或接受。点击“接受”采纳生成的结果，然后在IDE右上角点击绿色三角形按钮启动运行，如果我们尚未安装pygame模块，在底部的调试控制台会看到关键词为“No module named ‘pygame’”的出错提示，可以参考安装Pygame文件中的说明进行安装。

（3）修改需求 ​

  • 安装完成后，再次运行工程项目，这时我们可以看到一个简单的“打砖块”游戏了。在这个游戏窗口中，有砖块、小球和挡板，档板使用键盘左右键控制移动，游戏具备基本的碰撞检测处理。 Alt text

  • 在这里要注意的是，每一次生成返回的代码一般都不完全相同，所以各位同学看到画面也会不一样，但大体上，InsCode AI IDE实现了通过一句话来生成一个简单的代码框架。当然，这只是开始，下面我们来为这个游戏进行完善。 首先，我们按下CTRL+A全选代码，然后再按下CTRL+J呼出AI对话框，这两个连贯动作是告诉AI在接下来的对话中对选中的代码进行修改，一定要记得，如果不全选代码的话，AI是无法判断你是要对选中代码进行修改，还是在当前光标位置生成代码的哟~。

  • 我们在刚才的游戏画面中看到两个问题，分别是砖块都堆在一起了，绿绿的一片，很不好看，另外就是游戏开始时，小球没有任何出球动作就直接开始运动了。我们下面做一些修改，输入：“调整砖块布局，让砖块四周都有一定的间隔，让小球初始状态停在档板之上，可以随着档板移动，按下空格键再向上方随机弹出。”，回车键按下后，可以看到选中的代码开始逐行的进行重写，有差异的行会高亮显示对比行，并提供了“拒绝”和“接受”的按钮。 Alt text

  • 对于有编程经验的开发者来说，逐行对比的方式可以很方便的查看修改之处。但对我们的小白用户来说，直接回到最上面的AI对话框，点击右边的“接受”按钮，这样就全部接受修改之处，更加方便。如果哪里不合适就再全选后对话修改呗！ Alt text 再次运行后，我们看到游戏启动后，砖块已经被整整齐齐的按照一定间距进行摆放了，小球也被放置在档板上了，我们按下空格键时，小球才会从档板上弹出。是不是突然发现，原来我们每个人都是编程大师呀！

（4）完善游戏 ​

  • 虽然咱们这个打砖块游戏能玩了，但是还是不够完美，下面咱们来升级一下，让游戏看起来变的炫酷。 首先，咱们找一些图片和音乐音效文件，在这里我给大家已经提供好了： 背景图bg.jpg

Alt text

挡板图片dangban.png

Alt text

碰境音效文件

Alt text

继续对代码进行全选，然后依次加入提示词：“设置bg.jpg作为背景图片,并循环播放bg.mp3作为背景音乐。挡板使用dangban.png来表示，让小球碰撞到挡板时播放dangban.wav音效。让小球碰撞到砖块时播放peng.wav音效。” 接受代码修改后，再次运行，发现有一行代码有误，遇到这种情况时，我们可以看一下调试控制台的输出信息比如它这里输出：

“File  "main.py", line 60, in <module>
     if event.key == pygame.K_SPACE and not ball_launched:”
AttributeError: ‘pygame.event.Event’ object has not attribute ‘key’

这里说明当前文件第60行有错，我们可以直接将60行附近的代码选中，然后按下CTRL+J，在弹出的AI对话框中输入： “修改错误：AttributeError: ‘pygame.event.Event’ object has not attribute ‘key’” 这样AI就会对选中代码按咱们的错误提示进行修正处理啦。 修改完成后，再次运行，马上可以看到场景变的生动了许多。 Alt text

  • 不过玩起来发现，当小球碰撞砖块和档板几次后，音效就消失了，这是因为pygame在同一个声道上播放声效文件会出现bug，对于这种情况，我们再次全选代码，并使用提示词“让peng.wav音效和dangban.wav音效使用不同的声道来播放。”进行修改就可以了。

  • 完善了背景图和音乐音效之后，我们再完善一下玩法，全选代码，并使用提示词：“设置砖块使用三种不同的颜色黄色，蓝色，红色随机放置。小球碰撞到黄色砖块会增加速度，碰到蓝色砖块会让挡板缩短10%，碰到红色会在小球位置多出一个向随机方向和随机速度运动的小球。所有小球飞出屏幕时显示GameOver,按空格再重新开始。所有砖块消失后，显示you win！”

  • 激动人心的时刻来了，全部接受后，再次运行游戏，这时我们看到三种颜色砖块密密麻麻的随机摆放在顶部，当我们玩的时候，游戏似乎变的好玩多了呢~，一番操作猛如虎，终于把游戏做出来啦，结果一看时间，嘿，只花了不到十分钟，是不是炫酷呆了！~

Alt text