miketu926 / Z-Ball

Zig Zag

Background and Overview

Zig Zag is an arcade game where the player survives by zig-zagging on the path without hitting the walls. The player's score will be determined based on the number of turns they make.

Functionality & MVP

• Use the spacebar, left and righ arrows to zig-zag
• Use the left mouse click to zig-zag
• Firebase DB for high scores with user name input
• Difficulty increases as the score increases

Architecture and Technologies

The project will be implemented with the following technologies:

• Javascript for game logic

• HTML5 Canvas for game rendering

• Webpack to bundle js files

• Firebase DB to display high scores

The following main scripts will be implemented:

• index.js and game.js: these scripts will handle the logic for rendering the path and the water

• left_zig.js, right_zig.js and start_lane.js these scripts will handle generating the path

• player.js : this script will handle the logic for rendering the ball as it remains on the path

• util.js: this script will handle the AJAX calls to Firebase DB

Implementation Timeline

Day 1:

• Setup all the files needed for Webpack (webpack.config.js, package.json)
• Write a basic entry file
• Complete path and background design

Day 2:

• Complete ball rendering - falling off the edge
• Complete mouse-click/spacebar actions for zig-zagging

Day 3:

• Complete points - each player action is equal to one point
• Complete any unfinished MVPs

Weekend:

• Complete any unfinished MVPs
• Do bonus features

Bonus features

• Connect to a backend database to store player's high scores