I'm currently trying to learn how to make HTML5 Canvas games with JavaScript. I would like to use object oriented JavaScript to manage the elements of the game, but i'm having trouble. I've done a lot of research already, but there seems to be a million ways of doing everything and no one source has been able to provide me with the information I think I need in order to get the result I think I want. More specifically I'm having trouble utilizing object prototypes. I've started out by creating the canvas in my code like so

var body = document.getElementsByTagName("body")[0];
var canvas = document.createElement('canvas');

My thought process has lead me to thinking that I should make an object out of this so I can use this dynamically later on if needed. So i've implemented it like so.

var gamearea = function(){
this.generate = function(){
  var body = document.getElementsByTagName("body")[0];
  var canvas = document.createElement('canvas');

I know that I will probably need multiple contexts of the canvas element going forward, so I'm thinking that I should create a prototype for this like so.

var context = function() {
  return canvas.getContext('2d');

My thinking is that I can then ceate the objects for the context I need by instating them with there prototypes like so.

var background = Object.create(context);
var foreground = Object.create(context);

But in order to assign IDs to these objects so I can reference them for drawing on later, I need to assign IDs to them. I found a blog that indicated the proper formatting would mean implementing the following.

var background = Object.create(context, {id: {value: 'background'} });
var foreground = Object.create(context, {id: {value: 'foreground'} });

So my question is this. Is there a way to incorporate more unified formatting to all of this? Id like to establish this prototypes with their id's beforehand like I did with the gamearea object. I want to avoid giving objects properties inline. I am doing this right? Is there a better way? I'm I a complete idiot?

Thank you very much for your time on this guys, I really appreciate it. :)

  • \$\begingroup\$ Your question is about javascript usage and style. Even if it were game-specific (it's not), this would be an opinion-based question because there is no correct answer. If you want to use the language in a certain way, feel free, but this site is not a good place to solicit style opinion. You might find more useful help on the code review SE, but I believe they expect complete and working systems before providing a critique. \$\endgroup\$ – Seth Battin Aug 9 '15 at 0:34

Honestly I think you are creating problems out of nowhere :)

About the gamearea.generate function:

If I understand what you are trying it do, shouldn't it return "canvas" so you have a way to reference it later.

About the context function:

You will only need one context. Read the answer of this question: https://stackoverflow.com/questions/8417318/html-canvas-multiple-getcontext-plotting-at-same-time You only need (and can create) one context per canvas. You have two options: either your code should keep track of the "layers" and draw everything in order (I have a library that does that, I would recommend you have a look at code: http://spritesheet.js.org/), or create many canvas, each one with its context, and draw one layer in each one.

Also, I think you may not understand protypical-inheritance and JS "constructors" completely. Object.create(context); would only return a function that inherits from context, to get a context you only need to call it: ´var background = context();´. Also, it would return the same context on each call, you would need to specify the canvas as a parameter to make it reusable.

About the ids:

I think you are inventing a very complicated way to do it. If I'm right, you want to test if

x.id.value === "whatever"

I think you should consider: what is x? x would be the background variable, so... you already know that this is the background. Instead of storing the id inside the object, do it the other way around: link the reference to the object to the value. From example, you could create an object and use it as a hash table:

var layers={};
//Store the contexts
//Retrieve a context by its id
function getContext(id) {
  Return layers[id];
getContext("background");//Would return somecontext

I think your problem is not the canvas and context itself, but some lack of JavaScript basic knowledge and design patterns. I would recommend to you reading a good JS book like "JS: The good parts" or read some real-world code (not just DOM manipulation, real application code) and have a look at the design patterns used :)


Not the answer you're looking for? Browse other questions tagged or ask your own question.