I recently wrote two simple games that can be played using a modern browser and this post summarizes the experience. Screenshots of the two games are provided below and you can go and play the games before reading any further by clicking on the buttons below the screenshots. Note that both games need a keyboard and you need to be on a laptop or desktop to play.
The first game is called PADDLE. In this, you move a rectangular paddle at the bottom of the game screen and prevent a bouncing ball from escaping. Each time you hit the ball with the paddle, you get 10 points and if the ball escapes, you lose a life.
The second game is SPACE RACE. You are an intrepid space explorer looking for a blue star. You drive a flying saucer and catch as many blue stars as you can while dodging a green space monster who wants to eat you. In addition, you need to be careful not to fall into one of the 4 black holes! Here is a screenshot:
In general, the time interval between the original concept or game idea to a basic but working implementation is really small for HTML5. If you are a perfectionist, you may spend a lot of time in getting the details just right. And you will eventually drill down and optimize or improve specific features. For example, in the SPACE RACE game, my flying saucer was originally a circle. Changing it to look like a flying saucer required some work and some changes to the “collision detection” portion in the code.
You can access the complete source code for both games by pointing your browser to the corresponding .js files. Feel free to use this code as a baseline for writing your own games.