Gem Battle is a two-player game in which players battle each other with the goal of overpowering their opponent.
Pairs of gems are sent down from the drop alley at the top of the screen. Similar to tetris, players can rotate the gems counter-clockwise or clockwise and can move them left and right to position the landing spot of the gems. The gems can be any mixture of four colors. Randomly during the round, gems are replaced with crash gems. When crash gems land and come into contact with the gems of the same color, it clears the imediate same-colored gems and any other same-colored gems that are linked from the playing field. The number of gems that are cleared are then sent to the oponent. A player loses when their drop alley is blocked from gems stacking too high and blocking the openning.
This game is inspired by the classic arcade game Super Puzzle Fighter II Turbo.
- Vanilla JavaScript for game logic
- HTML5 Canvas for rendering
- Webpack to bundle various scripts into a single source
Using features of Canvas such as requestAnimationFrame (for optimized browser animation), the game and objects within are constantly being redrawn and re-rendered according to player input and positions of the gems.
Players can press z/x keys to rotate their gem pair clockwise/counter-clockwise. Players can press left/right keys to move their gem pair left or right. Players can press down keys to immediately drop their gem pairs.
Gems are generated with a random combination of four colors of crash gems and gems. Players can see the upcoming gems in the gem staging area.
The game is over when one player blocks their drop alley.
