游戏开发教育前端后端【免费下载链接】codecombatGame for learning how to code.项目地址https://gitcode.com/gh_mirrors/co/codecombat点击查看免费下载Game Development 3GD3是 CodeCombat 游戏开发课程体系的第三阶在 Game Development 2 的基础上引入update事件与直接设置坐标两大底层机制让学生从“调用现成动作”进阶到“自定义物理行为与逐帧动画”。本文以官方课程指南 app/assets/markdown/gd3.md 为主体结合仓库内的渲染循环、帧率统计与分数持久化源码完整讲解游戏循环、资源复用、动画与 Runner 跑酷项目读者学完后将具备设计逐帧逻辑、实现自定义动画并独立完成一个可分享小游戏的能力。课程定位与前置要求GD3 课程承接 Game Development 2要求学生具备以下基础Computer Science 3掌握条件判断、函数、事件等核心编程概念Game Development 2熟悉game.on、player.on、定时器、手动目标等游戏机制可选一定的物理或几何知识。课程会提供足够的引导但学生若有相关背景将能在最终项目与课堂讨论中更好地应用这些知识例如圆周运动中的正弦/余弦、抛物运动中的重力。课程概览GD2 中的游戏仍遵循“单位在二维平面上、带基础物理、用鼠标或键盘控制一个单位”的骨架结构GD3 则通过更开放的底层工具支持构建更丰富、更有创意的游戏同时让学生看到基础计算机科学概念如何在“做一个能分享给别人的作品”的过程中被实际运用。本指南以 Python 语言课堂为写作对象但同样易于适配 JavaScript。课程范围Scope and SequenceOn Update and Setting Positionupdate事件与位置设置Animations动画Runner Project Tutorial跑酷项目教程Game Development 3 Project最终项目下文按此顺序展开并在各模块末尾给出课堂讨论问题的标准答案。模块一update 事件与位置设置本模块开始给予学生更细粒度的游戏控制权。此前构建的游戏都使用游戏的基本结构2D 平面上的单位、一套基础物理、单位间的交互、用鼠标或键盘控制某个单位。掌握了细粒度控制后学生将能够创造任意物理行为与交互——从无重力的陨石漂移到马里奥式的平台跳跃。游戏循环Game Loop入门模块开篇先讲授游戏循环这是任何包含动画的游戏的标准逻辑结构while True: update state # 更新状态 draw to screen # 绘制到屏幕 wait until the next time to update # 等待到下一次更新时刻通常几毫秒更新状态update state涵盖所有随时间或用户输入变化的逻辑状态——根据重力或与其它玩家的碰撞更新位置、更新生命值、更新角色状态。每次更新针对一小段确定的时间往往只有几分之一秒。绘制到屏幕draw to screen把当前游戏状态世界如何构造、玩家看向哪里变换为屏幕上的画面。对 2D 游戏通常是把若干精灵图缩放、过滤后叠加在一起对 3D 游戏则是按由远及近的顺序绘制多边形且只绘制角色视野内的部分。等待wait保证游戏以稳定、可预测的节奏运行。每个时刻游戏的工作量或多或少因此需要等待一个互补的时间量使更新平稳进行。循环的一次迭代就是一个帧frame。在仓库中可以看到这一模型的具体实现app/lib/surface/Lank.coffee的update(frameChanged)方法在每个渲染帧把“精灵反映当前 thang 与 surface 状态”先updatePosition()位置再依次updateScale()缩放必须先于旋转、updateRotation()、updateAction()、updateStats()、updateGold()、updateHealthBar()等正是“每帧依据当前状态重绘画面”的典型代码形态见 app/lib/surface/Lank.coffee。循环变体暂停paused演示如何把暂停融入基础循环。游戏暂停时不更新状态一切保持不变但仍需绘制画面菜单界面的动画往往也在继续因此循环变为while True: if not game.paused: update state draw to screen循环变体丢帧dropping frames讨论游戏性能时必然涉及FPSFrames Per Second每秒帧数即每秒绘制到屏幕的帧数。机器性能足够时FPS 稳定且高游戏流畅机器跟不上时游戏会逐渐且不规律地变慢。举例游戏运行在 30 FPS每帧约 33ms。若更新状态平均耗时 20ms、绘制平均耗时 20ms则游戏每帧落后 7ms每秒累计落后 231ms即比应有速度慢约 23%。解决办法是在落后时跳过绘制步骤让状态更新保持稳定这就是所谓的“丢帧”并直接反映在实际 FPS 上。FPS 低于目标值说明游戏正是通过丢帧来维持玩法顺畅尽管动画不再平滑while True: update state if not falling behind: draw to screen仓库中即可看到 FPS 的实时统计app/lib/surface/DebugDisplay.coffee计算framesRenderedThisSecond / diff得到 FPS并显示为当前帧号 - FPS文本见 app/lib/surface/DebugDisplay.coffee而app/lib/world/world.coffee中通过frames.length / frameRate计算已模拟时间、在序列化时携带frameRate与dt时间步长说明模拟世界与渲染以固定帧率步进见 app/lib/world/world.coffee。资源复用Resource Re-use入门本模块通过巧妙操纵位置实现资源的复用。游戏与程序普遍这么做以提升性能。可结合学生用卡顿机器的亲身经历讨论计算机性能问题一台电脑运行了太多程序一个浏览器打开了太多标签页一部手机运行了太多应用新发布的游戏在老机器上跑不动。游戏通常消耗大量计算资源游戏程序员必须时刻考虑“优化”让尽量多的机器能合理运行。创建、跟踪、销毁资源都是耗时操作尤其对 Python、JavaScript 这类靠垃圾回收Garbage Collection自动清理不再使用资源的语言而言。只要可能就应回收利用虚拟资源而不是销毁后重建。后续关卡将演示如何通过更新对象位置来复用资源、节省宝贵的算力。关卡详解学生应游玩前四个关卡The Rule of the Square、The Big Guy、Quantum Jump、Looping Forest。The Rule of the Square建议全班一起回顾这一关确保学生理解代码中发生了什么。关键要点update事件是低层事件每次游戏循环更新当前状态时触发一次给程序员每帧一次更新场景的机会update事件可以按单位运行也可以按整个游戏运行。本关两者都有演示既为被生成单位设置了 update 事件也为游戏本身设置了 update 事件。解法让每种单位类型都设置好 update 事件处理器——// Set the update event handler for thrower and scout: game.setActionFor(thrower, update, onUpdateUnit); game.setActionFor(scout, update, onUpdateUnit); // Set the update event handler for archer and soldier: game.setActionFor(archer, update, onUpdateUnit); game.setActionFor(soldier, update, onUpdateUnit);再设置游戏 update 命令用自定义函数spawnRandomUnit周期性生成 thrower 和 scout 单位。写法与既有生成 archer/soldier 的行一致——spawnRandomUnit已封装公共逻辑随机类型与随机 y 坐标、给定 x 坐标function onUpdateGame(event) { if (game.time game.spawnTime) { game.spawnTime game.interval; spawnRandomUnit(2, archer, soldier); // Use spawnRandomUnit with parameters: // x is 78, type0 is thrower, type1 is scout: spawnRandomUnit(78, thrower, scout); } }加粗行为学生需补充的代码。注意game.time、game.spawnTime、game.interval都是直接挂在game对象上的属性通过“比较当前时间与预定触发时间”实现周期触发这正是下一节“讨论”中定时器机制的实际应用。The Big Guy本关涉及创建一个自动机制来维持玩家存活逐渐提升其力量与生命值直到战胜足够多的敌人。每帧游戏都会检查玩家生命值是否偏低若是则提升生命值、体型与攻击伤害。过关要求学生用player.on和game.on挂接已有事件处理器并在onUpdateGame内调用checkTimers与checkGoals——checkTimers负责按game.time周期性地触发强化逻辑checkGoals负责在达标时更新目标状态。Quantum Jump本关的焦点是学生现在可以直接设置单位的位置。这与之前的移动方式截然不同moveXY、moveLeft等动作会让单位在多帧内逐渐移动且受障碍物阻挡而直接设置 x 或 y 坐标单位会瞬间移动到指定位置。这既可用于一次性的“传送”行为也可用于让单位遵循自定义物理模型的精细动画。本关演示的是传送式行为。解法设置第二波食人魔ogre从屏幕底部瞬间移动到顶部——每当食人魔到达屏幕底部y 为 0就把其 y 设为 68屏幕顶部。这正是前文“资源复用”的实际例子从玩家视角看是不同的食人魔在上下移动但游戏始终复用的是同一个食人魔“资源”。## This controls scout behavior. def onUpdateScout(event): unit event.target # Scouts always move down: unit.moveXY(unit.pos.x, unit.pos.y - 5) # If unit.pos.y is less than 0: if unit.pos.y 0: # Set its pos.y property to 68: unit.pos.y 68同时设置玩家在碰到栅栏时越过栅栏def onCollide(event): unit event.target other event.other # If other.type is munchkin or scout. if other.type munchkin or other.type scout: # The enemys stomped the player. unit.defeat() # If other.type is fence: if other.type fence: # Use unit.pos.x to change the player x coordinate. # Add 6 to the players x position: unit.pos.x 6这里同时用到了unit.defeat()击败/淘汰单位与位置直接运算unit.pos.x 6说明碰撞事件处理器中可以混合高层与低层操作。Looping Forest在引入update事件后本模块转向讲授设置位置。学生必须编写代码防止食人魔离开指定区域若食人魔离得太远游戏会将其重新定位到靠近地图中心的位置。过关需完成onUpdate逻辑。森林边界为x 10、x 70、y 10、y 58。已提供“从左侧边界传送到地图右侧”的逻辑其余 if 语句需要把单位从右到左、从上到下、从下到上传送。最终效果单位到达任一界边时“跳”到对面。注意必须把单位传送到边界内侧的位置否则每次 update 都会再次触发传送单位会来回跳动讨论问答问The Big Guy 和 The Rule of the Square 中的定时器如何工作在之前的关卡中已见过这类定时器在 game 上设置一个属性记录“下次该做什么的时刻”然后游戏持续检查game.time是否大于等于该值条件满足就触发动作并更新该值。用伪代码走一遍game.triggerTime 4 at regular intervals: if game.time game.triggerTime: doSomething() game.triggerTime 4这样doSomething在game.time为 4、8、12……时每 4 秒触发一次。问如果省略game.triggerTime递增那行会怎样doSomething会在每次游戏更新时都被调用——每秒可达几十次更新game.triggerTime对限制事件触发频率至关重要。问moveXY与设置 pos 有何区别moveXY是游戏内置的若干“动作actions”之一。调用moveXY、attack、moveLeft等动作时游戏引擎会基于单位速度、加速度、障碍物等因素在多帧内逐步更新单位位置——这是方便的高层函数适合“我想要这种移动行为”的场景。而设置pos是低层操作它直接、立即地设置单位该帧的位置不参考任何其它状态。例如可以把单位移到moveXY设计上不允许进入的森林里。模块二动画Animations动画原理入门开始关卡前带全班做一些“代码中的动画如何工作”的头脑练习。首先回顾上一模块的结论设置位置时单位瞬间移动到该位置。然后讨论电影中的动画原理——**翻页书flipbook**是绝佳例子一串图像快速连续展示就形成动画。黏土动画中操作者不断“调整模型→拍一张照”地往复。计算机动画的工作原理与此相同把update命令与设置位置组合起来就能制作各种动画与单位行为。此时可以讨论游戏中的各种视觉行为并草拟这些游戏背后的逻辑。讨论游戏中的运动类型即“游戏物理”。游戏常建模重力、动量、摩擦的各种组合。目标是找出几种明显不同的运动方式或观察具体游戏并描述其大致运动规律。示例Asteroids小行星飞船以恒定速度穿越屏幕用推进器改变速度与方向平台游戏角色受重力下落落地停止落到有弹性的表面则反向速度。NES 上的《超级马里奥兄弟 2》及后续马里奥系列体现细微物理差异马里奥、路易吉、奇诺比奥、碧姬公主有不同的跑跳行为Pong / Breakout乒乓/打砖块球以恒定速度反弹碰到表面就反向碰到球拍时方向与速度还会随击球点与球拍移动速度变化。这些行为在代码中长什么样把上述运动类型写成伪代码贴近真正的代码形态恒定速度向右上移动的单位unit.xSpeed 1 unit.ySpeed 1 every frame: unit.pos.x unit.xSpeed unit.pos.y unit.ySpeed受重力影响的单位every frame: decrease unit.ySpeed slightly到达“地面”即反弹的单位every frame: if the unit is below y position 0 reverse the y direction by multiplying it by -1绕中心点 (20, 20)、半径 10 顺时针圆周运动的对象every frame: unit.pos.x 20 sine(game.time) * 10 unit.pos.y 20 cosine(game.time) * 10沿任意路径运动每段路径是在特定时间段内动画化的线段。例如对象先右移再下移if game.time 0 and game.time 1 unit.speedX 1 unit.speedY 0 if game.time 1 unit.speedX 0 unit.speedY 1重点弹跳效果的逐帧分析两个关卡都用到了弹跳效果务必逐帧讲解下面这段代码会发生什么unit.pos.y 20 unit.speed 10 every frame: if unit.pos.y 40: unit.speed * -1 if unit.pos.y 0: unit.speed * -1 unit.pos.y unit.speedunit.pos.y逐帧状态为20 → 30 → 40 → 30 → 20 → 10 → 0 → 10 → 20 ……。原因当unit.pos.y到达 40unit.speed乘以 -1 变为 -10此后每个间隔不再是 10而是 -10单位反向运动到达 0 时速度再次乘以 -1位置重新开始递增。关卡详解Smooth Run学生已掌握update事件与设置位置本关展示如何让单位持续上下、左右移动。**火喷怪fire spewer**演示左右往复移动的动画需要跟踪速度与移动方向。速度是数值表示每帧移动的距离方向是 1 或 -1与速度相乘——速度乘以 -1 后变为向左移动否则向右。update 事件在喷火怪到达某个位置时反转方向。栅栏fence的移动方式与火喷怪类似不过是上下而非左右。玩家需参照火喷怪的动画逻辑补齐栅栏逻辑def onUpdateFence(event): fence event.target # Multiply fenceSpeed and fence.dir to calculate the moving distance and direction. # Assign the result to the variable dist: dist fenceSpeed * fence.dir # Add the value of the dist variable to fence.pos.y: fence.pos.y dist # If the fences y position is less than 10 or greater than 56: if fence.pos.y 56 or fence.pos.y 10: # Multiply fence.dir by -1 and save it: fence.dir * -1加粗行为学生需补充的代码。这里把“速度 × 方向 每帧位移”和“到达边界后dir * -1”两个惯用法组合成往返动画是后续一切动画的基础模式。Looney Gems本关把动画推进到下一层同时组合 x 与 y 移动演示对角线运动。同样使用dir属性但现在dir可以设为 0——该轴上完全不动。过关需完成onUpdate事件函数先用给定的diffX与diffY更新物品位置然后在宝石到达关卡顶部或底部时反转item.dirY。与 Smooth Run 相同地图“边缘”为 y 10 与 y 58。弹跳行为的实现参照上文讨论。讨论问还能用 update 事件与设置位置创作哪些其它动画可回顾前文讨论中列举的例子并展开。问还有哪些属性可以随时间调整生命值如单位受中毒影响或生命恢复缩放Scale单位随时间逐渐变大或变小移动速度如随单位经过的表面类型而变化。模块三Runner 跑酷项目教程本系列关卡带学生一步步构建一个横版卷轴街机游戏帮助他们看到并把上述概念整合进更复杂的项目也为最终项目积累迭代式开发经验。整个系列对应前文讨论的“资源复用”栅栏与森林瓦片循环使用与“帧级位置覆盖”食人魔行为两大机制。Runner Part 1本关提供跑酷游戏的基本结构。过关需完成onUpdateStatic函数销毁超出关卡左侧x -4的栅栏并复用森林瓦片——可回顾资源复用讨论与 Quantum Jump 关卡中的同类行为。学生还应通读其余提供的代码spawnRandomY创建栅栏spawnFences创建若干栅栏并随时间推移增加数量onCollide碰撞时栅栏击败玩家checkPlayer把玩家锁定在一个位置checkTimers周期性调用spawnFences。Runner Part 2本关引入宝石、最高分top score保存与无限玩法。宝石逻辑与此前关卡类似玩家收集宝石的 collect 事件把分数加到game.score。topScore这一 game 属性在游戏启动时从数据库中取出游戏结束时用setTopScore更新。onDefeatPlayer方法学生完成需要特别关注。CodeCombat 游戏系统的规则是目标goals完成时游戏即结束无论成功还是失败。但本关允许游戏无限持续——只要玩家不撞栅栏就能一直玩下去。游戏在玩家存活满 20 秒时“胜利”但为了允许玩家继续前进该目标在玩家被击败之前不标记为完成并在玩家被击败时依据game.time标记为成功或失败——这就是为什么要在玩家的defeat事件处理器里手动设置目标的成功/失败。仓库中可以看到这套目标状态机制的实现app/lib/world/GoalManager.coffee维护goalStates接收事件并按目标类型killed / arrived / left / collected 等更新状态见 app/lib/world/GoalManager.coffee。分数持久化的底层能力由app/models/LevelSession.js提供updateKeyValueDb把keyValueDb写入会话saveKeyValueDb在值变化时调用api.levelSessions.setKeyValue或incrementKeyValue增量同步见 app/models/LevelSession.jstopScore正是这类跨关卡持久化的键值数据。Runner Part 3本关加入食人魔。代码自带onDefeatOgre击败食人魔加分。学生需完成两个函数onUpdateOgre与spawnOgre。spawnOgre需要为生成的食人魔挂接update与defeat事件onUpdateOgre更复杂也更值得剖析详见下文讨论。Runner Part 4本关与 Part 3 类似区别在于把各种数值重构到关卡顶部作为变量且这些数值被调成“有挑战但并非不可能”的难度。像 Game of Coins 关卡一样鼓励学生实验变量先对“改动某个值会如何影响游戏”提出假设再实际验证。学生至少要让数值调到他们有可能获胜的程度。小组活动让学生分组各自把关卡调成不同难度——一组做简单、一组中等、一组困难、一组不可能——然后各组演示并讲解自己构建的游戏。讨论问onUpdateOgre为何这样构造该函数是CodeCombat 引擎逻辑与学生逻辑的混合体。由于食人魔的behavior属性设为AttacksNearest引擎会让食人魔向玩家移动、靠近后攻击。但本游戏想让食人魔以给定速度向右移动到特定点x 18然后不再右移。因此这个 update 函数在引擎已把食人魔沿上下左右朝玩家移动一段距离后运行用基于独立跟踪更新的unit.baseX属性计算出的值覆盖引擎设置的unit.pos.x。例如单个“帧”内单位状态的变化起始位置{ x: 5, y: 5, baseX: 5 }引擎把单位向玩家略移后{ x: 6, y: 6, baseX: 5 }自定义onUpdateOgre运行后{ x: 5.03, y: 6, baseX: 5.03 }引擎对 y 的改动保留x 的改动则被覆盖——这正是“低层设置位置可以覆写高层动作结果”的最直观案例也解释了为什么 Runner 系列与 Quantum Jump、Looping Forest 共享同一套底层机制。问如果onUpdateOgre对所有食人魔运行而不只是存活/死亡的会怎样先让学生写下他们的推测再把if unit.health 0改成if unit.health -100或if True验证。运行时会发现食人魔不再“落”向左侧而是能一直跟上玩家模块四Game Development 3 Project最终项目与 Game Development 2 一样让学生设计并迭代式构建自己的项目。GD3 提供的底层工具update事件、直接设置位置、逐帧动画、资源复用、无限目标与持久化分数足以支撑学生实现远超街机模板的自定义玩法。建议学生沿用 Runner 系列的迭代流程先搭最小可玩骨架再逐帧加入机制每步都运行验证最后分享演示。教学要点速查游戏循环三要素更新状态、绘制、等待暂停变体只跳过更新丢帧变体只跳过绘制FPS 计算示例30 FPS 目标下若更新绘制每帧超时 7ms游戏整体会慢约 23%——用这个例子让学生直观理解“丢帧”的必要性定时器惯用法if game.time game.triggerTime: doSomething(); game.triggerTime 4漏掉递增行会让动作每帧触发数十次moveXY 与设置 pos 的本质区别前者是多帧、受物理与障碍影响的“动作”后者是单帧、立即、无视其它状态的“直接赋值”二者可互相覆盖动画三件套dir方向 ±1 或 0、speed/dist每帧位移、边界检查后dir * -1往返弹跳逐帧推演20 → 30 → 40 → 30 → 20 → 10 → 0 → 10 → 20帮助学生建立“逐帧手推程序”的调试习惯资源复用通过传送位置复用单位对象Quantum Jump、通过销毁/重放边界外对象复用瓦片Runner Part 1都是在 GC 语言里节省算力的通用手段持久化topScore走会话级keyValueDb增量同步到后端跨局保存成绩app/models/LevelSession.js。以上内容均可在仓库中找到对应实现渲染帧更新见 app/lib/surface/Lank.coffeeFPS 统计见 app/lib/surface/DebugDisplay.coffee模拟帧率与世界序列化见 app/lib/world/world.coffee目标状态机见 app/lib/world/GoalManager.coffee。教师可将本指南与上述源码结合使用为学生提供从“玩法现象”到“引擎实现”的完整学习链路。赞分享游戏开发教育前端后端【免费下载链接】codecombatGame for learning how to code.项目地址https://gitcode.com/gh_mirrors/co/codecombat点击查看免费下载相关推荐3步掌握Keyviz让键盘操作可视化提升工作效率的完整指南3步掌握Keyviz让键盘操作可视化提升工作效率的完整指南 你是否在录制教程时观众总是问刚才按了什么快捷键或者远程协作时同事看不清你的操作步骤K游戏开发教育前端后端Klipper 0.13 固件升级实操3 条路径怎么选3 个新功能怎么用Klipper 0.13 固件升级实操3 条路径怎么选3 个新功能怎么用 上个月我按习惯把 Klipper 升到 0.13.0第一次 BED_MESH_C游戏开发教育前端后端LMCache KV 缓存配置完全指南5 行起步3 个真实场景带你搞定共享与分离式预填充LMCache KV 缓存配置完全指南5 行起步3 个真实场景带你搞定共享与分离式预填充 LMCache 是一个可以直接挂在 vLLM 等推理引擎上的高性能游戏开发教育前端后端上一篇Python天文计算终极指南用Skyfield精准追踪星体位置下一篇终极量化回测框架backtesting.py的完整实战指南与深度解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考