Welcome to Coffee-Up!
Coffee-Up! is a game that emulates the start of a coffee business from its grand opening to its normal days! Customers come in and order drinks consisting of a list of ingredients. Your responsibility is to assemble the drink together as more customers come in to the shop. This game is phase
and level-based
in that every week consists of 7 levels
, representing every day of the week. For example, Phase 1
is the grand opening week and every level represents level each day of the week. e.g (Monday
- Sunday
). So, the goal is to:
-
Prevent as many customers from waiting as possible by making their drinks fast;
-
Maximize
sales
(points) -
The business will close if your
sales
reaches below0
In Coffee-Up!, users will be able to:
-
Pause and unpause a game.
-
Fill a randomly generated coffee order by pressing a combination of two buttons corresponding to the drink category and drink ingredient.
-
Click on an instructions buttons
-
See the score, represented by
sales
, which would decrease everytime the player fails create a drink in time.
Users must:
- Fill the order in time without fail. Failure to press the right key combinations will result in restarting the order.
Orders will:
-
Come in increasing numbers based on the day of the week
-
Be deleted and subtract points from the score if the time spent waiting for the order is too long.
Game Difficulty is comprised of:
-
Phases and Days of the week
- For example,
Phase 1
represents the "grand opening" week, consisting of levels of1-7
- As level passes, more orders come in
- As each phase passes, more drink combinations are created as your business "grows"
- For example,
Game Score is determined by:
-
Initial start up amount
-
Accumulated points
-
Multiplier (increases based on how many wrong orders occured during the level)
In addition, Coffee-Up! will include:
-
A README file
-
Instructions
-
Drink assembly is done by by pressing a
Category Key
(which corresponds to the ingredient category) in combination with aIngredient Key
(which corresponds to an ingredient/component of the coffee drink).-
- The
Left
button =Drink Size
- The
Right
button =Coffee-Type
- The
Up
button =Toppings
- The
Down
button =Temperature
- The
-
- The
Drink Size
keysQ
= SmallW
= MediumE
= Large
- The
Coffee-Type
keysA
= Regular CoffeeS
= Cold BrewD
= LatteF
= Cappucino
- The
Toppings
keysZ
= TapiocaX
= SugarC
= Milk
- The
Temperature
keys1
= Hot2
= Cold
- The
-
This project will be implemented with the following technologies:
Canvas API
to render the boardWebpack
to bundle and transpile the source JavaScript codenpm
to manage project dependenciesHTML
andCSS
to provide a structure and stylingJavaScript
to provide behavior to the code
-
Thursday
: Project Setup- Being more comfortable with webpack, Canvas API, and looking through javascript event handling material.
- Watch a few tutorial videos and look through App Academy Open content
- Decide what technologies to use
- Decide which canvas background and sprites to use
-
Friday & Weekend
:-
Friday
-
The majority of Friday will be spent watching tutorials on respective technologies and reading documentation in preparation to implement the logic of the game.
-
Being more comfortable with the environment
-
Revisiting and solidifying the concept of JavaScript Object-Oriented Programming
-
-
Saturday & Sunday
-
Start the creation of all the classes and determine what methods and instance variables they would have
-
Begin the blueprint to game logic and have all script files sorted.
-
If time permits, keep searching for more pixelarts, tutorials, and an audio API implementation.
-
-
-
Monday
:- Implement all the underlying logic of the game.
- Make sure everything renders correctly appropriately.
-
Tuesday
:- Finish making sure everything is rendered appropriatly in the canvas.
- Create the instruction modal as a hover.
- After that, focus on user controls: start, stop, reset.
-
Wednesday
:- Finish implementing user control.
- Implement the styling portion if time permits.
- Add person nav links.
-
Thursday Morning
: Deploy to Github pages
generateRandomOrders() {
const clevel = this.cl;
const cphase = (this.cp === 1) ? this.cp : Math.ceil(this.cp / 2);
const finalOrderArray = [];
for (let i = 0; i < clevel; i++) {
const orderArray = [];
orderArray.push(Order.categoryKeys["leftKey"])
orderArray.push(this.drinkSizesKeyBindings[this.generateRandomIndex(this.drinkSizes)]);
orderArray.push(Order.categoryKeys["rightKey"])
orderArray.push(this.coffeeTypesKeyBindings[this.generateRandomIndex(this.coffeeTypes)]);
for (let j = 0; j < cphase; j++) {
orderArray.push(Order.categoryKeys["upKey"])
orderArray.push(this.toppingsKeyBindings[this.generateRandomIndex(this.toppings)]);
}
orderArray.push(Order.categoryKeys["downKey"])
orderArray.push(this.temperatureKeyBindings[this.generateRandomIndex(this.temperature)]);
finalOrderArray.push(orderArray)
}
return finalOrderArray;
};
generateRandomIndex(list) {
return Math.floor(Math.random() * (list.length));
};
This code snippet was my favorite part of the project because it represents how the orders in the game are generated. The first function returns a 2D array of orders for every round. The elements of the array are orders that are generating by randomly indexing into an array/dictionary. The second function is a helper method that generates the random index.
if time permits:
-
There will be an audio API implementation, allowing a user to lower music, stop music and play music.
-
NPC Customer Animation towards cashier and away from cashier.