Game Development Reference
In-Depth Information
The player starts with a score of zero. Each time a paint can falls outside the screen, the score is
updated. If a can of the correct color falls out of the screen, 10 points are added to the score. If a
can isn't the right color, the player loses a life.
The score is a part of what is called the
economy
of a game. The game's economy basically describes
the different costs and merits in the game and how they interact. When you make your own game, it's
always useful to think about its economy. What do things cost, and what are the gains of executing
different actions as a player? And are these two things in balance with each other?
You update the score in the
PaintCan
class, where you can check whether the can falls outside the
screen. If so, you check whether it has the right color and update the score and the number of player
lives accordingly. Then you move the
PaintCan
object to the top so that it can fall again:
if (Game.gameWorld.isOutsideWorld(this.position)) {
if (this.color === this.targetColor) {
Game.gameWorld.score += 10;
sounds.collect_points.play();
}
else
Game.gameWorld.lives -= 1;
this.moveToTop();
}
Finally, whenever a can of the right color falls off the screen, you play a sound.
A More Complete Canvas2D Class
In addition to drawing the sprites on the screen, you also want to draw the current score on the
screen (otherwise it wouldn't make much sense to maintain it). Until now, you've only drawn images
on the canvas. The HTML5 canvas element also allows text to be drawn on it. In order to draw text,
you extend the
Canvas2D_Singleton
class.
While you're modifying the canvas drawing class, you want to do something else as well. Now that
you've organized all your variables into objects, which can be created using classes, which can
inherit from other classes, this is a good moment to think about what information is supposed to
be changed where. For example, you probably only want to change the
canvas
and
canvasContext
variables in the
Canvas2D_Singleton
class. You don't need to access these variables in, for instance,
the
Cannon
class. In the
Cannon
class, you only want to use the high-level behavior that is provided
through the methods in the canvas drawing class.
Unfortunately, there is no way in JavaScript to directly control access to variables. An evil programmer
could write the following line of code somewhere in their program:
Canvas2D.canvas = null;
After executing this line of code, nothing can be drawn on the screen! Of course, no sane programmer
would write something like that on purpose, but it's a good idea to be as clear as possible to users
of your classes about what data they're supposed to change and what data is internal to the class
and shouldn't be modified. One way to do this is to add something to the name of any variable that is
supposed to be internal. This topic adds an underscore to all variables that are internal and shouldn't
Search WWH ::
Custom Search