2

I want to make some really simple board games that be played in your browser. AFAIK, there are really only two technologies capable of doing this: HTML5 Canvas, and Flash. I think Flash is on it's way out, so I think I should start learning how to work with the canvas.

My questions:

  1. Are there any other competing technologies/technologies I should consider?
  2. If canvas is the way to go, where can I get started? I already know HTML, JavaScript, and jQuery. I'm mostly interested in learning how to draw basic shapes and detect click events on these shapes.

I'm not overly concerned about supporting old browsers. Obviously I'd like to reach as large an audience as possible, but... I think it's about time people start upgrading their browsers if they want to keep up with the rest of the world, and this isn't going to be the sort of site you [should] visit at work, so corporate policies don't apply.

nwalke
  • 3,170
  • 6
  • 35
  • 60
mpen
  • 272,448
  • 266
  • 850
  • 1,236

4 Answers4

2

To teach myself jQuery a year or two ago I wrote the Memory Game (where you turn over tiles and find matches) in simple HTML, CSS, and jQuery. I think you'll be able to implement a wide variety of board games without even having to write on a canvas.

Larry Lustig
  • 49,320
  • 14
  • 110
  • 160
  • I think I'd have to use images to get nice anti-aliased shapes though, and I'd have to use absolute positioning to get pieces to slide across the board... I'm just not sure it's the cleanest or easiest approach. – mpen Nov 03 '11 at 01:53
  • I was shocked at how easy it was to do an elegant implementation of the Memory Game (a few tens of lines of jQuery-juiced Javascript). "Board games" covers a lot of territory of course, but you can do an awful lot with jQuery. My Memory Game, although the presentation is a 4 by 4 grid of images uses neither absolute positioning nor tables. – Larry Lustig Nov 03 '11 at 01:58
  • Sure, but you probably don't have the cards flipping over, or sliding off the board or anything? I don't need those cute animations to start, but I want that option when I start putting the final touches on. – mpen Nov 03 '11 at 02:00
  • I do have them fading in and out and, when a match is found, fading to 50% and staying revealed. Other animations are just a matter of playing with jQuery to get different effects (there are plenty of jQuery examples around of photo sorters that look just like, for instance, a solitaire game). I also have a slider that controls the speed of game play (how long the images stay visible when you've turned over two of them). As I say, this was a learning project for me, so I didn't push it as far as I could have. – Larry Lustig Nov 03 '11 at 02:06
2

1. You're right, as far as high performance browser games go, Canvas and Flash are your only real options. Well, java applets are technically a possibility too.

SVG is a very bad choice for games. Everything is a DOM object, which introduces a massive amount of overhead that can't be optimized away.

Canvas is probably the most future-proof of all the good options. Flash isn't great on mobile devices and with iOS refusing to use it you get a smaller market if you go that route.

2. I wrote a few tutorials on just that, making selectable, movable shapes on a Canvas. I should probably give them a rewrite sometime soon.

Otherwise it really depends. If you have a specific issue then searching StackOverflow is great, and you should never be afraid to ask questions. Game and performance-related questions are some of the most interesting to answer, because sometimes the solutions are very non-intuitive.

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
  • Your implying Canvas is faster then SVG/DOM. That's just simply wrong. Nothing beats performance compared to hand optimised DOM & CSS – Raynos Nov 03 '11 at 02:35
  • That's simply not true. SVG/DOM elements are impossibly slow compared to Canvas, especailly when you have 1,000 - 100,000 dynamic elements on the screen. Even merely loading 1,000 DOM elements of any kind is pathetic in speed compared to Canvas. See also: http://stackoverflow.com/questions/5882716/html5-canvas-vs-svg-vs-div/5883032#5883032 – Simon Sarris Nov 03 '11 at 02:45
  • 1
    "really simple board games" "1000 - 100,000 dynamic elements". For really simple board games DOM will be faster, for complex systems canvas will be faster. – Raynos Nov 03 '11 at 02:47
  • There are a number of articles on the web detailing other's benchmarks (one example at the end of this comment with source code and graphs from his rnu). Most of the problem is that games demand a large amount of moving objects, many of which do not need their own dom-cruft (don't need t participate in document layout, don't need event handlers, etc), but they get all that extra stuff anyway. http://joeloughton.com/blog/web-applications/svg-vs-canvas-performance/ – Simon Sarris Nov 03 '11 at 02:52
  • I think I agree with Simon on this. I don't think most of those design/display elements *should* even be in the DOM. I guess the trade-off then is that I have to do event handling myself, whereas with SVG, presumably I could just attach a click event to the element I was interested in? Sounds like what I need is canvas + a library on top of handling events. – mpen Nov 03 '11 at 03:19
1

Not sure you even need canvas to do what you're talking about, but there are lots of game engines for HTML5/JS/Canvas that you might want to check out. Here's a good place to start: https://github.com/bebraw/jswiki/wiki/Game-Engines

ddrace
  • 717
  • 3
  • 12
  • Sure, I could build checkers with HTML tables and/or images, and use jQuery to slide some pieces around...but I want some flexible that can scale as my games get more complex. I don't want to have to switch technologies part way through because I picked something too limited, or too difficult to work with. Not really looking for a full-fledged game library either, but I'll take a peak at these. I just want to ability to do some basic graphics. I still have to learn how to do the communication aspect too! – mpen Nov 03 '11 at 01:46
1

Canvas is good, but you should also consider using SVG, possibly with the Raphael library that also have good browser support. If you are planning to do multiplayer games, you should also investigate in WebSockets and maybe the Socket.io library.

Jonas
  • 121,568
  • 97
  • 310
  • 388
  • I made a separate question to discuss to communication between games :) http://stackoverflow.com/questions/7989344/javascript-library-for-push-comet-reverse-ajax-notifications – mpen Nov 03 '11 at 01:39
  • The problem I had with Raphael, when I tried it briefly, is that I couldn't get it to work inline. The coordinate system seemed to be relative to the window, not to the canvas. I don't need to draw all over the screen, just within a little canvas :) – mpen Nov 03 '11 at 01:48