HTML5header


HTML5 Periscope

A simple game rendered with javascript and the HTML5 canvas.

July 11, 2011

In the thousands of hours I have written code in all kinds of languages I never tried to write a simple computer game. It's fun and you learn a lot.

The game to the right is a modern version of "ducks in a gallery" using the HTML5 canvas 2D element. For this simple game I had to find out what a modern day pirate ship looks like. Then I found a video of a periscope view from a surfaced ship. The background came from a website that offers free downloads of wallpaper graphics.

The javascript context object has a very useful function for dynamically repositioning and resizing any graphic, anywhere on the canvas:

context.drawImage(image, image_x, image_y, image_w, image_h, canvas_x, canvas_y, canvas_w, canvas_h)

With a little math it is easy to get things moving in a non linear manner. Determining the relative position of objects moving in different directions however, can be a bit of a challenge.

Javascript appears to be sufficiently fast enough to handle this level of activity.

It is my opinion that in the USA we tend to spend to much time blaming teachers, parents, students and administrators for our declining educational results.

A more rational approach might be to recognise that perhaps the real problem is that we have a 19th century educational process in a 21st century multimedia world.

Many students leave their papers and pencils in the classroom and go home to their laptop computers, iPads and IPhones for the rest of the day.

It is similar to the medical profession where people fill out tons of paper forms in the doctors office which are then filled in cardboard folders. Later they return to work to an office filled with computers and advanced information systems.