View Full Version : How to make instance of complex object? Prototype?

01-05-2012, 05:50 PM
In an html5 game using javascript in notepad. So far I've been using just 1 of each type of object. When you kill a monster, it's quickly moved off the canvas to -1000x, then when it's respawned it's moved back to a spawn point. Same for projectiles, treasure chests, and images representing buildings.

Each object has a sprite sheet, with frame ranges defined and when it moves it loops through a set of frames on the image. It also has some if statements to check for collisions like this:
if (hero.x <= (monster.x + 32) && monster.x <= (hero.x + 32) && hero.y <= (monster.y + 32) && monster.y <= (hero.y + 32) ) {playerHit(0);}
Now I want to populate trees on the map from 1 tree, and detect collisions with the player so he can't walk through them. My full template for populating the single tree is:

var treeReady = false; //check if image is loaded before trying to draw
var treeImage = new Image();
treeImage.onload = function () {
treeReady = true;
treeImage.src = "images/game/tree.png";

var tree = { //access objects position with tree.x and tree.y
//inside reset() function
tree.x=(Math.random() * (canvas.width - 64)); //place it randomly
tree.y=(Math.random() * (canvas.height - 64)); //place it randomly

//inside update function
if (hero.x <= (tree.x + 32) && tree.x <= (hero.x + 32) && hero.y <= (tree.y + 120) && tree.y <= (hero.y +120) ) {
//stop hero's movement

//inside render function
if (treeReady) {
ctx.drawImage(treeImage, LsrcX, LsrcY, 48, 48, tree.x, tree.y, 48, 48);

That will draw the single tree, place it randomly in the range defined, and the player won't be able to walk through it.

Can anyone help me understand how to clone it? Like, do I have to clone all the variables in that drawImage() part in addition to tree.x and tree.y??

tree.prototype.x and .y to use???? Will that clone the if statement for collision detection with the name of the instance of the object?? Like this.tree.x? Automatically? if I clone the top level of the object?

It gets even crazier with the moving monsters that are cycling sprite animations and shooting projectiles at the cosine/sin of the tangent between it and the player. Will an instance of the main monster object clone all the projectile/movement variables, health bar, etc. ????

Right now I just have 1 of each type of monster, it would be awesome to be able to spawn 2-3 at a spawn without having to make 3 new, lengthy, repetitive, monster1, monster2, monsterN, objects based off the same image and code. With 7 spawn points, 3 monsters each would be 21 monsters which is around 21+ pages of code and hundreds of variables since re-using the projectile/sprite shuffling code/variables would break all 3, without renaming each variable.

The template is the same for the tree code as the mobs so if I can figure out how to instance it I should be golden..........I thought prototype was a plugin like jquery until a couple weeks ago hehe until I saw it as an extension in dreamweaver and looked it up. But the examples are very basic in it's usage I just need a clarified answer for my particular situation.....if anyone can help.

Thanks in advance!