3

I am playing with the HTML5 canvas element, using JS to draw some rectangles on it and then move them around, changing size and colors, etc. Currently I use mostly native JS, with jQuery for the jCanvas plugin to draw the shapes on the canvas. This is all working nicely, but I think the code could be improved.

Currently I store all rectangle properties in regular variables, like:

block1Height = 50;
block1Width = 50;
block1Color = '#000000';
block1X = 200;
block1Y = 100;
block2Height = 50;
block2Width = 50;
etc..

I am wondering whether it would be possible to just create instances of a 'block'-object. So I would have: an object called 'block', with properties 'height', 'width', 'color', etc. And then every time I create an instance of that object it has the default block properties.

The same goes for functions, I would like to do something like:

$block1.moveX(-100);

Is this possible in JS? What would be the correct way to do this?

Improve this question

2 Answers 2

Reset to default
4

You could create a Block constructor function, something like this:

var Block = function(width, height) {
    this.width = width || 50; //50 is the default
    this.height = height || 50; //50 is the default
    this.moveX = function(x) {
        console.log("Moving by " + x);
    }
};

You can then create new instances of the Block "class" with the new operator:

var block1 = new Block();
block1.moveX(100); //Will print "Moving by 100"

The above would create a new Block instance with a width and height of 50 (because we didn't pass in a width or height argument). To create a bigger Block you could do:

var block2 = new Block(100, 100);

Note that (as stated in the comments) using this.moveX = function is not hugely efficient. It means every instance of Block has to have a copy of the moveX function in memory. You could improve this by adding the moveX method to the prototype:

Block.prototype.moveX = function(x) {
    console.log("Moving by " + x);
}

This way, none of the Block instances have a copy of the method. When you call it, the instance itself is examined but no property with the name moveX is found, so the prototype is looked at instead. There is one copy of the method shared between all instances.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

@Raynos - Could you expand on that please? Why is it inefficient? What would you suggest as an alternative, Block.prototype.moveX?
Is it inefficient because every instance of Block will have to have a copy of the method in memory, whereas by declaring it as a method of the prototype, they all share one?
@JamesAllardice correct. One should avoid having methods as own properties when you can inherit methods from the prototype
-2

yes in javascript you can create json object ex:- 

var b={
    blockheight:100,
    blockwidth:100,
    moveX:function(posx){
    //code goes here
    }
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.