讯享网

 <p class="f_center"><img src="http://dingyue.ws.126.net/2024/1101/70f86f48g00sm9ipx000dd200hs0028g00g20020.gif"/><br/></p><p id="34T9B6I5">大家好，我是你们的InsCode老师红帽子先生，今天我将带领大家进入AI游戏开发的神奇之旅，希望在这一系列的游戏开发课程中，能够让大家认识到InsCode AI编程的魅力。</p><p id="34T9B6I6">今年的长沙·中国1024程序员节上，CSDN旗下的InsCode AI IDE正式亮相。这款新一代AI跨平台桌面端集成开发环境由CSDN、GitCode和华为云CodeArts IDE联合开发，旨在为开发者提供高效、便捷、智能化的编程体验。通过内置的AI对话框，即便是没有开发经验的编程小白，也可以仅通过简单的对话就完成项目代码的生成和修改。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1101%2Fdf2db0edj00sm9ipx00h6d200kh00e2g00kh00e2.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34T9B6I8">CSDN创始人蒋涛先生在介绍这款产品时，曾饶有兴趣的现场演示了如何使用InsCode AI IDE创建一个声音光效灵动的《打砖块》游戏，今天，我们就来亲自实践一下。</p><p id="34T9B6IA"><strong>下载安装</strong></p><p id="34T9B6IB">首先，我们打开浏览器，输入地址：https://inscode.csdn.net，进入到InsCode官网，InsCode本身是一个开发平台，包含了Web版和桌面版两个版本，Web版本提供了基于AI的多语言开发环境，并提供了一键部署到云生产环境的服务，非常适合做一些基于网页形态的服务类应用。而桌面版IDE则提供了更为专业的AI编程体验。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1101%2F38ce241aj00sm9ipz005md200n200ceg00n200ce.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34T9B6ID">点击“下载桌面版AI IDE”按钮，会进入到InsCode AI IDE的下载安装页面，在简介里我们可以看到InsCode AI IDE 前端用了 VSCode Monaco Editor 和部分视图组件，兼容 VSCode 插件和 CodeArts 自己插件框架。对功能感兴趣的开发者可以点击左边“功能向导”下的功能菜单项进行了解，包括“生成代码”、“代码补全”、“智能问答”、“解释代码”、“添加注释”、“生成单元测试”、“修复错误”等功能，这些具体用法我们也会在后面的实战教学中讲述。在“下载安装”页面点击与当前电脑系统匹配的相应版本下载，下载好后完成安装就可以开始进行AI开发体验了。</p><p><strong>创建工程</strong></p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1101%2F900b8512j00sm9iq0003yd200n200cdg00n200cd.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34T9B6IF">双击“InsCode”图标后进入到欢迎界面，在这里我们可以选择创建Java或Python工程，咱们当前教学案例主要基于Python为主，所以就点击“创建Python工程”进入到“新建工程”的向导界面。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1101%2Ff4j00sm9iq1002ld200n300icg00n300ic.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34T9B6IH">在这个界面里我们填写项目名称为“BlockBreaker”，然后选择一个位置来创建工程文件夹，然后是Python解释器的环境选择项，可以使用新建一个虚拟环境或使用当前电脑上安装好的Python版本的解释器。点击“创建”后，InsCode AI IDE就按需求创建好工程文件夹，并创建好一个简单的main.py文件作为当前项目的启动文件。</p><p><strong>代码生成</strong>下面我们按下CTRL+A全选代码后删除，在空白代码编辑区中按下CTRL+J组合键，呼出AI对话框，这时就可以开始我们本节的AI游戏开发了。 与传统的编程开发不同，采用InsCode AI IDE进行开发，重点并不是掌握编程技巧，而是编写需求说明，专业术语叫提示词（prompt），也就是我们要知道告诉AI什么样的需求说明，才能得到较为满意的生成结果。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1101%2F819e995aj00sm9iq2001pd200n200cdg00n200cd.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34T9B6IK">比如，我们在输入框中输入我们的需求：“生成一个pygame打砖块游戏”。在这一段提示词中，有几个关键性词语。分别是“pygame”、“打砖块”、“游戏”。其中“pygame”明确了游戏开发的基本图形库是pygame，“打砖块”告诉AI做的是打砖块游戏，而不是贪吃蛇或五子棋。“游戏”指出输出的是游戏，而不是网页或应用。</p><p id="34T9B6IL">还有一个要注意的点，是InsCode AI IDE会跟据语境判断用户的需求是对代码进行增删查改还是普通的问答，比如：“开发一个RPG游戏”。那么IDE就可能不在代码区中生成代码，而是会在右边的AI聊天面板中显示方案。这是因为AI 理解这个提示语不是简单的一段代码生成，更像是提供一个项目的方案，所以在进行代码生成的时候，如果我们明确是代码生成，可以尽量的细化和明确一下需求，或者在“生成”关键词前加入一行：“请编写一段代码”，这样就比较明确说是生成代码还是提供方案了。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1101%2Ffej00sm9iq30043d200n200cdg00n200cd.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34T9B6IN">这么看下来，似乎还是有规律可遵循的，那是当然啦！要学会举一反三，比如我们做一个计算器软件，那提示词就是“生成一个tkinter计算器工具软件”，如果做一个投票页面，那提示词就是“生成一个streamlit投票网页”。是不是感觉立刻就学会啦！</p><p id="34T9B6IO">输入完成后，我们按下回车键，稍作等待后，InsCode AI IDE就会在代码编程区中生成出一个基于pygame的打砖块游戏框架了。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1101%2F9b3b5ae4j00sm9iq3003fd200n200cdg00n200cd.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34T9B6IQ">等生成过程结束后，最上部AI对话框的中的生成按钮会消失，变成“补充生成提示”、“取消”、“接受”三个按钮。分别用于对当前代码进行提示词完善后再次生成或者对当前生成的结果进行取消或接受。</p><p id="34T9B6IR">点击“接受”采纳生成的结果，然后在IDE右上角点击按钮，就会启动运行，如果我们尚未安装pygame模块，在底部的调试控制台会看到关键词为“No module named ‘pygame’”的出错提示。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1101%2F4bba7530j00sm9iq40049d200n200cdg00n200cd.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p><strong>安装pygame</strong></p><p id="34T9B6IU">我们可以点击下面一排按钮中的“终端”，切换到命令行输入终端，输入“pip install pygame”进行pygame的手动安装，pip 是一个通用的 Python 包管理工具，可以帮助我们对 Python 包进行下载、安装、卸载。如果我们感觉下载比较慢，也可以使用清华大学提供的Python包镜像，命令如下：</p><pre></pre><br/></p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1101%2F7b323b9aj00sm9iq6004bd200n200cdg00n200cd.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p><strong>修改需求</strong></p><p id="34T9B6J0">安装完成后，再次运行工程项目，这时我们可以看到一个简单的“打砖块”游戏了。在这个游戏窗口中，有砖块、小球和挡板，档板使用键盘左右键控制移动，游戏具备基本的碰撞检测处理。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1101%2F84c2064dj00sm9iq60009d200j800f9g00j800f9.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34T9B6J2">在这里要注意的是，每一次生成返回的代码一般都不完全相同，所以各位同学看到画面也会不一样，但大体上，InsCode AI IDE实现了通过一句话来生成一个简单的代码框架。当然，这只是开始，下面我们来为这个游戏进行完善。</p><p id="34T9B6J3">首先，我们按下CTRL+A全选代码，然后再按下CTRL+J呼出AI对话框，这两个连贯动作是告诉AI在接下来的对话中对选中的代码进行修改，一定要记得，如果不全选代码的话，AI是无法判断你是要对选中代码进行修改，还是在当前光标位置生成代码的哟~</p><p id="34T9B6J4">我们在刚才的游戏画面中看到两个问题，分别是砖块都堆在一起了，绿绿的一片，很不好看，另外就是游戏开始时，小球没有任何出球动作就直接开始运动了。我们下面做一些修改，输入：“调整砖块布局，让砖块四周都有一定的间隔，让小球初始状态停在档板之上，可以随着档板移动，按下空格键再向上方随机弹出。”，回车键按下后，可以看到选中的代码开始逐行的进行重写，有差异的行会高亮显示对比行，并提供了“拒绝”和“接受”的按钮。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1101%2F0bj00sm9iq70037d200j800abg00j800ab.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34T9B6J6">对于有编程经验的开发者来说，逐行对比的方式可以很方便的查看修改之处。但对我们的小白用户来说，直接回到最上面的AI对话框，点击右边的“接受”按钮，这样就全部接受修改之处，更加方便。如果哪里不合适就再全选后对话修改呗！</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1101%2Ffj00sm9iq7002ld200j800abg00j800ab.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34T9B6J8">再次运行后，我们看到游戏启动后，砖块已经被整整齐齐的按照一定间距进行摆放了，小球也被放置在档板上了，我们按下空格键时，小球才会从档板上弹出。是不是突然发现，原来我们每个人都是编程大师呀！</p><p><strong>完善游戏</strong></p><p id="34T9B6J9">虽然咱们这个打砖块游戏能玩了，但是还是不够完美，下面咱们来升级一下，让游戏看起来变的炫酷。</p><p id="34T9B6JA">首先，咱们找一些图片和音乐音效文件，在这里我给大家已经提供好了：</p><p id="34T9B6JB">背景图bg.jpg</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1101%2Fb07f62dcj00sm9iq9004cd200j800a5g00j800a5.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34T9B6JD">挡板图片dangban.png</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1101%2Fdd4f34c1j00sm9iqa001ad200ew0069g00ew0069.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34T9B6JF">继续对代码进行全选，然后依次加入提示词：“设置bg.jpg作为背景图片,并循环播放bg.mp3作为背景音乐。挡板使用dangban.png来表示，让小球碰撞到挡板时播放dangban.wav音效。让小球碰撞到砖块时播放peng.wav音效。”</p><p id="34T9B6JG">接受代码修改后，再次运行，发现有一行代码有误，遇到这种情况时，我们可以看一下调试控制台的输出信息比如它这里输出：</p><pre></pre><br/></p><p id="34T9B6JH">这里说明当前文件第60行有错，我们可以直接将60行附近的代码选中，然后按下CTRL+J，在弹出的AI对话框中输入：“修改错误：AttributeError: ‘pygame.event.Event’ object has not attribute ‘key’”，这样AI就会对选中代码按咱们的错误提示进行修正处理啦。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1101%2Fe3b16130j00sm9iqa003jd200j800abg00j800ab.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34T9B6JJ">修改完成后，再次运行，马上可以看到场景变的生动了许多。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1101%2F6142f015j00sm9iqb0045d200j800abg00j800ab.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34T9B6JL">不过玩起来发现，当小球碰撞砖块和档板几次后，音效就消失了，这是因为pygame在同一个声道上播放声效文件会出现bug，对于这种情况，我们再次全选代码，并使用提示词“让peng.wav音效和dangban.wav音效使用不同的声道来播放。”进行修改就可以了。</p><p id="34T9B6JM">完善了背景图和音乐音效之后，我们再完善一下玩法，全选代码，并使用提示词：“设置砖块使用三种不同的颜色黄色，蓝色，红色随机放置。小球碰撞到黄色砖块会增加速度，碰到蓝色砖块会让挡板缩短10%，碰到红色会在小球位置多出一个向随机方向和随机速度运动的小球。所有小球飞出屏幕时显示GameOver,按空格再重新开始。所有砖块消失后，显示you win！”</p><p id="34T9B6JN">在这么复杂的玩法需求面前，InsCode AI IDE仍然展现了良好的需求分析识别和代码修改能力，我们很快就看到多处代码的修改对比。</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1101%2Fb065f70bj00sm9iqc0036d200j800abg00j800ab.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34T9B6JP">激动人心的时刻来了，全部接受后，再次运行游戏，这时我们看到三种颜色砖块密密麻麻的随机摆放在顶部，当我们玩的时候，游戏似乎变的好玩多了呢~</p><p class="f_center"><img src="https://nimg.ws.126.net/?url=http%3A%2F%2Fdingyue.ws.126.net%2F2024%2F1101%2Fb31b1e73j00sm9iqc004fd200k600fxg00k600fx.jpg&thumbnail=660x&quality=80&type=jpg"/><br/></p><p id="34T9B6JR">一番操作猛如虎，终于把游戏做出来啦，结果一看时间，嘿，只花了不到十分钟，是不是炫酷呆了！~</p><p id="34T9B6JS">感兴趣的小伙伴可以加用户群、和红帽子先生一起讨论游戏开发啦！</p>