felipeatga/unit-collector

This project was built during the TTP/GA Web Development Fellowship

Felipe Hernandez / Aug. 09, 2017

Project 1: Game

About my project:

I developed Unit Collector as part of the first-three-week curriculum requirement for the NYC Tech Talent Pipeline (TTP)/Web Development Immersive (WDI) Fellowship at General Assembly.

I was inspired to create Unit Collector from nostalgia for arcade games and the need to create something 2D. So, I thought of one of my old-time favorite games, Kaboom.

Kaboom is a 1980s arcade game made by Activision for Atari. The principal of the game is that a player has to catch objects falling down from the top of the screen and avoid missing a catch. Missing a catch means that to loose an opportunity.

Unit Collector is going to be a version/replication of that game. It will have objects randomly falling from the top of the screen down, and the player has to catch these objects avoiding missing a catch. The player scores every time he/she catches an object.

The technologies I use to develop Unit Collector are

• HTML5
• CSS3 animations
• JavaScript objects, and
• jQuery selectors and methods.

Unit Collector can be adapted to any theme, which is going to be, most likely, the next steps on the development of this game.

Link to my project on bitballom: http://unit-collector.bitballoon.com/

Wireframe

Phases of Completion

Phase 0:

• Draw on paper the main game screen
• Wireframming
• Source digital images

Phase 1:

• Create a directory of assets: css, js, images
• Make a static layout of the game on the browser:
• CSS styling - writing CSS file

Phase 2:

• Start a javascript file
• Add basic functionality of motion to main characters
• Add secondary characters

Phase 3:

• Determine each characters’ data type. Some may benefit from being js classes while others objects literals, or arrays, simple variables …?
• Develop more complex javascript functionality, such as the deploying of objects to be catch, and how the player would catch the object.

Phase 4:

• Testing and adjustments
• Add additional screens and sound effects

Most necessary:

• A welcome page with a start or display-instructions button.
• An instruction page
• An enter-player-name page with start button
• A score board and a timer at the top of the screen when players are playing the game.
• A screen displaying the score and a button to restart or quit the game after game is over

Add-ons:

• A screen to mark the passing from one level to the other.
• Sound effects to signal catching, throwing, and/or game over/game begins.

Project Presentation:

Links and Resources

These are the initial sources for game inspiration and development:

Kaboom in Wikipedia: https://en.wikipedia.org/wiki/Kaboom!_(video_game)

Lost Luggage in Wikipedia: https://en.wikipedia.org/wiki/Lost_Luggage_(video_game)

HTML5 Canvas: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API