Tutorial: In-depth Pong Remake with HTML5 + Phaser

programming
1

Hi everyone,

I just wrote my first tutorial on how to remake the classic Pong game in HTML5 and Phaser. It’s composed of 7-parts and I try to go as in-depth as possible to explain every single line of code I use. Here’s the outline of the entire tutorial:

  1. Project Setup
  2. Loading Assets & Adding Sprites
  3. Moving the Ball
  4. Adding the Game Mode
  5. Moving the Paddles & Adding Collisions
  6. Scoring and Resetting
  7. Adding Sounds and Wrapping Up

You can find it here:

http://zekechan.net/getting-started-html5-game-development-pong1/

I’m also planning to write similar game tutorials on other classic games like:

  1. Breakout
  2. Space invaders
  3. Asteroids

If you enjoy the tutorial and would like more I would love to hear your thoughts. Feel free to reply, send me a message, leave a comment on my blog :smile:

2 Likes
2

This is really nicely done. Your steps are pretty clear and the example is compelling :smile:

3

Thanks =)

4

I like the trick of segmenting the paddle to handle the different angles of reflection. Reminds me of integral approximation in calculus.

imgres.png225×225 2.95 KB

gameDiv is the id for the HTML Document Object Model (DOM) where we will insert the canvas element that Phaser creates.

Feels like you’re missing a crucial word here: element. gameDiv isn’t the ID of the model, it’s the ID of the element. It’s also not the id of the model. :trout:

stock-vector-id-ego-and-super-ego-the-three-parts-of-the-psychic-apparatus-in-sigmund-freud-s-structural-270460262.jpg450×264 38.9 KB

Thinking about the design aspects of the article… I think your use of a black background for your code fragments produces too much visual noise and distraction. Compare them with, for example, the relative lack of contrast of the code fragments on this forum. I just wonder what sort of havoc that design might be wreaking on the F-pattern people often employ while reading. Anyway, it seems like the heavy contrast suggests more importance than the more subtle note that I think you’re trying to communicate: that those sections of text correspond to code. See also: squint test.

f_reading_pattern_eyetracking.jpg785×364 63.5 KB

A volume/sound warning might be nice. I wasn’t expecting any noise and the sudden paddle sounds startled me quite a bit.

Overall, I like your idea of explaining pretty close to line-by-line. I like reading that level of detail of people’s thoughts on their programs.

:beer2:

5

Hey krilnon,

Appreciate your feedback.

Feels like you’re missing a crucial word here: element. gameDiv isn’t the ID of the model, it’s the ID of the element. It’s also not the id of the model.

Thanks for pointing that out =) I’ve update it accordingly.

I think your use of a black background for your code fragments produces too much visual noise and distraction.

I certainly agree with you on this and I will get it sorted out by the end of this week.

A volume/sound warning might be nice. I wasn’t expecting any noise and the sudden paddle sounds startled me quite a bit.

Perhaps I should disable the sounds until the user starts playing. Or I could use JS Fiddle so the reader has to click to view the results.

My goal for sharing and writing is also to improve my code and understanding. I’m thankful when I’m told I made a mistake or there are parts that can be improved.