BlockCatcher Files

Projects / BlockCatcher
Block.js3.03 KB4/17/17
LICENSE.md11.24 KB5/05/16
LISTING.md264.00 B5/05/16
Player.js4.00 KB4/17/17
README.md1.85 KB5/05/16
game.js4.07 KB4/17/17
index.html2.98 KB4/17/17
thumbnail.png3.44 KB5/05/16

BlockCatcher Description

Block Catcher


To demo this project, click here.


Playing this game is really simple, you play as the green bar at the bottom of the screen. The objective is to catch blocks with the player bar before they fall off the screen using the left and right arrowkeys. To start press the spacebar, youll notice you have a total of 60 seconds to gain as many points as possible before the game ends. There are 3 types of blocks youll encounter; a red block worth 1 point, a blue block worth 5 points, and a white block worth 25 points. The red blocks are big and slow, the blue blocks are medium sized and traval at a moderate pace, while the white blocks are small and move quickly. To win this game, you have to accumulate at least 250 points before the time runs out. Once the game is over you have the ability to restart by repressing the spacebar.


This game uses classes to implement the player bar as well as the blocks. This allowed me to keep track of their vertex positions as well as color, speed, size, and point value. After the game is started, a timer counts down from 1 minute and a block is generated every second that passes. Interaction between the player bar and block is determined when the lower 2 vertices of a block are below the the y value of the player bar's top vertices and within the x values of the player bar. if interaction is successful, the points will be added to the score and the block will be deleted. Even without interaction, the blocks will continue to fall below the canvas before they get deleted at a certain height. Movement of the blocks and player bar is controlled by a translation matrix within the vertex shader and each block type has its own fragment shader.