Instant HTML5 2D Platformer - Instant HTML5 2D Platformer - page 30

new Pickup().InitPickup(berry, x - berry.width / 2, y - berry.
height, 6, 1, 1);
}
}
}
}
5. The inal step required to implement and draw a pickup to the canvas involves loading
the necessary texture for the pickup into the Main object.
var berry = new Image();
berry.src = "textures/berry.png";
How it works...
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
inally 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 inal 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.