javascript - 构建HTML5 Canvas/JS游戏

Question

我是HTML5/Canvas/Game编程的新手，但是在阅读了几本书之后就一直在研究它。我认为我对事情的发展有一个很好的认识。这个问题提出了几个较小的问题，但总的来说基本上是一个“结构方法”问题。我不希望得到冗长的答复，但希望这里有一些小指头:)这是到非滚动且目前相当无聊的“ super 马里奥世界”的链接。

Super Mario World Test

注:控件为向左/向右和空格键以跳转。目前，这只是针对Firefox的设置，因为我正在学习。

此时我做错了什么吗？

目前，我只关注Mario的奔跑和跳跃方式，并认为我已经确定了它。硬币盒不做任何事情，背景只是一张加载了外观的图像。这是我的方法，如果有什么不对，请通知我:

通过设定2个Y速度(重力和跳跃变量)允许Mario跳跃

允许马里奥以1种速度(左或右“摩擦” +加速度)设定速度运行

根据按键/击键使用和定位 Sprite

我不确定这是否正确，但是我正在使用构造函数来构建对象，然后在主动画循环内调用该对象的prototype.draw函数以更新所有变量并重绘该对象。

我要清除每个帧的整个 Canvas

我是否应该将其拆分成不仅仅是Mario.move()之类的绘制函数？

我已经设置了GroundLevel和JumpLevel变量来创建2个游戏平面。设置JumpLevel可以控制马里奥飞起来的高度。这两个位置将使地面像小山一样上升-保持Gravity在距地面相同距离处覆盖Mario的跳跃力的位置。

为了清楚起见，所有内容都分离到不同的JS文件中，但显然可以合并。

向前进:

现在，我已经完成了Mario的移动方式设置(我认为我可能还会做其他一些小事情，例如向上/向下跳蘑菇和射击火球)。我想我可以弄清楚这一点，但是当涉及到以下内容以及HTML5/Canvas如何轻松处理此问题时，我真的迷失了:

滚动背景(我曾尝试设置地砖并使用屏幕包裹，但这似乎会导致很多不均匀的问题，因为我是将砖向相反方向移动。不幸的是，由于我试图考虑加速度，我放弃了这个主意， Canvas 底下有大背景图像的DIV是最好的解决方案吗？

敌人:我会以相同方式创建敌人并在每个帧中对每个敌人运行一次循环以进行碰撞检测吗？

背景框:我正在尝试让Mario站在背景框内，但不确定如何处理。我目前已经为Mario留出了边界设置，以便继续留在 Canvas 上，是否继续扩展这些条件以根据框设置不同的边界？我可以看到在屏幕上有几个盒子并以这种方式进行操作会变得有些疯狂，特别是如果我要对敌人进行相同的 HitTest ？我知道我在这里错过了一些东西。...

级移动:这有点相关。按下右键后，基本上关卡中的所有内容都需要向左移动。我是否需要在每个动画帧中找出可能碰到Mario的所有物体的所有位置(框让他站立，敌人使其碰撞)？这似乎会导致效率低下吗？

谢谢大家!我将使用结果/解决方案保持更新:)

Answer 1

哇好我真的很喜欢您的问题，因为您显然已经对此进行了很多思考，但部分原因是因为它涉及面广且令人难以置信。您最好找到一个论坛来问这个问题。

......话虽如此，我将以无特殊顺序回答我符合条件的少数要点。 :)

级移动:这是一种奇怪的方法(读作:低效)。我不会根据屏幕上的位置进行任何计算:为关卡中的所有内容跟踪一组规范的，与摄像机无关的坐标，并更新视觉效果以进行匹配。这将阻止您遇到奇怪的小问题，其中帧速率会影响您可以通过和无法通过的内容，或者使速度较慢的计算机让Mario穿越敌人而不会受到损坏。用这种方式跟踪位置会顺便解决许多其他问题。

您绝对应该将其拆分为多个功能。将移动代码和渲染代码放在同一个位置将使您不知所措，特别是通过与更新/刷新率进行恶性互动而尤其如此。从本质上讲，这意味着玩家每次进行一次棘手的跳动时，游戏都会进行比平时更多的更新，这将使动画/击中检测/等等的可能性更低。

敌人:我建议将其与其他所有内容一起使用。对所有事物进行一次命中检测传递，如果您命中某物，请检查一下它是什么。您可以尝试通过仅检查给定实体相对于其自身100像素以内的对象来优化此方法，但是如果以这种方式进行操作，则需要为每个敌人运行单独的碰撞检测事件。让敌人互相夹击会在计算上更便宜。

编辑:我想澄清我关于“水平运动”的第一点。本质上，您 不想要做的是每次在摄像机执行操作时都在屏幕上移动每个实体， 或将所有实体位置存储为相对于摄像机位置的偏移量(在这种情况下，您仍然必须有效地移动所有内容，每次相机移动。)

理想的方法是使用X/Y坐标存储您的敌人，街区，地形位置，这些坐标偏离该级别的绝对左上 Angular (在开始时。)为了渲染框架，您基本上可以这样做:(伪代码，因为我们正在谈论一种假设的级别格式!)

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

景气，您应该把所有东西都放在 window 里了。现在，您从实体的 x位置和ZAP中减去相机的 x偏移量，即可在 Canvas 上找到其位置。构成一个团队，“因为事情成真了。

您会注意到，我不必费心在Y轴上剔除。这可以通过推断来纠正，我想您可以处理，因为您已经做到了这一点。如果您想进行任何Mario风格的垂直探索，这将是必要的。

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