Question

I’m having trouble wrapping my head around how to represent a class/object as an image or div on the browser screen. The div would have attributes, and methods. Say I’m making a game where enemy spaceships appear randomly, moving around.

So do I JQuery.append a div tag with every instance creation? How do I connect/bind the div to the class?
Or is there a MVC frame that’ll be more efficient?

thanks.

Answer 1

First of all, MVC’s not necessarily a perfect fit for a game, but understanding it could help you get a better handle on OOP and something similar could make sense.

Assume CSS as appropriate setting background images, making .spaceObject elements absolute and defaulting at 0,0 and making body an actual set width/height box, etc…

JS doesn’t have classes. It uses function constructors instead. I do not recommend attempting to emulate classes. There’s nothing wrong with constructors and they actually have some nifty advantages when you get deeper into prototypes and the like.

function BuildSpaceDiv(divID){
    var $_spaceDiv = $('<div id="'+divID+'" class="spaceObject" />').appendTo('body');

    this.move = function(x,y){
        $_spaceDiv.animate({ top:x, left:y });
    }
}

Without using the new keyword it works just like a function. You use the new keyword to create an object/instance (not class/object, that’s diagram and thing built, object and instance are the interchangeable terms).

var deathSun = new BuildSpaceDiv(‘death_sun’);

You can make as many as you want or add new args to set starting coords, etc… I’m fond of using options objects with my JS constructors. Note that it still fires like a function so building an instance can have side effects if you want and that the $_spaceDiv var is unique to every instance and persistent.