+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 1 N Back
+
+
+ Score : 0
+ Turn : 0
+
+
+
+ 
+
+ 
-**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!
+### Game Logic
+Game board will consist of 8 square tiles. A location & color button.
----
+A random position and color will appear at 2.5 second intervals. The objective of the game is to remember the location and color of tile that appears one turn back "1-n back" and indicate it by triggering the location or color buttons.
-### Technical Requirements
+If player remembers the correct location points will be added and deducted for incorrect.
-Your app must:
+Each round will last for 20 turns.
-* **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
+[Link to Game](https://subutai1175.github.io/project-1/)
----
+### Potential Advancement
+1. Improve scoring system.
+2. Deduct score for missed matches.
+3. Improve visuals.
+4. Increase speed between intervals.
+5. Increase n variable. (Memorize more steps back)
-### Necessary Deliverables
+### User Story
-* 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.
+The primary goal of the game is to stress and improve your fluid intelligence with regular practice. Whether or not improvements made in the game are transferable to other areas is debatable.
----
+### Acknowledgements
-### 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.
-
----
-
-### 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!
-
-##### 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!
-
----
-
-### Useful Resources
-
-* **[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)_
-
----
-
-### 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!
+Thank you our wonderful T.A.s Alex and Shumin for their incredible patience. Soe Min for your attention to detail catching all my syntax errors.
diff --git a/_config.yml b/_config.yml
new file mode 100644
index 00000000..fc24e7a6
--- /dev/null
+++ b/_config.yml
@@ -0,0 +1 @@
+theme: jekyll-theme-hacker
\ No newline at end of file
diff --git a/assets/css/cover.css b/assets/css/cover.css
new file mode 100644
index 00000000..d6136de9
--- /dev/null
+++ b/assets/css/cover.css
@@ -0,0 +1,26 @@
+.container {
+ padding: 20px 200px;
+ font-family: helvetica, sans-serif;
+ /*visibility: hidden;*/
+}
+
+button {
+ margin: 0 420px;
+ width: 201px;
+ height: 124px;
+ background-color: blue;
+ font-family: helvetica, sans-serif;
+ font-size: 47px;
+ color: gold;
+ border-radius: 10px;
+ animation-name: blinker;
+ animation-duration: 3s;
+ animation-timing-function: linear;
+ animation-iteration-count: infinite; color: gold;
+}
+
+@keyframes blinker {
+ 0% { opacity: 1.0; }
+ 50% { opacity: 0.3; }
+ 100% { opacity: 1.0; }
+}
diff --git a/assets/css/style.css b/assets/css/style.css
new file mode 100644
index 00000000..70696c88
--- /dev/null
+++ b/assets/css/style.css
@@ -0,0 +1,159 @@
+body {
+ background-color: black;
+}
+
+h1 {
+ margin: 0 auto;
+ display: block;
+ text-align: center;
+ text-shadow: 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px;
+ font-family: helvetica, sans-serif;
+}
+
+.container {
+ margin: 0 auto;
+ width: 90%;
+}
+
+.topRow {
+ margin: 30px 10px;
+ /*padding: 10px 470px;*/
+ text-align: center;
+}
+
+.wrapper {
+ width: 310px;
+ display: flex;
+ flex-flow: row wrap;
+ margin: 0 auto;
+}
+
+.box {
+ border: solid 1px #4E4A59;
+ width: 100px;
+ height: 100px;
+ display: inline-block;
+ border-radius: 9999px;
+}
+
+.gameOver {
+ display: none;
+ position: absolute;
+ top: 0px;
+ left: 100px;
+}
+
+.eventButton {
+ display: flex;
+ text-align: center;
+ margin: 0 auto;
+}
+
+.restartBtn {
+ width: 161px;
+ height: 100px;
+ border-radius: 6px;
+ position: absolute;
+ top: 500px;
+ left: 530px;
+ background-color: black;
+ font-size: 43px;
+ text-shadow: 0 0 2px silver, 0 0 2px silver, 0 0 2px silver, 0 0 2px silver, 0 0 2px silver, 0 0 2px silver, 0 0 2px silver, 0 0 2px silver, 0 0 2px silver, 0 0 2px;
+ font-family: helvetica, sans-serif;
+ animation-name: blinker;
+ animation-duration: 4s;
+ animation-timing-function: linear;
+ animation-iteration-count: infinite; color: black;
+}
+
+@keyframes blinker {
+ 0% { opacity: 1.0; }
+ 50% { opacity: 0.3; }
+ 100% { opacity: 1.0; }
+}
+
+#HIT {
+ text-align: center;
+ font-size: 20px;
+ font-family: helvetica, sans-serif;
+ text-shadow: 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px;
+ font-family: helvetica, sans-serif;
+}
+#scoreBoard {
+ position: relative;
+ z-index: 3;
+ display: inline-block;
+ text-align: center;
+ font-size: 20px;
+ font-family: helvetica, sans-serif;
+ text-shadow: 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px;
+ font-family: helvetica, sans-serif;
+}
+
+#textbox {
+ border: solid 1px #394053;
+ border-radius: 0px;
+ font-size: 26px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-family: helvetica, sans-serif;
+ background-color: #CDCACC;
+}
+
+#loc {
+ width: 100px;
+ height: 62px;
+ border-radius: 5px;
+ margin: 20px;
+ font-size: 23px;
+ color: #7CAE7A;
+ background-color: #4E4A59;
+ display: inline-block;
+}
+
+#colorBtn {
+ width: 100px;
+ height: 62px;
+ border-radius: 5px;
+ margin: 20px;
+ font-size: 23px;
+ color: #7CAE7A;
+ background-color: #4E4A59;
+ display: inline-block;
+}
+
+#startBtn {
+ border-radius: 5px;
+ width: 76px;
+ height: 47px;
+ font-size: 16px;
+ background-color: #4E4A59;
+ font-family: helvetica, sans-serif;
+ color: #7CAE7A;
+}
+
+#stopBtn {
+ border-radius: 5px;
+ width: 76px;
+ height: 47px;
+ font-size: 16px;
+ background-color: #4E4A59;
+ font-family: helvetica, sans-serif;
+ color: #7CAE7A;
+}
+
+#resetBtn {
+ border-radius: 5px;
+ width: 76px;
+ height: 47px;
+ font-size: 16px;
+ background-color: #4E4A59;
+ font-family: helvetica, sans-serif;
+ color: #7CAE7A;
+}
+
+#turn {
+ text-shadow: 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px lightgray, 0 0 1px;
+ font-family: helvetica, sans-serif;
+}
diff --git a/assets/css/stylesheet.css b/assets/css/stylesheet.css
deleted file mode 100644
index e69de29b..00000000
diff --git a/assets/js/script.js b/assets/js/script.js
index e69de29b..b8ddbbc1 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -0,0 +1,150 @@
+$(function () {
+ var $box = $('.box')
+ var $locBtn = $('#loc')
+ var $colorBtn = $('#colorBtn')
+ var $startBtn = $('#startBtn')
+ var $stopBtn = $('#stopBtn')
+ var $resetBtn = $('#resetBtn')
+ var textbox = $('#textbox')
+ var colorArr = ['red', 'blue', 'orange', 'yellow', 'white', 'green', 'grey', 'purple']
+ var recArr = []
+ var recCol = []
+ var count = 0
+ var index = 0
+ var on = 0
+ var refreshIntervalId
+ var n = 2 // Difficulty Setting
+ var $turn = $('#turn')
+ var scoreObj = {
+ score: 0,
+ scoreBoard: $('#scoreBoard')
+ }
+ var gameOverDiv = $('.gameOver')
+ var $restartBtn = $('.restartBtn')
+
+ $resetBtn.on('click', reset)
+ $stopBtn.on('click', stop)
+ $locBtn.on('click', compareResult)
+ $(document).on('keydown', function (e) {
+ if (e.keyCode === 37) {
+ compareResult()
+ }
+ })
+ $restartBtn.on('click', () => {
+ gameOverDiv.css('display', 'none')
+ })
+ $colorBtn.on('click', compareColor)
+ $(document).on('keydown', function (e) {
+ if (e.keyCode === 39) {
+ compareColor()
+ }
+ })
+ $startBtn.on('click', () => {
+ scoreObj.scoreBoard.text('Score : 0')
+ if (on == 0) {
+ refreshIntervalId = setInterval(locGen, 2500)
+ on = 1
+ } else if (on == 1) {
+ clearInterval(refreshIntervalId)
+ on = 0
+ }
+ })
+
+ // Random Location Generator
+ function locGen () {
+ count++ // Update Count
+ $turn.text(`Turn : ${count}`) // Update Turn Text on Scoreboard
+ var color = randomColor() // Call Random Color
+ if (count == 20) { // check if game is over
+ $('.box').css('backgroundColor', '') // Clear Board if Game is over
+ return gameOver() // call gameover
+ }
+ // Clear previous postion
+ $(`[data-value = ${index}]`).css('backgroundColor', '')
+ // Call Random Number function to flash corresponding position on gameboard
+ // and assign it to variable index
+ index = randomNum()
+ // Call setTimeout function to flash a random position and color on gameboard
+ setTimeout(function () {
+ $(`[data-value = ${index}]`).css('backgroundColor', `${color}`)
+ // update text on center box
+ textbox.text(`${color}`)
+ // update color of text in center box
+ textbox.css('color', `${color}`)
+ // push position id & color string into a record array for comparision
+ recArr.push(index) //
+ recCol.push(`${color}`) //
+ }, 1000)
+ }
+
+ function randomColor () {
+ var col = colorArr[randomNum()]
+ return col
+ }
+
+ function compareResult () {
+ if (recArr[count - 1] === recArr[count - n]) {
+ audioCorrect()
+ scoreObj.score += 10
+ scoreObj.scoreBoard.text(`Score : ${scoreObj.score}`)
+ // TODO: No Click? click = false
+ } else if (recArr[count - 1] != recArr[count - n]) {
+ audioWrong()
+ scoreObj.score -= 10
+ scoreObj.scoreBoard.text(`Score : ${scoreObj.score}`)
+ }
+ }
+
+ function compareColor () {
+ if (recCol[count - 1] === recCol[count - n]) {
+ audioCorrect()
+ scoreObj.score += 10
+ scoreObj.scoreBoard.text(`Score : ${scoreObj.score}`)
+ } else if (recCol[count - 1] != recCol[count - n]) {
+ audioWrong()
+ scoreObj.score -= 10
+ scoreObj.scoreBoard.text(`Score : ${scoreObj.score}`)
+ }
+ }
+
+// Random Number Generator
+ function randomNum () {
+ var index = Math.floor(Math.random() * 8)
+ return index
+ }
+
+ function gameOver () {
+ // Show Score.
+ count = 0
+ index = 0
+ on = 0
+ recArr = []
+ recCol = []
+ scoreObj.scoreBoard.text(`Score : ${scoreObj.score}`)
+ clearInterval(refreshIntervalId)
+ gameOverDiv.css('display', 'block')
+ }
+
+ function stop () {
+ clearInterval(refreshIntervalId)
+ }
+
+ function reset () {
+ count = 0
+ index = 0
+ on = 0
+ recArr = []
+ recCol = []
+ scoreObj.scoreBoard.text('Score : 0')
+ textbox.text('')
+ $('.box').css('backgroundColor', '')
+ }
+
+ function audioCorrect () {
+ return document.getElementById('audioCorrect').play()
+ }
+
+ function audioWrong () {
+ return document.getElementById('audioWrong').play()
+ }
+})
diff --git a/audio/correctAnswer.mp3 b/audio/correctAnswer.mp3
new file mode 100644
index 00000000..1c161241
Binary files /dev/null and b/audio/correctAnswer.mp3 differ
diff --git a/audio/wrongAnswer.mp3 b/audio/wrongAnswer.mp3
new file mode 100755
index 00000000..f1186d5e
Binary files /dev/null and b/audio/wrongAnswer.mp3 differ
diff --git a/game.html b/game.html
new file mode 100644
index 00000000..dba9a9c4
--- /dev/null
+++ b/game.html
@@ -0,0 +1,46 @@
+
+
+
+
+ 
+