Introduction | Making a Lunar Lander in JavaScript Introduction 1. Drawing Shapes 2. Animating Shapes 3. Making the Spaceship 4. Forces and Gravity 5. Drawing Stars Published using GitBook A A Serif Sans White Sepia Night Twitter Google Facebook Weibo Instapaper Making a Lunar Lander in JavaScript Making a Lunar Lander in JavaScript In this 5 lesson tutorial, we will make a very simple Lunar Lander game in JavaScript. The tutorial is aimed at students 14-16, as it requires some knowledge of trigonometry, although those parts could be ignored or explained more thoroughly for younger students. It follows the constructionism learning theory and it is intended to help students learn programming and understand Newton's laws by letting them create an environment in which they can apply both. With the concepts learned, students may be able to create other simple games with little help, as the physics is much the same for all of them. A lot of things are simplified in our game—the surface of the moon is made completely flat and the spaceship is a rectangle. This is intentional in order to avoid the problem of collision detection, which is much more complicated for shapes that aren't rectangles. In addition to that, the HTML5 Canvas programming interface is not the most beginner friendly, and creating more complex shapes would've required more material than there is in total in this tutorial. Finally, the lessons are not evenly split—some lessons require more time than others. The lessons are however split in many sections and can easily be interrupted and continued. We think 6 hours is enough to go through the whole material, given that students have basic knowledge of JavaScript. Prerequisites We assume readers are familiar with the basics of JavaScript, which we have taught previously. As in the previous tutorial, the only software needed is: A basic text editor, we recommend Notepad++ if you're using Windows. A web browser, we recommend Google Chrome.
