HTML5 game without Canvas? - html

Question

I'm looking into writing my first HTML5 game, and everything I see talks about Canvas, and then goes on to talk about things like events, game loops, etc.
I'm planning on making a board game, where all the images are laid out on a grid. There doesn't need to be a game loop happening, because everything will just sit there just how it is until the user interacts with the game. And because the images for the board and pieces are laid out on a grid, I could just as easily (as far as I can tell) use tags, laid out with standard CSS, instead of drawing it all into a canvas element.
So is there a reason I should bother with canvas here? Does it make sense to just use "normal webpage" HTML elements to create my game interface?

Answer 1

Canvas is great for making games where things aren't a square, such as isometric or hexagon tile game, or an action based game where the player's sprite needs a wide range of movement, or something like Angry Birds where nothing is really grid based. For other things, it's probably overkill, though it might allow for quicker image processing and effects, due to being hardware accelerated in many modern browsers.
For what you're talking about, a grid based board game, it's perfectly fine to use normal HTML elements. If you're not going to need any fancy graphics effects, then you can safely ignore the canvas tag.
Side note: you could use canvas to make dynamic dice roll animations. It'd spice things up a bit, and give dice rolls an added 'suspense' effect. Or you could use 6 (or 12) animated gifs, just as easily.

Answer 2

There is a significant difference between html5 / css3 and a javascripted canvas tag.
HTML5 / CSS3
In this case you are just using the updated tags to present content, modified by some nifty css properties. You would then use "standard" js (and js frameworks) to control game logic and define user interactions and animations (or use CSS3 transitions to control any animation).
As you know, to create a couple rectangles:
div#red{
background-color:red;
height:50px;
width:50px;
position:relative;
}
div#blue{
background-color:blue;
height:50px;
width:50px;
position:relative;
}
<div id="red"></div>
<div id="blue"></div>
If you wanted to make this (unnecessarily) HTML5, they could be sections instead of divs. CSS3 definitely gives you a lot of nice new presentation features, specifically things like box-shadow.
Canvas
This is a fundamentally different way of working - much closer to something like Flash / Actionscript where content and presentation are defined programmatically, via javascript. For example - this is how you would create a similar couple of rectangles:
var canvas = document.getElementById("canvas");
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
In a similar way, game logic and user interactions are defined. The flexibility and power of this later example cannot be overstated.
I say all of this simply to illustrate the fundamental difference in these two technologies. Now, IF you can do everything you want to do with markup, css and javascript behaviors, then by all means, do so. There is nothing wrong with this.
Working with the canvas tag, on the other hand, may give you increased flexibility and control over your project, allowing, for example, much more complicated and nuanced animations and interactions.
Finally, there are inherent issues with both of these routes, specifically, browser support. If you are targeting only the newest browsers, then I'm not sure it matters, but go back a couple generations and support drops off swiftly.

Answer 3

Then SVG is the right choice for you. Canvas is procedural, SVG is declarative and scalable. http://raphaeljs.com is a great framework.

Answer 4

If you want to create a game without further improvements you can do it without canvas. But using canvas gives you a lot of possibilities. Here are some of them:
All sprites appear in canvas, not in DOM. Adding/removing elements in DOM is quite difficult for browser; especially if you are going to use CSS-animation (for mobile platform). Animation on canvas is much lighter. It comes even more with "requestAnimationFrame" being developed now. It will greatly improve rendering speed.
You can apply different styles on canvas sprites and even change them dynamically. Canvas supports gradients. You can dynamically create sprites using "crop" operation on canvas area.
Scaling of all sprites on canvas can be performed by only one "scale" function. It can be really difficult to scale a game made of large amount of HMTL-tags.
It's easy to implement layer-based game field using canvas. It allows to control game elements with ease.
In our Enterra HTML5Poker - http://demo.enterra-poker.com/html5/index.html we use both canvas and HTML-tags to organize game field. We use common HTML-tags to organize lists, popup windows and interactive elements; and canvas is used to display game table, cards, avatars and other elements.
Using HTML5+JS as base technology for game development allows simple application porting to different mobile platforms. For example iPhone - http://itunes.apple.com/us/app/enterra-poker/id492214596, Android, Windows Phone and others.