I'm a programming beginner.

I made a tiny one scene point and click adventure game to try to understand simple game logic and came up with this: CreateJS features prototypes for creating bitmap images, sprites and sounds objects. I create them and define their properties in a corresponding function (for example images(); spritesheets(), sounds()...). I then create functions for each animation sequence and "game level" functions, which handle user interactions and play the according animations and sounds for a certain event (when the level is complete, the current level function calls the next level function). And I end up with quite the mess.

What would be the "standard (if something like that exists)" OOP approach to structure simple game data and interactions like that?

I thought about making game.images, game.sprites, game.sounds objects, which contain all the game data with its properties using CreateJS constructors. game.spriteAnimations and game.tweenAnimations objects for sprite animations and tweens and a game.levelN object, which communicates with a game.interaction object, processing user interaction. Does this make any sense?

How do you structure your simple game code? Thanks in advance!

  • \$\begingroup\$ Game development in javascript is a bit different than in other languages, because javascript is only a scripting language for the browser and it's intended to be used differently. People like Douglas Crockford who devote their time to researching better ways of using javascript, arrive to the conclusion that you shouldn't try to use it as you would another imperative language. It's fundamentally different. Also be careful with OOP concepts in javascript. My point is: make sure you really know JS before doing anything serious like gamedev. \$\endgroup\$ – rootlocus Nov 19 '12 at 22:51
  • \$\begingroup\$ @rootlocus: Why would you say that? Except for forced asynchronous content loading i didn't find antyhing different when comparing 2d games in javascript and xna games. The oop does not work in javascript out of the box (obviously, since there are prototypes) but with things like TypeScript, there is not much difference between typescript and c#. Also there is almost no difference between scripting language and programming language - since c# can be used for scripting too. \$\endgroup\$ – Kikaimaru Nov 20 '12 at 11:49
  • \$\begingroup\$ @Kikaimaru: You're right, those are the major differences. Also you can't load any kind of files. 3D models have to be JSON, shaders have to be JSON, and the only reason texture loading works is because browsers understand image files ( even though they are supposed to be handled differently ). And you shouldn't force asynchronous content loading. You should use some sort of event driven system, or proxies ( like actionscript ). That makes it different enough for me. \$\endgroup\$ – rootlocus Nov 20 '12 at 17:19
  • \$\begingroup\$ @rootlocus: well normally you use your own model formats, and when you know how to load model file in any other language, you can extremely easily convert it to json. And asynchronous content loading is a good thing that should be done even on desktop games. Shaders are not json files they are shader files. By the way you can also parse xml in javascript out of the box. And using new HTML5 FileAPI and FileReader you can load anything you want. \$\endgroup\$ – Kikaimaru Nov 22 '12 at 16:19
  • \$\begingroup\$ I am not sure I understand you question; would something like this directory/scene concept help you: gamejs.org/director-scene.html \$\endgroup\$ – oberhamsi Nov 29 '12 at 15:22

Well maybe all what you're saying leads to one conclusion you need to get a higher level game framework that will handle more of the not-so-easy low level stuff for you.

I know of Ganvas (free), ImpactJS (paid), Construct 2 (free/paid for more features), Unity(paid). Other gamedev folks might have other framework ideas.

But if you feel CreateJS is a too tiny framework for you, go search for a more developped framework first. Developing a framework by yourself or even extending an existing one is a huge task (especially if you target both desktop browsers and smartphones) that no one should under-estimate.


I am creating a Point and Click game right now, using the Phaser engine. Structuring is quite easy and obvious with that engine, especially if you are using JavaScript ES6 classes. Each room in the game is a "Room State" that extendes a "Base State" - which extends the basic Phaser Game State class. There is one Class for the Player, one for NPCs, one for Items, one for the Controls or the inventory...all those classes just extend the "Phaser Sprite class". Phaser already comes with a lot of other things too (audio, resize functions, animations, spritesheets, ...).

Here´s the link to the engine: http://phaser.io/

Take a look at the examples too: http://phaser.io/examples


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.