HTML 5 Shoot ’em Up in an Afternoon
Free

HTML 5 Shoot ’em Up in an Afternoon

By Bryan Bibat
Free
Book Description

Learn (or teach) the basics of Game Programming with this free Phaser tutorial.

This book was a result of three things that happened to occur around the same time:

First was the problem that came up with our HTML5 workshop. The original lecturer bailed at the last minute and we had problems with finding a replacement. We even considered the worst case, cutting out the hands-on portion leaving us with a morning “workshop” consisting only of talks from people in the local gaming industry.

Coincidentally, I was playing around with Phaser a few weeks before the event. While I am not a game developer, I had just enough knowledge to make a simple workshop to introduce basic game concepts via the said HTML5 game framework. In the end I volunteered to take over the workshop less than four days before the actual event.

Normally I would have prepared a hundred or so slides and go through them during the workshop. But earlier that week I had the rare opportunity to talk to the first person who gave me advice when I started out teaching, and one of the things we talked about the not-so-recent trend of lazy college professors making only slides leaving a big gap between them and textbooks. This convinced me to switch things up with the workshop – instead of giving the participants a link to SpeakerDeck, I would point them to the book.

It took a few sleepless nights to write the original 36-page workbook, but it was worth it: I had a much easier time conducting the workshop than I would have if I went with slides.

Purchasing the book is optional, but would be greatly appreciated as purchases will allow me to spend more time writing books like these. A bonus video is included with purchases.

Table of Contents
  • Table of Contents
  • Preface
    • License
  • Introduction
    • Who is this book for?
  • Morning: Preparing for the Afternoon
    • Introduce them to Shoot `em Ups
    • Technical Requirements: JavaScript and Math
    • Development Environment Setup
    • Other Suggested Prior Reading
    • Video Walkthrough
  • Afternoon 0: Overview of the Starting Code
  • Afternoon 1: Sprites, the Game Loop, and Basic Physics
    • Sprite Basics
    • The Game Loop
    • Apply Physics
  • Afternoon 2: Player Actions
    • Keyboard Movement
    • Mouse/Touch Movement
    • Firing Bullets
  • Afternoon 3: Object Groups
    • Convert Bullets to Sprite Group
    • Enemy Sprite Group
    • Player Death
    • Convert Explosions to Sprite Group
  • Intermission: Refactoring
    • Refactoring Functions
    • Reducing Hard-coded Values
  • Afternoon 4: Health, Score, and Win/Lose Conditions
    • Enemy Health
    • Player Score
    • Player Lives
    • Win/Lose Conditions, Go back to Menu
  • Afternoon 5: Expanding the Game
    • Harder Enemy
    • Power-up
    • Boss Battle
    • Sound Effects
  • Afternoon 6: Wrapping Up
    • Restore original game flow
    • Sharing your game
  • Evening: What Next?
    • Challenges
    • What we didn't cover
  • Appendix A: Environment Setup Tutorials
    • Basic Setup
    • Advanced Setup
    • Cloud IDE Setup
  • Appendix B: Expected Code Per Chapter
    You May Also Like
    Also Available On
    Categories
    Curated Lists