框架

Question

（我正在尝试制作一个基本的太空侵略者游戏）我对编码非常陌生，因此这可能是一团糟，但是，我正在使用gameloop。其中之一是移动英雄，一个是移动导弹，然后将其引出。但是，我似乎无法拆分它们。我想将它们拆分，以便可以更改setTimeout，但它不想拆分。

试图通过制作一个gameloop_1（）;来拆分它们，但这不会移动导弹……太……我迷路了

var missiles = [];

function drawMissiles() {
document.getElementById('missiles').innerHTML = ""
    for (var i = 0; i < missiles.length; i++) {
        document.getElementById('missiles').innerHTML += `<div 
class='missile1' style='left:${missiles[i].left}px; 
top:${missiles[i].top}px'></div>`;
    }
}
function moveMissiles() {
    for (var i = 0; i < missiles.length; i++) {
        missiles[i].top = missiles[i].top - 15
    }
}

function gameLoop() {
    setTimeout(gameLoop, 950)
    moveMissiles();
    drawMissiles();
    moveFiende();
    drawFiende();
    collisionDetection();
}

function gameLoop_1() {
    setInterval(gameLoop_1, 100)
    moveMissiles();
    drawMissiles();
}

    gameLoop();
    gameLoop_1();

我说过，将它们分开时会发生什么？导弹然后不会射击。

Answer 1

免责声明：
如果您希望在此处找到特定代码的答案，将感到失望，因此，如果您不打算从头开始或类似的事情，对不起，整个文本。

我认为您误解了游戏循环的目的。

您的代码有些问题，但我会坚持您所提出问题的基础，这也恰恰是每个游戏（游戏循环）的基础。

框架

让我们从框架开始。您可能知道框架是什么。就像是单个时刻在屏幕上绘制的图画。例如，当您观看电影时，实际上实际上是在观看许多非常快速地绘制的图片（帧），这给人一种运动的幻觉（通常每秒30张“图片”）。

游戏循环

游戏循环负责绘制游戏框架，一个接一个地执行功能，方法，更改变量，并根据结果最终在屏幕上绘制游戏中发生的事情。

游戏循环基本上是使游戏中的所有事情都可能发生的原因，就像时间对我们现实生活的意义一样：没有时间过去，就不会有过去，现在或将来，我们将永远陷入单一框架。在游戏上也会发生同样的情况，没有游戏循环，就不会有迭代，也不会有变化或框架更新。

极其基本的游戏结构

知道这一点，您必须做的第一件事就是始终拥有一个“中央”游戏循环，并且永远不要拆分它。始终将其他方法命名为“更新”，并从主游戏循环中调用它们。因此，对于您的代码而言，最正确的结构是（这只是类似于js的伪代码，并非特别是任何语言）：

SpaceInvaders = {
  GameLoop(){
    UpdatePlayer();
    UpdateProjectile();
    UpdateEnemies();

    setTimeout(GameLoop, 16) // to call the loop each 16ms, thus giving you 60fps
  }

  UpdatePlayer(){
    // do stuff like move the player and fire
  }

  UpdateProjectile(){
    // do stuff like move the projectile and check if it hitted something
  }

  UpdateEnemies(){
    // do stuff like move the enemies
  }
}


SpaceInvaders.GameLoop();

如果您想更深入地了解Game Loops，请查看此精彩文章，当我开始第一个HTML5画布游戏时，它对我有很大帮助： https://isaacsukin.com/news/2015/01/detailed-explanation-javascript-game-loops-and-timing

您将看到由游戏循环和其他一些有趣的东西引起的硬件补偿问题。

您的情况

现在更好地解释了游戏循环原理，让我们再谈谈您的具体情况。我想到了三件事：

首先，我认为尝试仅使用HTML串联和CSS来制作游戏不会是一个很好的体验，如果您真的想完全自己做，那么我几乎不鼓励您尝试使用 HTML5画布制作游戏。对我来说，学习游戏开发的基础知识是一次很棒的经历。现在回想一下，我看到了我的代码如何糟透（使用香草js，并在所有移动的实体的每一帧上手动补偿了硬件）。如果您想看到这个项目完成： https://github.com/diguifi/littlejsworld

第二，您不使用对象，这会使代码在开发的后期变得非常混乱，并且很难使用（即使只是空间侵略者）。我的意思是使游戏对象化，例如：代替使用松散的“ drawMissiles”和“ moveMissiles”方法，您应该有一个名为“ Missile”的对象和另一个名为“ Player”的对象。导弹将具有此类方法（“绘制”和“移动”，可通过“ Missile.draw（）”访问），而播放器将具有导弹列表（这只是示例，您必须对游戏中的所有内容使用对象，以便拥有一个设计合理的项目。

第三，在我看来，将div连接到DOM中元素的 innerHtml 上并不是一件好事，这非常昂贵，丑陋且耗时。

我的建议

如果您想将此游戏作为学习游戏开发基础的练习，我认为您应该从头开始，仅使用canvas元素，并将代码工作集中在javascript上，而不用搞乱html元素来创建游戏游戏。有很多文章和文档可以帮助您完成此任务，例如我提到的有关游戏循环的文章和文档。

如果您的目标只是制作游戏，而不必了解基本问题，则应尝试使用游戏引擎，例如：
-Phaser：使用js编写代码，而无需担心游戏循环管理和许多其他基本内容。
-Unity：使用C＃编写代码，但不需要太多代码
-Game Maker Studio：无需编码，只需基本的编程逻辑
-构造3：与Game Maker相同，也许更容易

遇到游戏循环问题

1 个答案:

框架

游戏循环

极其基本的游戏结构

您的情况

我的建议