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?


2 Answers 2


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;

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).


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.

  • \$\begingroup\$ I'm not familiar with JSON, would my array solution be a bad choice? \$\endgroup\$ Mar 28, 2012 at 14:29
  • \$\begingroup\$ +1 start simple with a for loop, and only optimize if there are performance issues. \$\endgroup\$
    – House
    Mar 28, 2012 at 15:27
  • \$\begingroup\$ Yeah I would but I can't grasp how to do this in this case. \$\endgroup\$ Mar 28, 2012 at 15:41
  • \$\begingroup\$ You said you didn't want to hardcode your objects. JSON is a simple data-driven way to store them. You could just fill your array with some init function. For your picking example, just loop over this array and test if the cursor position is inside one of those circles (that's a simple distance-from-center-to-cursor vs. sphere radius test). \$\endgroup\$ Mar 28, 2012 at 17:18
  • \$\begingroup\$ Yeah but why couldn't I do it without JSON, by hardcoding them i mean var ballOne = new Ball(); as many times as I need balls. I would prefere just for(i<specified fluid number)array.push(create balls here with index); since the amount of balls is supposed to be responsive. Am I over simplifying things? \$\endgroup\$ Mar 28, 2012 at 18:48

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .