patternjavascriptMinor
Structuring a HTML5 game without a framework
Viewed 0 times
withoutstructuringgamehtml5framework
Problem
After trying a couple different HTML5 frameworks, I've always found pure JS the most appealing. However, I am uncertain about the way I'm structuring it.
Some objects listed here must communicate information between each other. For example, the
var titlescreen = new Titlescreen();
var fps = new FPSTracker();
var input = new Input();
var background = new Background();
var shops = new Shops();
var chunkhandler = new ChunkHandler();
var explosionhandler = new ExplosionHandler();
var ui = new UI();
var world = new World();
var player = new Player();
var joystick = new Joystick();
var old_time = 0;
var dt = 0;
load();
function init(){ // called once resources loaded
// ...
requestAnimationFrame(loop);
}
function update(){
player.update();
}
function draw(){
background.draw();
world.draw();
shops.draw();
player.draw();
chunkhandler.draw();
explosionhandler.draw();
ui.draw();
fps.draw();
}
function loop(time){
dt = Math.min(0.04, (time - old_time) / 1000);
if(!game_paused){
update();
draw();
}
old_time = time;
requestAnimationFrame(loop);
}Some objects listed here must communicate information between each other. For example, the
Player class accesses some of world's functions by simply stating world.functionINeedToUse();, using the global variable's name. Coming from a Java background, this gives me a very bad vibe as it depends on the declaration of this global variable with the specific name. Though I've found JS to be a more forgiving language, this still does not feel right.Solution
In order to prevent objects from depending on global variables (and in JavaScript almost every identifier is actually a variable), you can use the principle of dependency injection.
When an object needs to interact with another object, it should receive that object, either when it is initialized, through a setter or as a method parameter.
When your
However, when your game has multiple worlds and the player moves from one to the other, it would be good to be able to change the world. In that case you could have a setter:
When the world is only required for a single method, you can also decide to pass the object to that method as a parameter:
When an object needs to interact with another object, it should receive that object, either when it is initialized, through a setter or as a method parameter.
When your
player requires the world, you could pass it when you create it and store it in a variable in local scope:var player = new Player(world);However, when your game has multiple worlds and the player moves from one to the other, it would be good to be able to change the world. In that case you could have a setter:
var player = new Player();
player.setWorld(world);When the world is only required for a single method, you can also decide to pass the object to that method as a parameter:
player.checkCollisions(world);Code Snippets
var player = new Player(world);var player = new Player();
player.setWorld(world);player.checkCollisions(world);Context
StackExchange Code Review Q#66719, answer score: 4
Revisions (0)
No revisions yet.