Lately I've experimenting with the new HTML5 features. There are many new tags, and attributes that add new functionality to existing tags. I wouldn't want to get to much into a general preview of these elements, instead I want to focus on single tag:
<canvas>. A canvas element/property frequently appears in high level GUI designing programs or interfaces, it allows to draw custom graphics/primitives on a panel. The HTML5 canvas semantic is similar: it allows drawing graphics on the fly! Yes, no more CSS tricks to get an animation running effectively, now all you need is a browser supporting HTML5 and some basic JS knowledge.
Canvas and 2D graphics usually are connected with games, so after getting familiar with some basic concepts I started implementing a simple game - tetris similar. Here's what I have so far:
The currently implemented mechanics include:
- falling bricks (1 type)
- brick stacking (if one lands on another)
- moving bricks left/right (arrow keys, it may not work via iframe)
The current code is available at
http://boty.vipserv.org/tetris/tetris/tetris.html
Feel free to have a peek at the code, it's far from being tidy - this was just a fast canvas experiment.
The most popular browsers support HTML5, so I don't see any disadvantages in using it in day to day programming.
~KR
No comments:
Post a Comment