构建HTML5画布/JS游戏

Question

我是HTML5 5/画布/游戏编程的新手，但在读了几本书之后，我一直在修改它。我想我对事情的发展有很好的了解。这个问题提出了几个较小的问题，但总的来说基本上是一个“结构性方法”问题。我没有期待详细的答复，但希望这里和那里的小指针:)这里是一个链接到一个非滚动，目前相当无聊的超级马里奥世界。

超级马里奥世界测试

注意:控件是左/右，空格键要跳转。在我刚刚学习的时候，这只是火狐的设置。

我在这一点上做错什么了吗？

目前，我只关注马里奥如何奔跑和跳跃，并认为我已经把它写得相当好。硬币盒不做任何事情，背景只是一个图像加载的外观。这是我的方法，如果有什么问题，请告诉我：

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

向前迈进：

现在我已经设置好了Mario的移动方式(我认为还有几件小事情我可能会做，比如快速上升/下降和射击火球)。我想我可以搞清楚这一点，但当涉及到可视化以下内容时，以及HTML5 5/画布如何轻松地处理这些问题时，我真的不知所措：

• 滚动背景(我尝试设置地砖和使用屏幕包装，但这似乎造成了许多不平衡的问题，因为我是在相反的方向移动瓷砖。不幸的是，由于我试图解释加速，这就打乱了计数，并造成了地面的空隙。我放弃了这个想法。帆布下面有一个大背景图像的DIV会是最好的解决方案吗？
• 敌人:我是否会以同样的方式制造敌人，并在每一帧中运行一个循环来检测每一个敌人的碰撞？
• 背景框:我试图让马里奥站在背景的盒子上，但我不知道如何处理这个问题。我目前已经为Mario在画布上设置了边界，我是否继续扩展这些条件以根据框设置不同的边界？我可以看到，有几个盒子在屏幕上，这样做会变得有点疯狂，特别是如果我要做同样的打击测试敌人？我知道我漏掉了一些东西..。
• 水平运动:这在某种程度上是相关的。当按下右键时，基本上级别中的所有东西都需要向左移动。在每一个动画画面中，我是否需要追踪所有能接触到马里奥的东西的位置(对他来说是盒子，让他与敌人碰撞)？这看起来会变得低效吗？

感谢大家！我将用结果/解决方案来更新这一点:)

Answer 1

哇，好吧。我真的很喜欢你的问题，因为你显然在这方面做了很多思考，但部分原因是因为你的问题非常宽泛，而且对话性很强。你最好找个论坛问这个问题。

...That说的是，我将回答我有资格的几点，没有特别的顺序。:)

• 水平运动:这是一种奇怪的(阅读:低效)的方法。我不会根据屏幕上的位置进行任何计算:跟踪一个标准的、与相机无关的坐标集，用于您级别中的所有内容，并更新匹配的视觉效果。这将阻止你遇到一些奇怪的小问题，在这些问题上，框架会影响到你所能和不能通过的东西，或者导致更慢的计算机让马里奥通过敌人而不被破坏。以这种方式跟踪位置会顺便解决你的许多其他问题。
• 您绝对应该将其分解为多个函数。在同一个地方拥有移动代码和呈现代码会让你很不爽，特别是通过与更新/刷新速率进行恶意交互。这将意味着，每次玩家做一个棘手的跳跃，游戏做更多的更新，这将使动画/命中检测/等更不可能是平的。
• 敌人:我建议把这个和其他的东西一起卷进来。对所有的东西做一次命中检测，如果你撞到什么东西，检查一下它是什么。您可以尝试优化这一点，只检查任何给定实体与其本身100像素内的对象，但如果这样做，则需要为每个敌人运行单独的碰撞检测事件。让敌人通过对方会在计算上更便宜。

编辑:我想澄清我关于“水平移动”的第一点。本质上，您不希望做的是，每次相机移动屏幕上的每个实体，或将所有实体位置存储为与摄像机位置的偏移(在这种情况下，每次相机移动时，您仍然必须移动所有的东西)。

您的理想方法是存储您的敌人，块，地形位置的X/Y坐标，是从绝对左上角的水平(在最开始)。为了呈现一个框架，您基本上可以这样做：(伪代码，因为我们讨论的是一种假想的级别格式！)

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;
}

砰，你有所有应该在窗户里的东西。现在，从实体的x位置和ZAP减去相机的x偏移量，就可以在画布上得到它的位置。假装成一个团队，因为事情变得真实了。

你会注意到我不想在Y轴上乱选。这可以通过外推来纠正，我猜你可以处理，因为你已经做了这么多了。这将是必要的，如果你想做任何马里奥风格的垂直探索。

是的，我知道我的伪代码看起来像C#和JavaScript的邪恶之爱。抱歉，晚上11:30我就是这样滚的。;)