To allow the player to do more than just jump and avoid enemies, this recipe will focus its attention on the implementation of collectible items known as pickups. These pickups will be similar to the idea of collecting coins in Mario or gold rings in Sonic and will contribute to the player's score and increase the sense of enjoyability, that is, how fun the game is.
In order to implement pickups into our application, we will follow the exact same steps we took when implementing enemies.
We start off by creating a new object that represents a pickup. We begin by creating the pickups object, which is as follows:
function Pickup() { this.InitPickup = function(texture, x, y, z, frameCount, frameRate) { this.InitAnimationManager(texture, x, y, z, frameCount, frameRate); return this; } this.DisposePickup = function() { this.DisposeAnimationManager(); } this.Update = function(deltaTime, context, deltaX, deltaY) { if(this.BoundingBox().Intersects(player.BoundingBox())) this.DisposePickup(); } } Pickup.prototype = new AnimationManager;The next step involves creating a new pickup array object within the
Levelobject and filling this array with the positions of a number of collectible items, that is, pickups, inside of theLevelconstructor. Insert the following code at the top of theLevelscript:this.pickup = new Object(); this.tileWidth = 0; this.tileHeight = 0; this.InitLevel = function(width, height) { this.tileWidth = tile.width; this.tileHeight = tile.height; for(var i = 0; i < 50; i++) { this.tiles[i] = 1; } this.pickup['1'] = 'Berry'; this.AddTile(width, height); this.AddPickup(width, height); return this; }We then need to implement a function that will draw each of the pickups to the canvas at the position specified within the pickup object array.
this.AddPickup = function(width, height) { var x, y; for(var i = 0; i < this.tiles.length; ++i){ if(this.pickup[i]){ x = i * this.tileWidth + this.tileWidth / 2; y = height - this.TerrainHeight(i); if(this.pickup[i] == 'Berry') { new Pickup().InitPickup(berry, x - berry.width / 2, y - berry.height, 6, 1, 1); } } } }The final step required to implement and draw a pickup to the canvas involves loading the necessary texture for the pickup into the
Mainobject.var berry = new Image(); berry.src = "textures/berry.png";
The Pickup script creates a new pickup object that represents an animated object similar to the player object. The Pickup constructor takes in a texture parameter, as well as a 2D position, depth position, frame count, and frame rate parameters. The texture is a 2D sprite sheet, which is used to animate the enemy. The x, y, and z positions represent the position of the pickup on the canvas as well as the position of the pickup texture within the list of layered textures within the game.
Both the x and y positions are measured in pixels and the z position represents layer depth. The frame count is used to determine how many frames make up the pickup sprite sheet and finally the frame rate dictates how many frames the enemy texture should be played at each second.
The update function within the Pickup object is used to check for any collisions between the player and a pickup object. If there is a collision then the pickup that collided with the player is removed from the game and the player has part of their score increased. This collision detection makes use of the Rectangle object, which checks whether or not two rectangles are overlapping and if so states that a collision has occurred.
Inside of the Level object, we declare and initialize a new pickup object array. Inside of the Level constructor, we then assign a position for a new pickup object to be drawn to. This position is then stored inside of the pickup object array and passed into the AddPickup function.
This function loops through each tile within the levels tile array and then loops through the pickup object array and draws a pickup at the position above the tile that it corresponds to.
The final code extract refers to loading the pickup texture into the application. This is done exactly as we previously did for each of the textures within the game. A new pickup image object is created within the Main object and an external path that shows the location of the pickup texture is passed into the image object in question.