[Jare]

Checked the "No Tears HTML5 Game Development Tutorial" at http://docs.webplatform.org/wiki/tutorials/canvas_notearsgam... and:

- "Because this is a No Tears guide, we'll use jQuery"

- Use setInterval() rather than requestAnimationFrame().

- Questionable class-like implementation.

Granted the original HTML5rocks! post is over a year and a half old, but bad code and bad practices are NOT helping the cause.

[simonsarris]

Yeah this looks awful. No syntax highlighting either, which is odd because its basically automatic these days (rainbow.js or any of a million plugins). It's also surprising that they resorted to a screenshot instead of just putting the playable game on the page.

I think the use of setInterval is fine because it keeps the code very short compared to the requestAnimationFrame shim, but there should definitely be mention of it.

Hopefully I can add my tutorials to this site (which I think are much cleaner) when I'm finally done with my (blocking) larger projects.

[Cushman]

It's a wiki. Why not fix it?

[tedunangst]

Unless the linked article is incorrect, only authorized employees are able to edit it. So like, it's an article, why not read it?

[my bad, it looks like maybe anybody can edit it after registering.]

[Cushman]

I don't see how the red text "Web Platform Docs is an open wiki that anyone can help improve. See the getting started guide[0] to learn more." in the alert box at the top of the page could be more clear.

[0]http://docs.webplatform.org/wiki/WPD:Getting_Started First sentence: "Anyone can contribute to WPD."

[tedunangst]

I only read the article (which implies only employees will be editing the wiki), then went to the wiki itself later.

[yuhong]

Yep, the site says clearly that it is in alpha.

[wwwtyro]

I am not being argumentative when I ask this, I just want more details about this bullet:

> - Questionable class-like implementation.

Can you just lay it all out right here? What is wrong (or suboptimal) with the implementation, what alternatives would you prefer, etc. Everything that is behind that bullet, I want to hear it!

[Jare]

Instead of using prototypes and functions shared among all instances of the same type of object, it uses closures for each instance. The coding style is also questionable, with everything referencing a variable named 'I'.

It works, but in my opinion it is absolutely not a correct way to write code. In any case, OOP and class-style programming in Javascript is a large topic.

[doomslice]

As you suggest, there are several schools of thought about how best to provide class-style programming. By using a closure instead of prototypes, you can have "true" private properties and functions. If you use prototype, you'll need to use a convention to mark something as private and hope the developers respect that (marking it with an underscore is common). In my experience, someone will ignore the convention and then something will break when you change or remove your "private" variable.

[Jare]

If the code was using those or other advantages of the pattern (like easier subclassing, methods already bound to the instance, etc) consistently, it would make sense. As it is, it just does ugly things like using 'I' and 'this' without any thought or pattern I can discern.

[skybrian]

Style is one thing, but if you use closures, you have to be a lot more careful about memory leaks.

[wwwtyro]

Thanks.

> Instead of using prototypes and functions shared among all instances of the same type of object, it uses closures for each instance.

So, is this generally considered a poor practice? I usually only use prototypes and shared functions when I am going to be instantiating the same type of object many times (when doing lots of vector math, for example).

[rmrfrmrf]

I get your point, but you should remember that we all have learned things the "wrong" way for the sake of brevity before we moved on to learning the best way. Despite the flaws, I still think the tutorial is a great introduction to breaking down the steps of creating a game.

[Jare]

Absolutely! I can look back at the set of tutorials that I myself wrote while I was learning JavaScript and HTML5, and there's a bunch of stuff that makes me blush now - including among other things using jQuery and this quote: "Learn jQuery and love it." For the sake of completeness (and cannon fodder for anyone who wants to criticize) it's here: http://www.iguanademos.com/Jare/docs/html5/Lessons/

My concern was perhaps due to expectations about the quality of the site's content, as people were talking about where it stood compared to w3schools and even MDN.

[jonursenbach]

What's wrong with using jQuery?

[Jare]

Nothing in general, but the way it is used for this tutorial adds nothing and obscures some of the topics.

Original jQuery code:

  var canvasElement = $("<canvas width='" + CANVAS_WIDTH + 
                        "' height='" + CANVAS_HEIGHT + "'></canvas>");
  var canvas = canvasElement.get(0).getContext("2d");
  canvasElement.appendTo('body');

'Native' code:

  var canvas = document.createElement("canvas");
  canvas.width = CANVAS_WIDTH;
  canvas.height = CANVAS_HEIGHT;
  var context = canvas.getContext("2d");
  document.body.appendChild(canvas);

Similar misgivings about the use of a jQuery plugin to read the keyboard later in the article.

[Stratoscope]

It's not good jQuery code either.

* The naming convention is terrible. 'canvasElement' sounds like it would be the canvas element, yes? No, it's the canvas jQuery object!

* Use of hard-to-read string concatenation.

* Use of .get(0) - use [0] instead.

And some non-jQuery objections:

* Unfortunate line continuation style that is hard to maintain (What if you change the length of the canvasElement variable name? You have to re-align it!) and falls apart in a proportional font.

* Inconsistent use of single vs. double quotes. I recommend single quotes for JS strings and double quotes for HTML attributes. Do it the other way around if you prefer, but at least pick one and stick with it!

* I'm reading the code out of context, but I'm guessing that CANVAS_WIDTH and CANVAS_HEIGHT are "constants". Why are they being used directly in the code like this? Shouldn't this code be wrapped up in a function that takes those as parameters?

Ignoring that last objection for the moment, I might write the jQuery version like this:

  var $canvas = $('<canvas>'), ctx = $canvas[0].getContext('2d');
  $canvas
      .width(CANVAS_WIDTH)
      .height(CANVAS_HEIGHT)
      .appendTo('body');

You're right, of course, that in this particular example jQuery has little or no advantage over direct DOM manipulation, but if they are going to offer a jQuery example, it ought to at least be a good one.

BTW the $ prefix on a variable containing a jQuery object is a very common practice in jQuery code. It's especially useful when you need both the jQuery object and the corresponding DOM element (assuming a single-element selector like '#foo'). Then you can use $ on the jQuery object and the same name without the $ for the DOM element:

  var $footer = $('#footer'), footer = $footer[0];

[mibbitier]

That jQuery code is so horrible. What about if CANVAS_WIDTH is from an insecure source? Maybe someone sets it to include some of its own <script> tags or other tomfoolery.

HTML shouldn't feature in javascript code IMHO.

[leeoniya]

jQuery, while hugely popular, is not a standard.

[dmorgan]

You might want to lookup the term "de-facto standard":

http://en.wikipedia.org/wiki/De_facto_standard

[leeoniya]

your condescending tone aside, jQuery's API and vendor support is subject to change, especially in the coming months. last i heard, 50% usage also means 50% non-usage. you are also assuming that the target is a web browser, which is what jQuery is meant for. jQuery has no bearing on firefox extension programming, nodejs programming, or upcoming win8 RT and Firefox OS programming.

[dmorgan]

>your condescending tone aside, jQuery's API and vendor support is subject to change, especially in the coming months. last i heard, 50% usage also means 50% non-usage.

I'm afraid the points you make are not gonna help with my condescending tone.

50% usage? That's a HUGE success for a de-facto standard. There are even _official_ standards with much LESS use (SOAP comes to mind). So, the "50% non usage" part means absolutely nothing.

>you are also assuming that the target is a web browser, which is what jQuery is meant for. jQuery has no bearing on firefox extension programming, nodejs programming, or upcoming win8 RT and Firefox OS programming

Even if that was true, it would be irrelevant. Yes, a standard is only a standard is some SPECIFIC field. RS-232 is a standard, but has no bearing on, say, building construction. And those ANSI Screw size standards have no bearing at all in software: http://www.engineersedge.com/screw_threads_chart.htm

That doesn't make them any less standard.

That said, your examples are also false. jQuery can and IS used in nodejs AND in firefox extension programming. And presummably Firefox OS programming. Some examples:

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-scr...

http://stackoverflow.com/questions/491490/how-to-use-jquery-...

[JamisonM]

Shouldn't the point of the "web platform" be that they make de-facto standards like JQuery obsolete? It seems to me that the examples and information on this site should be based on code that will work on all browsers without an intermediary between the code and the software these vendors (mostly) produce.