Soft Launch

README.md

@@ -1,96 +1,124 @@
-# Project Name (Start editing here)
+# Follow the Trail!
 <!---
 Read Me Contents
 -->
 
 # ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) Project #1: The Game
 
-### Overview
+### Getting Started
 
-Let's start out with something fun - **a game!**
+**Link to 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.
+<https://chongct.github.io/project-1/>
 
-**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!
+**Instructions**
 
+A move on a grid will increase its value by 1.
 
----
+Move up, down, left or right onto neighbouring grids to match the given Computer Grid.
 
-### Technical Requirements
+The starting grid is shown below and the player will control the Player Grid on the **left** to match the given Computer Grid on the **right**.
 
-Your app must:
+![alt text](https://github.com/chongct/project-1/blob/master/images/instructions-1.png "Starting Grid")
 
-* **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
+![alt text](https://github.com/chongct/project-1/blob/master/images/instructions-animate.gif "Demo")
 
 ---
 
-### Necessary Deliverables
+### Game Play
+
+A 5 by 5 grid on the **left** is generated for the Player. Another 5 by 5 grid on the **right** is computer generated with random numbers generated at random positions on the grid. The Player is required to match this computer generated grid to proceed to the next level.
 
-* 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.
+Level of difficulty will increase as the player completes each level. The random numbers generated will increase with the level of difficulty.
+
+For example, at level 4, 4 moves are needed to complete the game while at level 100, 100 moves are needed to complete the game.
 
 ---
 
-### Suggested Ways to Get Started
+### Game Functions Available
 
-* **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.
+1. Undo feature
 
----
+Last move will be canceled and the previous grid position will be reverted.
 
-### Potential Project Ideas
+2. Reset feature
 
-##### 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!
+Entire grid will be reverted to its original state without any change in the game level.
 
-##### 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!
+3. Fast forward to a level feature
 
----
+Player is allowed to fast forward to levels which are in the multiple of 10 to resume game progress. This code will be given after the completion of one level before the levels which are in the multiple of 10.
 
-### Useful Resources
+4. New game feature
 
-* **[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)_
+All game progress will be reset to level 1.
 
 ---
 
-### Project Feedback + Evaluation
+### Code Structure
+
+1. Computer and Player grids are drawn and appears when webpage is loaded.
+
+Function `drawGrid(container, side)` generates a 5 by 5 grid to display either the Computer or Player grid.
+
+Function `colourGrid(side)` applies a conditional formatting with different colour codes for different numbers contained within the grids.
+
+**Code to Generate Computer Grid**
+
+2. Generate a random direction.
+
+Function `directionCheck(current, input)` assigns numbers 0 to 3 to a specific direction. A formula is used to calculate the next grid's ID for a specific direction. The function takes the current grid's ID and random generated number as arguments for the function.
+
+3. Ensure that the moves made stay within the grid.
+
+Function `directionCheck(current, input)` validates that the moves made stay within the grid as well.
+
+4. Apply the random direction for a specified number of iterations.
+
+Function `comMoves(current, iterations)` takes the current grid's ID as an argument and iterates for a number of times as specified as an argument. A `for` loop is used to achieve this.
+
+**Code needed for Player Grid**
 
-* __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)?
+5. Add event handler for Player Grid when a move is made.
 
-* __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?
+Function `userMoves(current, userKey)` takes the current grid's ID as an argument and based on the user key entered, make a move on the Player grid.
 
-* __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)?
+6. Check for win.
 
-* __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?
+Function `gameComplete()` matches all 25 grids of the Player grid with the given Computer grid to check if the game is complete, before proceeding to the next level.
 
-* __Deployment__: Did you deploy your application to a public url using GitHub Pages?
+**Additional Game Features**
 
-* __Total__: Your instructors will give you a total score on your project between:
+7. Next stage feature.
+
+Global variable `stage` is used to keep track of the stage which the Player is at and is used as an argument in the `comMoves(current, iterations)` function.
+
+8. Undo move feature.
+
+Global array `playerMove` is used to keep track of the moves which the Player has made to easily backtrack.
+
+9. Modal box to display instructions again
+
+A modal box will appear to display the instructions again when the player has made too many wrong moves.
+
+---
+
+### Built With
+
+* HTML, CSS and JavaScript
+* jQuery
+
+---
+
+### Areas to Improve on
+
+* Mobile interface swiping feature (completed)
+* Game save feature (completed)
+* Feature in which computer is able to solve a grid created by the Player
+
+---
 
-    Score | Expectations
-    ----- | ------------
-    **0** | _Incomplete._
-    **1** | _Does not meet expectations._
-    **2** | _Meets expectations, good job!_
-    **3** | _Exceeds expectations, you wonderful creature, you!_
+### Acknowledgments
 
- 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!
+* JavaScript Kit for the code to implement swiping on mobile <http://www.javascriptkit.com/javatutors/touchevents2.shtml>
+* Family and friends for the inspirations and game testing