Project #1: Follow the pattern
-### Overview
+### Brief summary of the game :
-Let's start out with something fun - **a game!**
+A simple game which goal is for player to repeat the pattern showed by the ‘instructor’.
+With each round a new step is added to the pattern making, the game much more difficult with every round. Player with the fastest correct sequence and points will win.
-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.
+## Game logic
-**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!
+
+Updated the game logic from having two players to take turns to follow the sequence and having timer as the win condition to two players representing different keys competing on who finishes the sequence first. The faster player scores a point and the player with the higher points after 5 rounds will win.
+## Finished product
----
+
-### Technical Requirements
+#### Play it here! : https://cqdotcom.github.io/project-1/
-Your app must:
+### How to win / How to play?
-* **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
+1. 5 seconds timer will start upon player clicking the start button
----
+2. Player 1 will use the '1,2,3,4' keys to follow the pattern '1,2,3,4' whereas Player 2 will use the 'left,up,right,down' keys for the '1,2,3,4' pattern for extra challenge.
-### Necessary Deliverables
+3. Follow the pattern from the numbers below or the dance instructor's move. Key input starts as soon as the timer is up.
-* 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.
+4. Starting with 4 moves and doubling the number of moves every round(Up to round 5)
----
+5. Player who finishes the pattern first will get 1 point.
-### Suggested Ways to Get Started
+6. Player with the most points after round 5 wins!
-* **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.
----
+## Stage of the game development
-### Potential Project Ideas
+### Setting up the divs
+
+Creating many different divs for different purposes.
+### The key code of keys
+Keys chosen
-##### 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!
+Player 1 | Player 2 | *keycode for Player 1* | *keycode for Player 2*
+--- | --- | --- | ---
+`Number Keys` | `Arrow Keys` | `keycode` | `keycode`
+1,2,3,4 | left,up,right,down | 49,50,51,52 | 37,38,39,40
-##### 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!
+Credit http://keycode.info/
+### Matching array with the keys
+Setting the number of moves in an array for the dance instructor
----
+`var instructorMoves = [37,38,39,40]`
-### Useful Resources
+By doing it this way, I can directly compare it with Player 2's **keycode** combinations(the arrow keys) using ..
-* **[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)_
+`var strOfKeys1 = e.which` and `if(strOfKeys === randSequence)`
----
+As for Player 1, I can subtract the given array of numbers to match with my number keys' **keycode**.
-### Project Feedback + Evaluation
+`var strOfKeys = e.which - 12`
-* __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)?
+### Checking for match & iterating position
-* __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?
+```javascript
+if(strOfKeys === randSequence[counter1]) {
+ counter1++
+ if(counter1 === 4 && rounds === 1) {
+ $(".playerOneAlert2").html("O").show().delay(2000).fadeOut(1000)
+ $(".playerOneAlert2").css({"color" : "green", "font-size" : "50px"})
+ counter1 = 0
+ rounds++
+ scoreP1++
+ $playerOne.text(`Score: ${scoreP1}`)
+ new Audio('./assets/audio/cheer.mp3').play()
+ timerWithAddRounds()
+ }
+```
-* __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)?
+```javascript
+else if (strOfKeys !== randSequence[counter1] && whichPlayer === 1) {
+ $(".playerOneAlert2").html("X").show().delay(400).fadeOut(400)
+ $(".playerOneAlert2").css({"color" : "red", "font-size" : "50px"})
+ new Audio('./assets/audio/boo.mp3').play()
+ counter1 = 0
+}
+```
-* __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?
+### Randomising and adding new rounds
+Using a function with an argument of `arr` and a for loop inside the function to jumble up the position.
-* __Deployment__: Did you deploy your application to a public url using GitHub Pages?
+```javascript
+function shuffleArray(arr) {
+ for (var i = arr.length - 1; i > 0; i--){
+ var shuffle = Math.floor(Math.random() * (i + 1))
+ ;[arr[i], arr[shuffle]] = [arr[shuffle], arr[i]]
+ }
+ return arr
+}
+```
-* __Total__: Your instructors will give you a total score on your project between:
+Adding new rounds.
- Score | Expectations
- ----- | ------------
- **0** | _Incomplete._
- **1** | _Does not meet expectations._
- **2** | _Meets expectations, good job!_
- **3** | _Exceeds expectations, you wonderful creature, you!_
+```javascript
+function addTurn(){
+ instructorMoves = instructorMoves.concat(instructorMoves)
+ randSequence = shuffleArray(instructorMoves)
+ return randSequence;
+ }
+```
- 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!
+## Challenges
+
+
+* Making the music instructor move together with the number sequence.
+ 
+
+* Matching with the randomised array and comparing which player finishes the pattern first.
+
+* Making the image of instructor's moves appear together with the pattern on the screen.
+
+## Possible future improvements
+
+
+1. Adding more rounds
+
+2. Increase the difficulty by hiding the number patterns in some rounds to let the players just follow the dance pattern.
+
+3. More keys to control on more dance moves other than '1,2,3,4'
+
+## Credit
+
+TA - Alex & Shumin
+
+Google
+
+Stackoverflow
+
+MDN
diff --git a/assets/audio/bgm.mp3 b/assets/audio/bgm.mp3
new file mode 100755
index 00000000..0db672a0
Binary files /dev/null and b/assets/audio/bgm.mp3 differ
diff --git a/assets/audio/boo.mp3 b/assets/audio/boo.mp3
new file mode 100644
index 00000000..96e7a902
Binary files /dev/null and b/assets/audio/boo.mp3 differ
diff --git a/assets/audio/cheer.mp3 b/assets/audio/cheer.mp3
new file mode 100644
index 00000000..4d19ece3
Binary files /dev/null and b/assets/audio/cheer.mp3 differ
diff --git a/assets/audio/sound1.mp3 b/assets/audio/sound1.mp3
new file mode 100644
index 00000000..e341b19c
Binary files /dev/null and b/assets/audio/sound1.mp3 differ
diff --git a/assets/audio/sound2.mp3 b/assets/audio/sound2.mp3
new file mode 100644
index 00000000..77fc40dd
Binary files /dev/null and b/assets/audio/sound2.mp3 differ
diff --git a/assets/audio/sound3.mp3 b/assets/audio/sound3.mp3
new file mode 100644
index 00000000..28ecd589
Binary files /dev/null and b/assets/audio/sound3.mp3 differ
diff --git a/assets/audio/sound4.mp3 b/assets/audio/sound4.mp3
new file mode 100644
index 00000000..1c5fadfe
Binary files /dev/null and b/assets/audio/sound4.mp3 differ
diff --git a/assets/css/stylesheet.css b/assets/css/stylesheet.css
index e69de29b..799d8358 100644
--- a/assets/css/stylesheet.css
+++ b/assets/css/stylesheet.css
@@ -0,0 +1,218 @@
+.wrapper {
+width: 1260px;
+height: 700px;
+margin: 0 auto;
+background-color: black;
+background-image: url("../images/background1.jpg");
+background-size:cover;
+}
+.dancebg{
+width: 300px;
+height: 100px;
+margin-top: -70px;
+margin-left: -80px;
+}
+
+.instructions{
+ margin-right: 10px;
+ width: 100px;
+}
+.instructionsMoves{
+ margin-right: 800px;
+}
+.instructor{
+ margin-right: 30px;
+ width: 750px;
+ font-size: 30px;
+ display: block;
+ word-break: break-all;
+}
+.footer{
+ display: flex;
+ justify-content: center;
+}
+body{
+ background-color: black;
+ position: fixed;
+ font-family: 'Geo', sans-serif;
+}
+.banner {
+ width: 1230px;
+ height: 100px;
+}
+
+.menuTop {
+ width: 1230px;
+ height: 35px;
+}
+
+.columnLeft{
+ width: 240px;
+ height: 495px;
+ float: left;
+}
+
+.columnRight{
+ width: 270px;
+ height: 495px;
+ float: right;
+}
+
+.content{
+ width: 750px;
+ height: 495px;
+ margin-left: 240px;
+ text-align: center;
+ background-image: url("../images/stage.jpg");
+ background-size:cover;
+}
+
+h1{
+ text-align: center;
+ color: white;
+}
+
+.startBtn {
+ background: #300700;
+ border-radius: 28px;
+ font-family: Courier New;
+ color: #ffffff;
+ font-size: 20px;
+ padding: 2px 2px 2px 2px;
+ float:left;
+}
+
+.resetBtn {
+ margin: 0 auto;
+ float:left;
+ background: #1a394d;
+ border-radius: 28px;
+ font-family: Courier New;
+ color: #ffffff;
+ font-size: 20px;
+ padding: 2px 2px 2px 2px;
+ display: none;
+}
+
+div{
+ color: white;
+ text-align: center;
+}
+
+.onetwonumkeys{
+ max-width: 100px;
+ max-height: 100px;
+}
+.threefournumkeys{
+ max-width: 100px;
+ max-height: 100px;
+}
+.arrowkeys{
+ max-width: 200px;
+ max-height: 200px;
+}
+
+.playerone{
+
+ margin-top: 910px;
+ margin-left: 150px;
+}
+.playertwo{
+ margin-top: 910px;
+ margin-left: 150px;
+
+}
+.playerOnePic{
+ width: 100px;
+ height: 76px;
+ margin-left: 230px;
+ margin-top: 60px;
+ /*border: 10px solid purple;*/
+}
+.playerOneDiv{
+ width: 40px;
+ height: 76px;
+}
+
+.playerTwoPic{
+ width: 100px;
+ height: 76px;
+ margin-left: 460px;
+ margin-top: -54px;
+}
+
+.playerTwoDiv{
+ width: 40px;
+ height: 76px;
+}
+
+.instructorImg{
+ width: 100px;
+ height: 76px;
+ margin-left: 350px;
+ margin-top: -95px;
+}
+.instructorDiv{
+ width: 40px;
+ height: 76px;
+}
+.instructionsMoves1{
+ float:left;
+ margin-top: 10px;
+}
+.instructionsMoves2{
+ float:left;
+ margin-top: 20px;
+}
+.instructionsMoves3{
+ float:left;
+ margin-top: 20px;
+}
+.instructionsMoves4{
+ float:left;
+ margin-top: 20px;
+}
+
+.player1{
+ background-image: url('../images/player1_default.png')
+}
+
+.instructorPic{
+ background-image: url('../images/instructor_default.png')
+
+}
+
+.player2{
+ background-image: url('../images/player1_default.png')
+}
+
+.move {
+ width: 55px;
+ height: 76px;
+ margin-left: 65px;
+ background-size: no-repeat;
+ transition: all 0.25s ease-in-out;
+}
+
+p{
+ width: 150px;
+ float: right;
+}
+
+.playerOneAlert{
+ width: 30px;
+ height: 50px;
+ margin-top: 260px;
+ margin-left: 250px;
+ opacity:1;
+ transition:opacity 500ms;
+
+}
+
+.playerTwoAlert{
+ width: 30px;
+ height: 50px;
+ text-align: right;
+ margin-top: -50px;
+ margin-left: 470px;
+}
diff --git a/assets/images/12_key.png b/assets/images/12_key.png
new file mode 100644
index 00000000..ca02d80d
Binary files /dev/null and b/assets/images/12_key.png differ
diff --git a/assets/images/34_key.png b/assets/images/34_key.png
new file mode 100644
index 00000000..7d9d2414
Binary files /dev/null and b/assets/images/34_key.png differ
diff --git a/assets/images/Arrow_keys.png b/assets/images/Arrow_keys.png
new file mode 100644
index 00000000..e1696a63
Binary files /dev/null and b/assets/images/Arrow_keys.png differ
diff --git a/assets/images/background1.jpg b/assets/images/background1.jpg
new file mode 100644
index 00000000..3b02d91c
Binary files /dev/null and b/assets/images/background1.jpg differ
diff --git a/assets/images/dancebg.png b/assets/images/dancebg.png
new file mode 100644
index 00000000..c9d51cbb
Binary files /dev/null and b/assets/images/dancebg.png differ
diff --git a/assets/images/divsofgame.png b/assets/images/divsofgame.png
new file mode 100644
index 00000000..391491a2
Binary files /dev/null and b/assets/images/divsofgame.png differ
diff --git a/assets/images/finishedproduct.png b/assets/images/finishedproduct.png
new file mode 100644
index 00000000..8cbf8742
Binary files /dev/null and b/assets/images/finishedproduct.png differ
diff --git a/assets/images/flowchart.png b/assets/images/flowchart.png
new file mode 100644
index 00000000..cfb31e6a
Binary files /dev/null and b/assets/images/flowchart.png differ
diff --git a/assets/images/flowchart2.png b/assets/images/flowchart2.png
new file mode 100644
index 00000000..79d0b1a1
Binary files /dev/null and b/assets/images/flowchart2.png differ
diff --git a/assets/images/game.png b/assets/images/game.png
new file mode 100644
index 00000000..b70718f2
Binary files /dev/null and b/assets/images/game.png differ
diff --git a/assets/images/instructions.png b/assets/images/instructions.png
new file mode 100644
index 00000000..17c28fd4
Binary files /dev/null and b/assets/images/instructions.png differ
diff --git a/assets/images/instructor_1.png b/assets/images/instructor_1.png
new file mode 100644
index 00000000..5690c028
Binary files /dev/null and b/assets/images/instructor_1.png differ
diff --git a/assets/images/instructor_2.png b/assets/images/instructor_2.png
new file mode 100644
index 00000000..0fe60111
Binary files /dev/null and b/assets/images/instructor_2.png differ
diff --git a/assets/images/instructor_3.png b/assets/images/instructor_3.png
new file mode 100644
index 00000000..f3138663
Binary files /dev/null and b/assets/images/instructor_3.png differ
diff --git a/assets/images/instructor_4.png b/assets/images/instructor_4.png
new file mode 100644
index 00000000..fe556f22
Binary files /dev/null and b/assets/images/instructor_4.png differ
diff --git a/assets/images/instructor_default.png b/assets/images/instructor_default.png
new file mode 100644
index 00000000..c7fa8d60
Binary files /dev/null and b/assets/images/instructor_default.png differ
diff --git a/assets/images/player1_1.png b/assets/images/player1_1.png
new file mode 100644
index 00000000..d3c2e749
Binary files /dev/null and b/assets/images/player1_1.png differ
diff --git a/assets/images/player1_2.png b/assets/images/player1_2.png
new file mode 100644
index 00000000..e5b3211f
Binary files /dev/null and b/assets/images/player1_2.png differ
diff --git a/assets/images/player1_3.png b/assets/images/player1_3.png
new file mode 100644
index 00000000..34d1d492
Binary files /dev/null and b/assets/images/player1_3.png differ
diff --git a/assets/images/player1_4.png b/assets/images/player1_4.png
new file mode 100644
index 00000000..f206a711
Binary files /dev/null and b/assets/images/player1_4.png differ
diff --git a/assets/images/player1_default.png b/assets/images/player1_default.png
new file mode 100644
index 00000000..b4da7abc
Binary files /dev/null and b/assets/images/player1_default.png differ
diff --git a/assets/images/stage.jpg b/assets/images/stage.jpg
new file mode 100644
index 00000000..68792c4e
Binary files /dev/null and b/assets/images/stage.jpg differ
diff --git a/assets/js/script.js b/assets/js/script.js
index e69de29b..0fa2df78 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -0,0 +1,291 @@
+//Part 1 - Shuffle array, add a random number btw 1-4 into array(for adding rounds)
+var instructorMoves = [37,38,39,40]
+var whichPlayer = 0
+var playerTest = 0
+var scoreP1 = 0
+var scoreP2 = 0
+var counterP1 = 0
+var counterP2 = 0
+var rounds = 1
+
+
+function shuffleArray(arr) {
+ for (var i = arr.length - 1; i > 0; i--){
+ var shuffle = Math.floor(Math.random() * (i + 1)) // <- semi-colon needed to seperate from next line
+ ;[arr[i], arr[shuffle]] = [arr[shuffle], arr[i]]
+ }
+ return arr
+}
+
+
+$(function(){
+ var $body = $('body')
+ var $instructor = $('.instructor')
+ var $button = $('button')
+ var $playerOne = $('.playerOne')
+ var $playerTwo = $('.playerTwo')
+ $('.playerOneDiv').addClass("player1")
+ $('.playerTwoDiv').addClass("player2")
+ $('.instructorDiv').addClass("instructorPic")
+ var $resetButton = $('')
+ var randSequence = shuffleArray(instructorMoves)
+
+
+ //Part 2a - Add turns after round 1
+ function addTurn(){
+ instructorMoves = instructorMoves.concat(instructorMoves)
+ randSequence = shuffleArray(instructorMoves)
+ return randSequence;
+ }
+ //Making the instructor move according to number sequence
+ function instructorDance () {
+ var instructorMovesPic = [
+ { number: 37, image: 'url("./assets/images/instructor_1.png")' },
+ { number: 38, image: 'url("./assets/images/instructor_2.png")' },
+ { number: 39, image: 'url("./assets/images/instructor_3.png")' },
+ { number: 40, image: 'url("./assets/images/instructor_4.png")' }
+ ];
+ $('.instructorDiv').addClass("move");
+ var timeoutInterval = 1000
+ let test = randSequence.map(function(value) {
+ return (value - 36);
+ })
+
+ for(let e = 0; e <= randSequence.length; e++){
+ for(let i = 0; i < instructorMovesPic.length; i++) {
+ if(instructorMovesPic[i].number === randSequence[e]){
+ setTimeout(function() {
+ $('.instructorDiv').css('backgroundImage', instructorMovesPic[i].image);
+ $instructor.text(test.slice(0,e+1))
+ }, timeoutInterval * (e*0.4))
+ }
+ }
+ }
+ }
+
+ //Adding timer, execute addTurn and call instructorDance
+ function timerWithAddRounds (){
+ var timer = 6;
+ var timerInverval = setInterval(function() {
+ timer--;
+ if(timer >= 0){
+ return $instructor.text(timer)
+ } else {
+ clearInterval(timerInverval)
+ if (rounds > 1) addTurn()
+ instructorDance()
+ return instructorDance()
+ }
+ }, 1000);
+ }
+
+ $('.resetBtn').on('click', function(){
+ document.location.reload(true);
+ })
+
+ //Looping my background music
+ myAudio = new Audio('./assets/audio/bgm.mp3')
+ myAudio.addEventListener('ended', function() {
+ this.currentTime = 0;
+ this.play();
+ }, false);
+
+ $button.on('click' , function () {
+ myAudio.play();
+ timerWithAddRounds()
+ $(".startBtn").hide()
+ $(".resetBtn").show()
+
+ $body.on('keydown', (e) => {
+
+ if(e.which === 49 || e.which === 50|| e.which === 51|| e.which === 52){
+ whichPlayer = 1
+ }
+ if(e.which === 37 || e.which === 38|| e.which === 39|| e.which === 40){
+ whichPlayer = 2
+ }
+
+ //Part 3 - Matching keypressed with instructorMoves in sequence
+ var strOfKeys = e.which - 12 //Player one's key stroke
+ var strOfKeys1 = e.which //Player two's key stroke
+
+ // Set keys with different images for player 1
+ if(strOfKeys === 37) {
+ $('.playerOneDiv').addClass("move");
+ $('.playerOneDiv').css('backgroundImage', `url("./assets/images/player1_1.png")`);
+ new Audio('./assets/audio/sound1.mp3').play()
+ }
+ if(strOfKeys === 38) {
+ $('.playerOneDiv').addClass("move");
+ $('.playerOneDiv').css('backgroundImage', `url("./assets/images/player1_2.png")`);
+ new Audio('./assets/audio/sound2.mp3').play()
+ }
+ if(strOfKeys === 39) {
+ $('.playerOneDiv').addClass("move");
+ $('.playerOneDiv').css('backgroundImage', `url("./assets/images/player1_3.png")`);
+ new Audio('./assets/audio/sound3.mp3').play()
+ }
+ if(strOfKeys === 40) {
+ $('.playerOneDiv').addClass("move");
+ $('.playerOneDiv').css('backgroundImage', `url("./assets/images/player1_4.png")`);
+ new Audio('./assets/audio/sound4.mp3').play()
+ }
+
+ // Set keys with different images for player 2
+ if(strOfKeys === 25) {
+ $('.playerTwoDiv').addClass("move");
+ $('.playerTwoDiv').css('backgroundImage', `url("./assets/images/player1_1.png")`);
+ new Audio('./assets/audio/sound1.mp3').play()
+ }
+ if(strOfKeys === 26) {
+ $('.playerTwoDiv').addClass("move");
+ $('.playerTwoDiv').css('backgroundImage', `url("./assets/images/player1_2.png")`);
+ new Audio('./assets/audio/sound2.mp3').play()
+ }
+ if(strOfKeys === 27) {
+ $('.playerTwoDiv').addClass("move");
+ $('.playerTwoDiv').css('backgroundImage', `url("./assets/images/player1_3.png")`);
+ new Audio('./assets/audio/sound3.mp3').play()
+ }
+ if(strOfKeys === 28) {
+ $('.playerTwoDiv').addClass("move");
+ $('.playerTwoDiv').css('backgroundImage', `url("./assets/images/player1_4.png")`);
+ new Audio('./assets/audio/sound4.mp3').play()
+ }
+
+ //Check Player 1's match with randomized array
+ if(strOfKeys === randSequence[counterP1]) {
+ counterP1++
+ if(counterP1 === 4 && rounds === 1) {
+ $(".playerOneAlert2").html("O").show().delay(2000).fadeOut(1000)
+ $(".playerOneAlert2").css({"color" : "green", "font-size" : "50px"})
+ counterP1 = 0
+ rounds++
+ scoreP1++
+ $playerOne.text(`Score: ${scoreP1}`)
+ new Audio('./assets/audio/cheer.mp3').play()
+ timerWithAddRounds()
+ }
+ if(counterP1 === 8 && rounds === 2) {
+ $(".playerOneAlert2").html("O").show().delay(2000).fadeOut(1000)
+ $(".playerOneAlert2").css({"color" : "green", "font-size" : "50px"})
+ counterP1 = 0
+ rounds++
+ scoreP1++
+ $playerOne.text(`Score: ${scoreP1}`)
+ new Audio('./assets/audio/cheer.mp3').play()
+ timerWithAddRounds()
+ }
+ if(counterP1 === 16 && rounds === 3) {
+ $(".playerOneAlert2").html("O").show().delay(2000).fadeOut(1000)
+ $(".playerOneAlert2").css({"color" : "green", "font-size" : "50px"})
+ counterP1 = 0
+ rounds++
+ scoreP1++
+ $playerOne.text(`Score: ${scoreP1}`)
+ new Audio('./assets/audio/cheer.mp3').play()
+ timerWithAddRounds()
+ }
+ if(counterP1 === 32 && rounds === 4) {
+ $(".playerOneAlert2").html("O").show().delay(2000).fadeOut(1000)
+ $(".playerOneAlert2").css({"color" : "green", "font-size" : "50px"})
+ counterP1 = 0
+ rounds++
+ scoreP1++
+ $playerOne.text(`Score: ${scoreP1}`)
+ new Audio('./assets/audio/cheer.mp3').play()
+ timerWithAddRounds()
+ }
+ if(counterP1 === 64 && rounds === 5) {
+ $(".playerOneAlert2").html("X").show().delay(2000).fadeOut(1000)
+ $(".playerOneAlert2").css({"color" : "green", "font-size" : "50px"})
+ counterP1 = 0
+ rounds++
+ scoreP1++
+ $playerOne.text(`Score: ${scoreP1}`)
+ new Audio('./assets/audio/cheer.mp3').play()
+ if(scoreP1 >= 3){
+ $playerOne.text(`Score: ${scoreP1}, Player 1 won!`)
+ $(".playerOneAlert2").html("Winner!").show().delay(5000).fadeOut(400)
+ $(".playerOneAlert2").css({"color" : "blue", "font-size" : "50px"})
+ }
+ }
+ }
+ else if (strOfKeys !== randSequence[counterP1] && whichPlayer === 1) {
+ $(".playerOneAlert2").html("X").show().delay(400).fadeOut(400)
+ $(".playerOneAlert2").css({"color" : "red", "font-size" : "50px"})
+ new Audio('./assets/audio/boo.mp3').play()
+ counterP1 = 0
+ }
+
+ //Check Player 2's match with randomized array
+ if(strOfKeys1 === randSequence[counterP2]) {
+ counterP2++
+ if(counterP2 === 4 && rounds === 1) {
+ $(".playerTwoAlert2").html("O").show().delay(2000).fadeOut(1000)
+ $(".playerTwoAlert2").css({"color" : "green", "font-size" : "50px"})
+ counterP2 = 0
+ rounds++
+ scoreP2++
+ $playerTwo.text(`Score: ${scoreP2}`)
+ new Audio('./assets/audio/cheer.mp3').play()
+ timerWithAddRounds()
+ }
+ if(counterP2 === 8 && rounds === 2) {
+ $(".playerTwoAlert2").html("O").show().delay(2000).fadeOut(1000)
+ $(".playerTwoAlert2").css({"color" : "green", "font-size" : "50px"})
+ counterP2 = 0
+ rounds++
+ scoreP2++
+ $playerTwo.text(`Score: ${scoreP2}`)
+ new Audio('./assets/audio/cheer.mp3').play()
+ timerWithAddRounds()
+ }
+ if(counterP2 === 16 && rounds === 3) {
+ $(".playerTwoAlert2").html("O").show().delay(2000).fadeOut(1000)
+ $(".playerTwoAlert2").css({"color" : "green", "font-size" : "50px"})
+ counterP2 = 0
+ rounds++
+ scoreP2++
+ $playerTwo.text(`Score: ${scoreP2}`)
+ new Audio('./assets/audio/cheer.mp3').play()
+ timerWithAddRounds()
+ }
+ if(counterP2 === 32 && rounds === 4) {
+ $(".playerTwoAlert2").html("O").show().delay(2000).fadeOut(1000)
+ $(".playerTwoAlert2").css({"color" : "green", "font-size" : "50px"})
+ counterP2 = 0
+ rounds++
+ scoreP2++
+ $playerTwo.text(`Score: ${scoreP2}`)
+ new Audio('./assets/audio/cheer.mp3').play()
+ timerWithAddRounds()
+ }
+ if(counterP2 === 64 && rounds === 5) {
+ $(".playerTwoAlert2").html("O").show().delay(2000).fadeOut(1000)
+ $(".playerTwoAlert2").css({"color" : "green", "font-size" : "50px"})
+ counterP2 = 0
+ rounds++
+ scoreP2++
+ $playerTwo.text(`Score: ${scoreP2}`)
+ new Audio('./assets/audio/cheer.mp3').play()
+ if(scoreP2 >= 3){
+ $playerTwo.text(`Score: ${scoreP2}, Player 2 won!`)
+ $(".playerTwoAlert2").html("Winner!").show().delay(5000).fadeOut(400)
+ $(".playerTwoAlert2").css({"color" : "blue", "font-size" : "50px"})
+ }
+ }
+ }
+ else if (strOfKeys !== randSequence[counterP1] && whichPlayer === 2) {
+ $(".playerTwoAlert2").html("X").show().delay(400).fadeOut(400)
+ $(".playerTwoAlert2").css({"color" : "red", "font-size" : "50px"})
+ new Audio('./assets/audio/boo.mp3').play()
+ counterP2 = 0
+}
+
+
+})
+
+})
+
+})
diff --git a/index.html b/index.html
index 5b002212..2d28cc3a 100644
--- a/index.html
+++ b/index.html
@@ -2,10 +2,58 @@
- P1 Score:0
+ P2 Score:0
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+
+
+
+ 
+ 
+ 
+ 
+ 
+
+
+ Follow the sequence displayed on the screen while the instructor is dancing.
+ Player 1 will be using the 1,2,3 and 4 keys to match the pattern
Player 2 will use left,up,right and down to represent the sequence 1,2,3 and 4.
Whoever that finishes the pattern first will score a point. There will be a total of 5 rounds with more seqences added to each round.
+
+
+
+
+
+ 
+ 
+ 
+
+ Player 1's control
+
+
+ Player 2's control
+
+
+
+
+
+
+