Level 2: HTML and JavaScript Programming - Space Invaders

Welcome!  This set of lessons will help you get some practice using JavaScript, HTML, and CSS.  These lessons assume that you've coded at least a bit of HTML, CSS, and JavaScript, and that you know what variables, functions, and objects are.  If any of these are unfamiliar, you can learn them easily by checking out the Tic-Tac-Toe game here.

These lessons are meant for beginners; they allow a budding new developer to build a simple (but playable) space invaders game in HTML and Javascript. 

Each lesson takes just a few minutes; the entire program is about an hour long.  The only software required is a browser (I recommend Google Chrome) and a Text Editor (I recommend TextWrangler on a Mac and Notepad++ on Windows).  If you're on a Linux system, you probably already have a great one.

I'd recommend that as you start coding, you experiment.  What happens if this variable is changed slightly?  What happens if these statements are rearranged?  Experimentation is key to learning, and you should convince yourself about the way code works by trying a few different things.  It can really help you to understand what's happening.

The best way to learn how to write code is to start writing code!  Don't be afraid to pause the video, write things out, test it what you've done, and convince yourself that it works before moving on.
  • Lesson 1 is about 7 minutes and introduces HTML, CSS, and JavaScript.
  • Lesson 2 is about 12 minutes and introduces JavaScript events and user interaction.
  • Lesson 3 is about 4 minutes and shows us how to limit the user's movement.
  • Lesson 4 is about 7 minutes and demonstrates how to move sprites around the screen.
  • Lesson 5 is about 8 and a half minutes and introduces enemy sprites.
  • Lesson 6 is about 8 minutes and shows how to detect and respond to collisions between sprites.
  • Lesson 7 is about 6 minutes - here you can learn how to control the game's difficulty.