Creating several instances of the same object, and selecting only one

Question

I'm playing around with making a puzzle game, haven't done that much before I run into my first problem. I want to create a certain amount of the same object/function. But without hardcoding the different instances.

I think maybe an array is a good idea? and then a for loop to push the objects in? Then I need to be able to select one of these objects by clicking on it, how would I do that? How do I know which ball in the array was clicked? A loop again?

I made a jsFiddle example (you need to click the orange ball to select, then you can move it around by clicking the canvas). This is what I want to do, but with more balls. How would you solve this?

Answer 1

There are several issues here.

1. Storing several instances of object(s) in memory

This is generally done using an array or some more complex data structure. You can use a single array to hold everything (with polymorphism, for instance) or have one array per type of objects. Which is preferable depends on the kind of behaviour your objects will have.

Objects don't need to be stored in a variable at all, they can be an array member. You can do

a = new Array();
a.push(new MyGameObject(some params ... ));

Alternatively (more typically), you might temporarily assign the object to a local variable in the function, then set some properties, or call initialisation methods

function init_everything() // Call this when your game starts, or when a new level starts etc.
{
  objects_list = new Array();
}

function add_a_new_thingy() {
  var t = new Thingy();
  t.someproperty = 42;
  t.init_method();
  objects_list.push(t);
}

Then call add_a_new_thingy several times.

1. Initialising some objects in some pattern at the start of a game or level

At the start of the game, or at the beginning of a level, you'll probably want to set up some objects with known states, in your global array of things (or arrays of things, if you have more than one).

Simplest way: hard-code each level as a Javascript function somewhere, which creates them all (NB: You don't need to put it in the same .js file as other things!)

Slightly more complex way: Create some kind of JS data structure, which you read to create the objects:

var level1_things = [
   { type:"monster", x:42, y:99 },
   { type:"bonus", x:128, y:100 }
];

Even more complex way: read them in some other format from the server, using XMLHttpRequest.

You could, for example, parse a text-file where certain characters indicate types of objects, so if you did a Sodoku-type game, you have a "W" for "wall", "P" for "player", "B" for box, "T" for target or something (maybe a blank space for an empty tile).

Answer 2

You could user JSON to store your objects, that's the easiest way to serialize objects in Javascript that I know of.

Then for your picking, a for loop with a bounding box or sphere test does the trick. If you've got tons of objects and run into performance issues you'll need some kind of space partionning system, such as a quad tree.