Javascript 构建HTML5画布/JS游戏

我对HTML5/Canvas/Game编程还不熟悉，但在读了几本书之后，我一直在修补它。我想我对事情的发展有相当好的了解。这个问题问了几个较小的问题，但一般来说，基本上是一个“结构方法”问题。我不希望收到冗长的回复，但希望这里和那里都有小的提示：）这里有一个链接，指向一个非滚动的、目前相当无聊的超级马里奥世界

注意：控件是左/右和空格键，用于跳转。这是目前Firefox的唯一设置，我只是在学习。

---

我在这一点上做错了什么吗？ 目前我只关注马里奥如何奔跑和跳跃，我认为我已经把它降下来了。投币盒没有任何功能，背景只是一个图像，用于外观。这是我的方法，如果有什么完全错误的地方，请告诉我：

• 允许马里奥以2 Y速度跳跃（重力和跳跃变量）
• 允许马里奥以1的速度运行（左或右“摩擦”+加速度）
• 精灵根据按键/向下键使用和定位
• 我不确定这是否正确，但我使用构造函数来构建对象，然后在主动画循环中调用该对象的prototype.draw函数来更新所有变量并重新绘制对象
• 我正在清理每一帧的整个画布
• 我是否应该将其拆分为不仅仅是一个draw函数，比如Mario.move（）
• 我已经设置了一个GroundLevel和一个JumpLevel变量来创建两个游戏平面。JumpLevel的设置允许控制Mario在飞行中能跳多高。这两个地方可以让地面像小山一样上升——保持重力超过马里奥跳跃力的点与地面保持相同的距离
• 为了清晰起见，所有内容都被分割成不同的JS文件，但显然会合并

---

前进： 现在，我已经完成了设置马里奥的移动方式（我想我还可以做一些其他的小事情，比如上下蘑菇和射击火球）。我想我能弄明白，但我真的很迷茫，当涉及到可视化以下内容以及HTML5/Canvas如何轻松处理这一问题时：

• 滚动背景（我曾尝试设置地面瓷砖并使用屏幕包装，但这似乎会导致很多不均匀的问题，因为我将瓷砖向相反方向移动。不幸的是，由于我试图考虑加速度，这会导致计数偏离，并导致地面出现间隙。我放弃了这个想法。是否会在画布下用la俯冲rge背景图像是最好的解决方案吗

• 敌人：我会以同样的方式创建敌人，并在每帧中对每个敌人运行碰撞检测循环吗

• 背景框：我正试图让马里奥站在背景框上，但不确定如何处理。我目前已经设置了马里奥留在画布上的边界，我是否继续扩展这些条件以根据这些框设置不同的边界？我可以看到屏幕上有几个框并正在这样做这种方式会有点疯狂，特别是如果我要对敌人进行同样的命中测试的话？我知道我遗漏了一些东西

• 关卡移动：这有点关联。当按下右键时，关卡中的所有东西基本上都需要向左移动。我是否需要追踪所有可能接触马里奥的东西的位置（他可以站立的盒子和他可以碰撞的敌人）在每个动画帧中？这似乎会变得有点低效

---

谢谢大家！我会用结果/解决方案来更新这个问题：）

哇，好吧。我真的很喜欢你的问题，因为你显然对此做了很多思考，但部分原因是它非常广泛和对话。你最好找个论坛来问这个问题

…话虽如此，我将回答我有资格回答的少数几点，没有特别的顺序。：）

• 水平运动：这是一种奇怪的（低效的）方式。我不会根据屏幕上的位置做任何计算：为你所在级别的所有东西跟踪一组标准的、与相机无关的坐标，并更新视觉效果以匹配。这将阻止你遇到奇怪的琐碎问题，帧速率会影响你能通过和不能通过的，或者导致较慢的计算机让马里奥在敌人中运行而有时不会被损坏。通过这种方式跟踪位置会顺便解决很多其他问题

• 您绝对应该将其拆分为多个函数。将移动代码和渲染代码放在同一个位置会让您很不舒服，尤其是通过恶意地与您的更新/刷新率进行交互。这基本上意味着，每次玩家做一个棘手的跳跃，游戏都会比平时做更多的更新，这将使动画/命中检测/等变得不太可能平衡

• 敌人：我建议把这个和其他东西一起放进去。对所有东西进行一次命中检测，如果你击中了什么东西，检查它是什么。您可以尝试通过仅针对自身100像素范围内的对象检查任何给定实体来优化此操作，但如果您这样做，则需要为每个敌人运行单独的碰撞检测事件。让敌人互相夹击在计算上会更便宜

编辑：我想澄清我关于“水平移动”的第一点。本质上，你不想做的是每次相机移动屏幕上的每个实体，或将所有实体位置存储为与相机位置的偏移量（在这种情况下，你仍然有效

function GetVisible(x,width,level_entities_array) {
  for (i = 0; i < count(level_array); i++){
    if (level_entities_array[i][x] > x && level_entities_array[i][x] < x+width) {
      visible_elements[] = level_entities_array[i][x];
    }
  }
return visible_elements;
}