O'Reilly logo

Professional HTML5 Mobile Game Development by Pascal Rettig

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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>

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required