First Commit. Update readme. Flowchart in img folder

README.md

@@ -1,96 +1,114 @@
-# Project Name (Start editing here)
-<!---
-Read Me Contents
--->
+# Project #1: Tempo Shot
+Created by: [__Ming Yi Koh__](https://github.com/mingyikoh)
+<br>
 
-# ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) Project #1: The Game
-
-### Overview
-
-Let's start out with something fun - **a game!**
-
-Everyone will get a chance to **be creative**, and work through some really **tough programming challenges** – since you've already gotten your feet wet with Tic Tac Toe, it's up to you to come up with a fun and interesting game to build.
-
-**You will be working individually for this project**, but we'll be guiding you along the process and helping as you go. Show us what you've got!
-
-
----
-
-### Technical Requirements
-
-Your app must:
-
-* **Render a game in the browser**
-* **Any number of players** will be okay, switch turns will be great 
-* **Design logic for winning** & **visually display which player won**
-* **Include separate HTML / CSS / JavaScript files**
-* Stick with **KISS (Keep It Simple Stupid)** and **DRY (Don't Repeat Yourself)** principles
-* Use **Javascript** for **DOM manipulation**, jQuery is not compulsory
-* **Deploy your game online**, where the rest of the world can access it
-* Use **semantic markup** for HTML and CSS (adhere to best practices)
-* **No canvas** project will be accepted, only HTML5 + CSS3 + JS please
-
----
-
-### Necessary Deliverables
-
-* A **working game, built by you**, hosted somewhere on the internet
-* A **link to your hosted working game** in the URL section of your GitHub repo
-* A **git repository hosted on GitHub**, with a link to your hosted game, and frequent commits dating back to the very beginning of the project
-* **A ``readme.md`` file** with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc.
-
----
-
-### Suggested Ways to Get Started
-
-* **Break the project down into different components** (data, presentation, views, style, DOM manipulation) and brainstorm each component individually. Use whiteboards!
-* **Use your Development Tools** (console.log, inspector, alert statements, etc) to debug and solve problems
-* Work through the lessons in class & ask questions when you need to! Think about adding relevant code to your game each night, instead of, you know... _procrastinating_.
-* **Commit early, commit often.** Don’t be afraid to break something because you can always go back in time to a previous version.
-* **Consult documentation resources** (MDN, jQuery, etc.) at home to better understand what you’ll be getting into.
-* **Don’t be afraid to write code that you know you will have to remove later.** Create temporary elements (buttons, links, etc) that trigger events if real data is not available. For example, if you’re trying to figure out how to change some text when the game is over but you haven’t solved the win/lose game logic, you can create a button to simulate that until then.
+[*Click here to play*!](https://mingyikoh.github.io/project-1/)
+![gameScreen](./assets/img/gameScreen.png)
 
 ---
+## Overview
+*Tempo Shot* is a music based first-person-shooter game that tests your reflexes and judgement. Managing your inventory of ammo and grenades is key to winning.
 
-### Potential Project Ideas
-
-##### Blackjack
-Make a one player game where people down on their luck can lose all their money by guessing which card the computer will deal next!
+*Please turn on your volume while playing.*
 
-##### Self-scoring Trivia
-Test your wits & knowledge with whatever-the-heck you know about (so you can actually win). Guess answers, have the computer tell you how right you are!
+#### Objective
+Survive for *two* minutes. Lose all health and you lose.
 
----
-
-### Useful Resources
+#### How to play
+Use your mouse to aim and left click to shoot them. Shooting enemies will damage them, some enemies require more shots to kill. Failure to kill them before they disappear will reduce your health.
+Right click to use *grenades* which damage all visible enemies.
+Shooting *allies* cause you to lose a health.
+Shoot *ammo boxes* or *med packs* to refill your supplies and health.
 
-* **[MDN Javascript Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript)** _(a great reference for all things Vanilla Javascript)_
-* **[jQuery Docs](http://api.jquery.com)** _(if you're using jQuery)_
-* **[GitHub Pages](https://pages.github.com)** _(for hosting your game)_
-* **[How to write readme - Markdown CheatSheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet)** _(for editing this readme)_ 
-* **[How to write a good readme for github repo!](https://gist.github.com/PurpleBooth/109311bb0361f32d87a2)** _(to make it better)_
+#### Controls
+*Mouse Left Click*: **Shoot** (One damage to targeted enemy)<br>
+*Mouse Right Click*: **Grenade** (Two damage to all enemies)
 
 ---
-
-### Project Feedback + Evaluation
-
-* __Project Workflow__: Did you complete the user stories, wireframes, task tracking, and/or ERDs, as specified above? Did you use source control as expected for the phase of the program you’re in (detailed above)?
-
-* __Technical Requirements__: Did you deliver a project that met all the technical requirements? Given what the class has covered so far, did you build something that was reasonably complex?
-
-* __Creativity__: Did you add a personal spin or creative element into your project submission? Did you deliver something of value to the end user (not just a login button and an index page)?
-
-* __Code Quality__: Did you follow code style guidance and best practices covered in class, such as spacing, modularity, and semantic naming? Did you comment your code as your instructors have in class?
-
-* __Deployment__: Did you deploy your application to a public url using GitHub Pages?
-
-* __Total__: Your instructors will give you a total score on your project between:
-
-    Score | Expectations
-    ----- | ------------
-    **0** | _Incomplete._
-    **1** | _Does not meet expectations._
-    **2** | _Meets expectations, good job!_
-    **3** | _Exceeds expectations, you wonderful creature, you!_
-
- This will serve as a helpful overall gauge of whether you met the project goals, but __the more important scores are the individual ones__ above, which can help you identify where to focus your efforts for the next project!
+## Technical Documentation
+* Game Logic Flow-Chart
+* Coding Theory
+* Future Possible Updates
+* Coding Sequence
+* User experience
+* Acknowledgements
+
+#### Game Logic Flow-Chart
+<img src="assets/img/flowchart.jpeg">
+
+#### Coding Theory
+This game has only one victory and one failure condition.
+The spawns(enemies/utilities) are the main element of the game. Using an object constructor function allows storing of numerous keys and elements for each enemy.
+It also allows for future addition of enemy types and effects. Spawns are pushed into an empty array for storage.
+Example of object constructor:
+```
+function Spawn(life, damageOnPlayerWhenExpire, timeTillExpire, effectOnPlayerHealthWhenShot, effectOnPlayerAmmoWhenShot, effectOnGrenadeWhenShot, idLink){
+  this.life = life;
+  this.damageOnPlayerAtExpire = damageOnPlayerAtExpire;
+  this.timeTillExpire = timeTillExpire;
+  this.effectOnPlayerHealthWhenShot = effectOnPlayerHealthWhenShot;
+  this.effectOnPlayerAmmoWhenShot = effectOnPlayerAmmoWhenShot;
+  this.effectOnPlayerGrenadeWhenShot = effectOnPlayerGrenadeWhenShot;
+  this.idLink = idLink;
+}
+```
+On each spawn, a div will be created and appended. A counter is used to link the enemy div with the specific enemy array element. Each spawn is given a unique ID using the counter, and an idLink of the same value for the array element, afterwhich the counter increases for the next spawn.
+Enemies/allies/tools spawn via a setInterval function. Different enemies have different spawn rates.
+
+On shooting spawns, function will iterate object key and value to determine effect on player stats.
+Enemies deal damage to player on expiry.
+
+To add variety in the game, events are created that spawn i.e. 300 enemies at the same time, which forces players to use the grenade. Individual levels are created by matching spawn rate and events with the tempo of the background music of the specific level.
+
+#### Future Possible Updates
+* Scoring function
+* Combo function
+* Pause button
+* Text popups at game screen, 'Miss!' etc.
+* Enemies zoom to player (transition effect) when they expire, like a bullet path
+* Text notification on miss etc.
+
+
+
+#### Misc Issues
+* No max health
+* Using grenade on 5 allies and 1 healthpack will result in gameover.<br> Though 5 health - 5 + 1 = 1 health
+
+#### Coding Sequence
+
+1. Create basic html, game screen layout
+1. Create win and lose condition
+1. Create object constructor
+1. Create spawn function for div creation and individual enemy types
+1. Link spawn div and array object
+1. Create timer and countdown function so win condition can be met
+1. Create function so enemies deal damage to player on expiry
+1. Create checkLoss function to check player health so loss condition can be met
+1. Target this.div on click to derive key/value
+1. Left and right click functions
+1. Adjust CSS
+1. Adjust setInterval to adjust game difficulty
+1. Adjust spawn locations
+1. Game overlay to cover game screen before play
+1. Start button, Retry button
+1. Add BGM, gunshot and grenade audio on click
+1. Add easy and hard levels, new BG BGM Events
+
+#### User Experience
+Easy stage introduces a gradual learning curve. Enemies spawn according to the beats of the song which gradually becomes faster. This helps players improve their reflexes and get used to the general mechanics of shooting and grenades.
+
+After reflexes comes judgement. Normal stage introduces this element to the game, namely the spawning of allies in game. Players have to avoid shooting allies and using grenades when they are on screen. This forces players to survey the stage and judge the best course of action within a limited time frame.
+
+Hard stage adds yet another element to the game, inventory management. Players have limited ammo and grenade in this stage and need to juggle between all three elements. Reflexes. Judgement. Inventory management.
+
+#### Acknowledgements
+* **Alex Min** (TA)
+<br>For the precious help and guidance rendered through individual consultations
+
+* **Hazel Toh** (WDI 12)
+<br>For the much needed assistance in editing images used in the game
+
+* **Songs**
+  <br>[Escape the Fate - "One For The Money"](https://www.youtube.com/watch?v=szRDiLUduRA)
+  <br>[Tokyo Ghoul - "Unravel"](https://www.youtube.com/watch?v=Q0v3ajXh5S0)
+  <br>[Imagine Dragons - "Believer"](https://www.youtube.com/watch?v=7wtfhZwyrcc)