CODEWITHSUNDEEP
javascript
user2255691
user2255691

Reputation: 21

Creating and Populating an external Javascript Object

I come from a C#/Java background and I'm trying to go about learning how to make games in HTML5. I ran across a problem that has been boggling my mind, and although normally I would ask a friend, he's been MIA. I feel bad having created an account to ask the community, but I've been searching for the answer to no avail.

So the problem is this... I want to create a gameobject that can hold an instance of a tower. Also, I want to create an array list of towers as a sort of back-end repository. Essentially, I was hoping these would be external js files that I would be able to reference in my main game. I'm not sure if this is possible in js or how this would work.

What I attempted to do was... Create an external JS file and declare a tower object. This is where I got lost. I wanted to make another object that was simply a list of the first type, a towerList. In this external JS file, I was going to populate the list with a bunch of tower properties. Then, in the main file with the canvas element, I was going to iterate through the list and draw out the graphics. I have no idea how to go about this.

function Tower (type, texture, cost, damage, speed, range, health, Xpos, Ypos) 
{
this.type = type;
this.texture = new Image();
this.texture.src = texture;
this.cost = 0;
this.damage = 0;
this.speed = 0;
this.range = 0;
this.health = 0;
this.Xposition = 0;
this.Yposition = 0;
this.target = false;
}


var TowerList = [Tower("Basic", "tower.png", 0, 0, 0, 0, 0, 0, 0), Tower(), Tower()];

I doubt I have this working correctly, but I want to be able to create instances of the towerlist in the main project, access it randomly like an array, and print its contents as I see fit. What's the best OO way to accomplish this in JS? I want to be able to later in the main code be able to assign a tower from the list as such

var tL = new TowerList();
var tower = new Tower();

tower = tL[0];

I just started this today, so I realize there's a lot of learning to be had. I think I need to redefine the function as a var else I can instantiate it (I'm sure I read that earlier). If anyone can help me out or point me in the direction to a resource that has examples that I might be able to learn from, I would very much appreciate it.

Upvotes: 2

Views: 511

Answers (3)

Ja͢ck
Ja͢ck

Reputation: 173652

TowerList doesn't have to be a new type of object, just an Array will do:

var towerList = [];
towerList.push(new Tower("Basic", "tower.png", 0, 0, 0, 0, 0, 0, 0));
//             ^^^
//            use 'new' to instantiate a new Tower
towerList.push(...);

To iterate over TowerList:

var tower;

for (var i = 0, n = towerList.length; i < n; ++i) {
    tower = towerList[i];
    // do stuff with tower
}

You can make TowerList inherit from Array as well:

function TowerList()
{
}

TowerList.prototype = [];

TowerList.prototype.yourFunction = function() {
}

var towerList = new TowerList();

towerList.push(new Tower(...));

towerList.yourFunction();

Upvotes: 1

Andre
Andre

Reputation: 2469

I would probably have tower return an object and then create instances of that. (avoiding "this")

Consider a modular approach: This helped me: http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

Rough Idea:

function Tower(type, texture, cost, damage, speed, range, health, Xpos, Ypos)  {
    var obj = {};
        obj.type = type;
        obj.texture = new Image();
        obj.texture.src = texture;
        obj.cost = cost;
        obj.damage = 0;
        obj.speed = 0;
        obj.range = 0;
        obj.health = 0;
        obj.Xposition = 0;
        obj.Yposition = 0;
        obj.target = false;

    return obj;
}


var TowerList = [Tower("Basic", "r", 5, 0, 0, 0, 0, 0, 0), Tower(), Tower()];
var mytower = TowerList[1];

Upvotes: 0

Ben McCormick
Ben McCormick

Reputation: 25728

//your towers should be called using new here, assuming you actually 
//want a list of towers
var TowerList = [Tower("Basic", "tower.png", 0, 0, 0, 0, 0, 0, 0), Tower(), Tower()];
//TowerList needs to be a function to be called with new.  This will error out.
var tL = new TowerList();
//This should work correctly
var tower = new Tower();

//this would overwrite the new Tower() with tl[0]
tower = tL[0];

If you want to be able to create TowerList objects you probably want something like this

function TowerList(){
    this.list = [];

}


TowerList.prototype.addTower(tower){
  list.push(tower);

}


TowerList.prototype.getList(){
  return this.list;

}

Then you can just do this

var tL = new TowerList();
tL.addTower(new Tower("Basic", "tower.png", 0, 0, 0, 0, 0, 0, 0));
tL.addTower(new Tower());


var tower = tL[0];

Upvotes: 0

Related Questions