Who doesn’t like to play games? Teach them HTML5


Recently I have been asked the same question by a number academics..

how to try to make teaching programming interesting?

As we all know one of the key things of learning is it has to be interesting, so simply getting students to use notepad to code isn't interesting and students will become quickly disengaged or simply turn off.

So why not try to make things more interesting and teach them how to program a browser-based game, Key goals are the outcome is cross-platform compatible and also build upon some the skills your students may already have, in terms of web design and may also be really stimulating and of use to them in extra curricula activities so with these factors I am sure they would be really interested in learning more.

So what about HTML5`s functions and/or JavaScript.

Using HTML5 & JavaScript with a bit of CSS you can create some awesome browser based games like a dice game, bouncing balls, slingshot, Quiz’s, Memory challenges, Mazes, Card games and some phenomenal HTML5 games at http://www.canvasdemos.com/

What's great about teaching HTML5

HTML5 simply follows on from the basics of HTML, CSS and JavaScript but also for people with experience with these programming languages it offers so much more and for those with little or no experience with programming languages its something which is easily picked up and understood.

In terms of curricula you can teach canvas element, audio and video implementation, event handling, form input validation and the usage of information storing. These are all new functions in HTML5.

And you can even develop your course curricula as a learning journey.

Week 1. Starting with the basics of HTML and CSS. follow by JavaScript introductions

Week 2. Programming these functions followed by drawing the animation using the canvas element.

Week 3. Using the canvas element,

Week 4. Create the game logics (including the collision engine)

Week 5. Using form input validation and adding some AI such as basic artificial gravity.

Week 6 . You can then progress on basics of JavaScript arrays, CSS and the video elements.

Week 7. You can use HTML5`s local storage API.

Week 8. Develop a game uses and which includes the above and have a mini challenge between the students.

So as a learning exercise you can introduce HTML5, JavaScript , CSS, the canvas element, audio and video implementation, event handling, form input validation, header/footer elements and the usage of information storing.

Therefore ensuring students grasp the basics of HTML5 page formatting, CSS and a lot of JavaScript including event handling and the storage engine which will be appropriate and interesting and they can then go on and make AWESOME Web site.

Comments (0)

Skip to main content