Implementing Lander

Now put your newfound Forward-Euler sprite class to good use and build a simple physics-based game where you spelunk around in a moon lander. Why is this a good use of your physics details? Well, unlike other games, where you generally get to control the velocity of your protagonist directly, in Lander-style games, you control only acceleration, meaning that movements need to be planned out in advance. You have three controls: thrust left, thrust right, and thrust up. You need to carefully plan your ascent because if you use too much upward thrust, you’ll watch helplessly as your lander crashes into the ceiling.

Bootstrapping the Game

Create a new file called lander.html and add the code in Listing 17-4 to create the basic outline and setup for your game.

Listing 17-4: lander.html

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Simple Cannon example</title>
    <script src='js/jquery.min.js'></script>
    <script src='js/underscore.js'></script>
    <script src='js/quintus.js'></script>
    <script src='js/quintus_input.js'></script>
    <script src='js/quintus_sprites.js'></script>
    <script src='js/quintus_scenes.js'></script>

    <meta name="viewport" content="width=device-width,user-scalable=no">
    <style>
      body { padding:0px; margin:0px; }
      #quintus { background-color:#CCC; }
    </style>
  </head>
  <body>
    <canvas id='quintus' width='480' height='320'></canvas>
    
    <script>
      var Q = Quintus().include("Input,Sprites,Scenes")
                       .setup()
                       .controls();

    </script>
  </body>
</html>

Get Professional HTML5 Mobile Game Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial