tl;dr You can play pong!
Since being little, when playing around building with LEGO or Playmobil, I’ve been fascinated by creating new worlds and adventures. Growing up, one usually switch to play videogames (until having a baby, where you can go back to play with your old toys ). However, playing videogames mostly isn’t about creating or designing experiences, with some exceptions.
Developing games combines some interesting features like:
- providing an interactive experience,
- creating a universe / world / ambient (which can be a mix of artistic work and procedurally generation),
- designing intelligent opponents or other characters
and more, so really at some point I though I had to give it a try. But it also requires some new knowledge.
One of the easiest ways of starting off with a new technology is following a tutorial or a getting started guide. Additionally, nowadays there are other options like online courses (MOOCs) which provide a more engaging learning experience. In this case, I found a free course on Udemy about learning game programming in html5. A couple of comments about Udemy:
- Offline video lessons on the app (with download over wifi). Very useful for me, as I usually watch them while commuting.
- The web in general, and the course in particular, don’t seem to work properly on Chrome, then I just have to fallback to Safari.
Anyway, there is literally nothing to loose, apart of a little time, which is always an investment when learning new things. Let’s go!
Upon finishing the course, you end up having a fully playable version of pong like this one, where you move the left paddle and the computer moves the right paddle, until either of the players reach 3 points to win the game.
The most crucial part of the game is where all the positions are computed:
And then the function that draws all the game elements. Here the important parts are the positioning of both the ball and the players’ paddles, just on the positions we computed earlier in the
You can check the full source or directly play the game. As usual, there is room for improvement, new features to add and explorations on the technology to make the game more interesting, so stay tuned!
P.S.: The author of the course on Udemy has another (paid) course that extends on the free one I took, How to Program Games: Tile Classics in JS for HTML5 Canvas, and taking advantage of a discount I decided to purchase it, so more things to learn, play with and write about!