From 39f32fd52e1cc23c8e1c600eabe0e37c8f70f9fe Mon Sep 17 00:00:00 2001 From: SomayaB Date: Mon, 1 May 2017 17:56:12 -0700 Subject: [PATCH 01/28] Update README and add CONTRACT file --- CONTRACT.md | 86 +++++++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 4 +++ 2 files changed, 90 insertions(+) create mode 100644 CONTRACT.md diff --git a/CONTRACT.md b/CONTRACT.md new file mode 100644 index 0000000..d22164d --- /dev/null +++ b/CONTRACT.md @@ -0,0 +1,86 @@ +--- +authors: +- "shereefb" +- "tannerwelsh" +team_size: 1 +goal_id: 83 +title: 'Browser Games [Basic]' +created_at: '2016-10-05T21:34:11Z' +labels: +- foundational +published: true +level: '1' +redirect_from: "/goals/83" +--- + +# Browser Games [Basic] + +## Challenge Rating + +This goal will likely be within your ZPD if you... + +- Can build basic web sites with HTML & CSS +- Can add behavior to a web site with JavaScript +- Are familiar with DOM manipulation +- Are familiar with games like tic-tac-toe and Simon +- Are interested in making more complex interactive web pages + +## Description + +Build simple graphical games for the browser. + +Fork the the [browser-games repository][browser-games] and use the fork as your project artifact. + +Implement the games **Tic-Tac-Toe** and **Simon** from the list in the [games.md][games-list] file. As a stretch, implement the **Connect Four** game. + +You will be using FreeCodeCamp challenges as guides and tutorials for building these games. + +## Context + +This goal will challenge your ability to take a _formal, defined system_ from the real world and replicate it in code. You will start with all of the logic of the system (the rules of the game) and most of the UI already designed. + +Your work will be mainly in deciding how to replicate that formal logic and user interface using JavaScript, HTML, and CSS. + +## Specifications + +#### General + +- [ ] Artifact produced is a fork of the [browser-games][browser-games] repo. +- [ ] Variables, functions, files, etc. have appropriate and meaningful names. +- [ ] HTML, CSS, and JS files are well formatted with proper spacing and indentation. +- [ ] All major features are added via pull requests with a clear description and concise commit messages. +- [ ] Every pull request has been reviewed by at least one other person. +- [ ] The artifact produced is properly licensed, preferably with the [MIT license][mit-license]. + +#### Tic-Tac-Toe + +- [ ] Tic-Tac-Toe game can be found at `public/ticTacToe.html` +- [ ] Tic-Tac-Toe game is playable by two people +- [ ] Tic-Tac-Toe game page is linked from `public/index.html` + +#### Simon + +- [ ] Simon game can be found at `public/ticTacToe.html` +- [ ] Simon game is playable +- [ ] Simon game page is linked from `public/index.html` + +### Stretch + +- [ ] Tic-Tac-Toe has a player-vs-computer version +- [ ] Tic-Tac-Toe AI will always win or tie +- [ ] Simon plays sounds +- Implement Connect Four game + - [ ] Connect Four game can be found at `public/connectFour.html` + - [ ] Connect Four game is playable by two people (human v human) + - [ ] Connect Four game page is linked from `public/index.html` + +## Resources + +- MDN: [Introduction to the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) #html #dom #js +- MDN: [Guide to Event Handlers](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers) #dom #js +- Shay Howe: [Learn to Code HTML & CSS](http://learn.shayhowe.com/html-css/) #html #css + +[browser-games]: https://github.com/GuildCrafts/browser-games +[games-list]: https://github.com/GuildCrafts/browser-games/blob/master/games.md +[basic-games]: https://github.com/GuildCrafts/browser-games/blob/master/games.md#basic-graphical-games +[mit-license]: https://opensource.org/licenses/MIT diff --git a/README.md b/README.md index 09a972f..b38c1a4 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,7 @@ +#diminutive-rat +Somaya Bounouar +http://jsdev.learnersguild.org/goals/83-Browser_Games-Basic.html + # Browser Games A collection of games to play in a web browser. See the full list of games in the [games.md](games.md) file. From 98ce8d6bba0e15d0bcb098a59c55fd42d8003dde Mon Sep 17 00:00:00 2001 From: SomayaB Date: Tue, 2 May 2017 12:00:30 -0700 Subject: [PATCH 02/28] Create static file with HTML and CSS --- public/css/ticTacToe.css | 41 ++++++++++++++++++++++++++++++++++++++++ public/index.html | 4 ++-- public/js/ticTacToe.js | 0 public/ticTacToe.html | 31 ++++++++++++++++++++++++++++++ 4 files changed, 74 insertions(+), 2 deletions(-) create mode 100644 public/css/ticTacToe.css create mode 100644 public/js/ticTacToe.js create mode 100644 public/ticTacToe.html diff --git a/public/css/ticTacToe.css b/public/css/ticTacToe.css new file mode 100644 index 0000000..74c2e67 --- /dev/null +++ b/public/css/ticTacToe.css @@ -0,0 +1,41 @@ +* { + padding: 0px; + margin: 0px; +} + +h1 { + color: white; + margin: 20px; +} + +body { + background: #AA3939; + text-align: center; +} + +canvas { + background: #FFAAAA; + width: 100px; + height: 100px; + -webkit-transkition: -webkit-transfrom 2s; +} + +canvas:hover { + width: 102px; + height: 98px; +} + +#canvasDiv { + margin: 150px auto 40px; + padding: 0px; +} + +#reloadButton { + text-decoration: none; + color: white; + font-size: 20px; +} + +#reloadButton:hover { + font-size: 22px; +} diff --git a/public/index.html b/public/index.html index 278d291..dc025ed 100644 --- a/public/index.html +++ b/public/index.html @@ -13,8 +13,8 @@

Browser Games

diff --git a/public/js/ticTacToe.js b/public/js/ticTacToe.js new file mode 100644 index 0000000..e69de29 diff --git a/public/ticTacToe.html b/public/ticTacToe.html new file mode 100644 index 0000000..a34d0b0 --- /dev/null +++ b/public/ticTacToe.html @@ -0,0 +1,31 @@ + + + + + Tic Tac Toe + + + +

Tic Tac Toe

+ +
+ + +
+ + +
+ + + +
+ + Play Again! + + + + + + + From 43186b9d5b779f07b5542cb8515aa900f6387431 Mon Sep 17 00:00:00 2001 From: SomayaB Date: Tue, 2 May 2017 14:55:35 -0700 Subject: [PATCH 03/28] Implement loop function --- public/css/ticTacToe.css | 17 +++++++-------- public/js/ticTacToe.js | 47 ++++++++++++++++++++++++++++++++++++++++ public/ticTacToe.html | 22 +++++++++---------- 3 files changed, 66 insertions(+), 20 deletions(-) diff --git a/public/css/ticTacToe.css b/public/css/ticTacToe.css index 74c2e67..04832d8 100644 --- a/public/css/ticTacToe.css +++ b/public/css/ticTacToe.css @@ -3,10 +3,6 @@ margin: 0px; } -h1 { - color: white; - margin: 20px; -} body { background: #AA3939; @@ -15,14 +11,17 @@ body { canvas { background: #FFAAAA; - width: 100px; - height: 100px; - -webkit-transkition: -webkit-transfrom 2s; + transition: transform 1s; + -webkit-transition: -webkit-transform 1s; + -moz-transition: -moz-transform 1s; + -ms-transition: -ms-transform 1s; + -o-transition: -o-transform 1s; + } canvas:hover { - width: 102px; - height: 98px; + width: 101px; + height: 99px; } #canvasDiv { diff --git a/public/js/ticTacToe.js b/public/js/ticTacToe.js index e69de29..41e3695 100644 --- a/public/js/ticTacToe.js +++ b/public/js/ticTacToe.js @@ -0,0 +1,47 @@ +var button = [] +for(var i = 1; i < 10; i++) { + button[i] = document.getElementById('canvas'+i) + +} + +var context = [] +for(var i = 1; i < 10; i++){ + context[i] = button[i].getContext('2d') +} + +var buttonDisabled = [] +for(var i = 1; i < 10; i++) { + buttonDisabled[i] = false +} + +var isGameOver = false +var content = [] + +function loop(x) { + if(!buttonDisabled[x]) { + buttonDisabled[x] = true + button[x].style.opacity = 0.7 + content[x] = 'x' + // + button[x].style.Transform = 'rotateY(180deg)' + button[x].style.webkitTransform = 'rotateY(180deg)' + button[x].style.mozTransform = 'rotateY(180deg)' + button[x].style.msTransform = 'rotateY(180deg)' + button[x].style.oTransform = 'rotateY(180deg)' + } + + setTimeout(function(){ + context[x].lineWidth = 3 + context[x].beginPath() + context[x].moveTo(10,10) + context[x].lineTo(90,90) + context[x].moveTo(90,10) + context[x].lineTo(10,90) + context[x].stroke() + context[x].closePath() + + computerTurn() + }, 300) + + checkWinner() +} diff --git a/public/ticTacToe.html b/public/ticTacToe.html index a34d0b0..1bd2f90 100644 --- a/public/ticTacToe.html +++ b/public/ticTacToe.html @@ -6,23 +6,23 @@ -

Tic Tac Toe

- - -
- - -
- - - + + +
+ + +
+ + +
Play Again! - + + From 300f68a89cfb783529c7162cdf7fd2a7c70f27c2 Mon Sep 17 00:00:00 2001 From: SomayaB Date: Tue, 2 May 2017 16:18:32 -0700 Subject: [PATCH 04/28] Add functions to draw x and o --- public/css/ticTacToe.css | 6 +++- public/js/ticTacToe.js | 73 +++++++++++++++++++++++++++++++++++----- public/ticTacToe.html | 3 +- 3 files changed, 71 insertions(+), 11 deletions(-) diff --git a/public/css/ticTacToe.css b/public/css/ticTacToe.css index 04832d8..5811ab9 100644 --- a/public/css/ticTacToe.css +++ b/public/css/ticTacToe.css @@ -3,7 +3,11 @@ margin: 0px; } - +h1 { + color: white; + margin: 20px; + font-size: 50px; +} body { background: #AA3939; text-align: center; diff --git a/public/js/ticTacToe.js b/public/js/ticTacToe.js index 41e3695..716d9c9 100644 --- a/public/js/ticTacToe.js +++ b/public/js/ticTacToe.js @@ -16,7 +16,7 @@ for(var i = 1; i < 10; i++) { var isGameOver = false var content = [] - +console.log(content) function loop(x) { if(!buttonDisabled[x]) { buttonDisabled[x] = true @@ -28,20 +28,75 @@ function loop(x) { button[x].style.mozTransform = 'rotateY(180deg)' button[x].style.msTransform = 'rotateY(180deg)' button[x].style.oTransform = 'rotateY(180deg)' + + setTimeout(function(){ + context[x].lineWidth = 3 + context[x].beginPath() + context[x].moveTo(10,10) + context[x].lineTo(90,90) + context[x].moveTo(90,10) + context[x].lineTo(10,90) + context[x].stroke() + context[x].closePath() + + computerTurn() + }, 300) + + checkWinner() + } +} + +function computerTurn() { + + var random = Math.random() + + if(random < 0.1 && !buttonDisabled[1]) { + draw0Steps(1) + } else if(random < 0.2 && !buttonDisabled[2]) { + draw0Steps(2) + } else if(random < 0.3 && !buttonDisabled[3]) { + draw0Steps(3) + } else if(random < 0.4 && !buttonDisabled[4]) { + draw0Steps(4) + } else if(random < 0.5 && !buttonDisabled[5]) { + draw0Steps(5) + } else if(random < 0.6 && !buttonDisabled[6]) { + draw0Steps(6) + } else if(random < 0.7 && !buttonDisabled[7]) { + draw0Steps(7) + } else if(random < 0.8 && !buttonDisabled[8]) { + draw0Steps(8) + } else if(random < 0.1 && !buttonDisabled[9]) { + draw0Steps(9) + } else { + computerTurn() } +} + +function draw0Steps(x) { + buttonDisabled[x] = true + button[x].style.opacity = 0.7 + content[x] = '0' + button[x].style.webkitTransform = "rotateX(180deg)" setTimeout(function(){ - context[x].lineWidth = 3 context[x].beginPath() - context[x].moveTo(10,10) - context[x].lineTo(90,90) - context[x].moveTo(90,10) - context[x].lineTo(10,90) + context[x].lineWidth = 3 + context[x].arc(50,50,34,0,Math.PI*2,false) context[x].stroke() context[x].closePath() - - computerTurn() }, 300) - checkWinner() +} + +function checkWinner(){ + if(!isGameOver){ + if(content[1] == 'x' && content[2] == 'x' && content[3] == 'x'){ + showWinner() + } + } +} +function showWinner(){ + alert('You won!') + isGameOver = true } diff --git a/public/ticTacToe.html b/public/ticTacToe.html index 1bd2f90..19daffb 100644 --- a/public/ticTacToe.html +++ b/public/ticTacToe.html @@ -6,7 +6,8 @@ - +

Tic Tac Toe

+
From 8711294a04b1b092d0941ddb0a3e523b45d301b9 Mon Sep 17 00:00:00 2001 From: SomayaB Date: Wed, 3 May 2017 17:09:02 -0700 Subject: [PATCH 05/28] Complete player-vs-computer version --- public/css/ticTacToe.css | 4 +- public/js/ticTacToe.js | 111 +++++++++++++++++++++++++-------------- public/ticTacToe.html | 6 +-- 3 files changed, 75 insertions(+), 46 deletions(-) diff --git a/public/css/ticTacToe.css b/public/css/ticTacToe.css index 5811ab9..b4ac4cc 100644 --- a/public/css/ticTacToe.css +++ b/public/css/ticTacToe.css @@ -29,8 +29,8 @@ canvas:hover { } #canvasDiv { - margin: 150px auto 40px; - padding: 0px; + margin: 80px auto 40px; + padding-top: -50px; } #reloadButton { diff --git a/public/js/ticTacToe.js b/public/js/ticTacToe.js index 716d9c9..b887669 100644 --- a/public/js/ticTacToe.js +++ b/public/js/ticTacToe.js @@ -4,9 +4,9 @@ for(var i = 1; i < 10; i++) { } -var context = [] +var canvasContext = [] for(var i = 1; i < 10; i++){ - context[i] = button[i].getContext('2d') + canvasContext[i] = button[i].getContext('2d') } var buttonDisabled = [] @@ -16,87 +16,120 @@ for(var i = 1; i < 10; i++) { var isGameOver = false var content = [] -console.log(content) +var isComputerTurn = false + + function loop(x) { + if (isGameOver || isComputerTurn) return if(!buttonDisabled[x]) { buttonDisabled[x] = true button[x].style.opacity = 0.7 content[x] = 'x' - // + button[x].style.Transform = 'rotateY(180deg)' button[x].style.webkitTransform = 'rotateY(180deg)' button[x].style.mozTransform = 'rotateY(180deg)' button[x].style.msTransform = 'rotateY(180deg)' button[x].style.oTransform = 'rotateY(180deg)' + isComputerTurn = true + checkWinner() + setTimeout(function(){ - context[x].lineWidth = 3 - context[x].beginPath() - context[x].moveTo(10,10) - context[x].lineTo(90,90) - context[x].moveTo(90,10) - context[x].lineTo(10,90) - context[x].stroke() - context[x].closePath() + canvasContext[x].lineWidth = 3 + canvasContext[x].beginPath() + canvasContext[x].moveTo(10,10) + canvasContext[x].lineTo(90,90) + canvasContext[x].moveTo(90,10) + canvasContext[x].lineTo(10,90) + canvasContext[x].stroke() + canvasContext[x].closePath() computerTurn() }, 300) - - checkWinner() } } function computerTurn() { - + if(isGameOver) return var random = Math.random() if(random < 0.1 && !buttonDisabled[1]) { - draw0Steps(1) + draw0(1) } else if(random < 0.2 && !buttonDisabled[2]) { - draw0Steps(2) + draw0(2) } else if(random < 0.3 && !buttonDisabled[3]) { - draw0Steps(3) + draw0(3) } else if(random < 0.4 && !buttonDisabled[4]) { - draw0Steps(4) + draw0(4) } else if(random < 0.5 && !buttonDisabled[5]) { - draw0Steps(5) + draw0(5) } else if(random < 0.6 && !buttonDisabled[6]) { - draw0Steps(6) + draw0(6) } else if(random < 0.7 && !buttonDisabled[7]) { - draw0Steps(7) + draw0(7) } else if(random < 0.8 && !buttonDisabled[8]) { - draw0Steps(8) - } else if(random < 0.1 && !buttonDisabled[9]) { - draw0Steps(9) - } else { - computerTurn() + draw0(8) + } else if(random < 1 && !buttonDisabled[9]) { + draw0(9) } + checkWinner() } -function draw0Steps(x) { +function draw0(x) { buttonDisabled[x] = true button[x].style.opacity = 0.7 content[x] = '0' button[x].style.webkitTransform = "rotateX(180deg)" setTimeout(function(){ - context[x].beginPath() - context[x].lineWidth = 3 - context[x].arc(50,50,34,0,Math.PI*2,false) - context[x].stroke() - context[x].closePath() + canvasContext[x].beginPath() + canvasContext[x].lineWidth = 3 + canvasContext[x].arc(50,50,34,0,Math.PI*2,false) + canvasContext[x].stroke() + canvasContext[x].closePath() + isComputerTurn = false }, 300) - } function checkWinner(){ if(!isGameOver){ - if(content[1] == 'x' && content[2] == 'x' && content[3] == 'x'){ - showWinner() - } + if(content[1] == 'x' && content[2] == 'x' && content[3] == 'x') showWinner('You won!') + else if(content[4] == 'x' && content[5] == 'x' && content[6] == 'x') showWinner('You won!') + else if(content[7] == 'x' && content[8] == 'x' && content[9] == 'x') showWinner('You won!') + else if(content[1] == 'x' && content[4] == 'x' && content[7] == 'x') showWinner('You won!') + else if(content[2] == 'x' && content[5] == 'x' && content[8] == 'x') showWinner('You won!') + else if(content[3] == 'x' && content[6] == 'x' && content[9] == 'x') showWinner('You won!') + else if(content[1] == 'x' && content[5] == 'x' && content[9] == 'x') showWinner('You won!') + else if(content[3] == 'x' && content[5] == 'x' && content[7] == 'x') showWinner('You won!') + + else if(content[1] == '0' && content[2] == '0' && content[3] == '0') showWinner('You lost!') + else if(content[4] == '0' && content[5] == '0' && content[6] == '0') showWinner('You lost!') + else if(content[7] == '0' && content[8] == '0' && content[9] == '0') showWinner('You lost!') + else if(content[1] == '0' && content[4] == '0' && content[7] == '0') showWinner('You lost!') + else if(content[2] == '0' && content[5] == '0' && content[8] == '0') showWinner('You lost!') + else if(content[3] == '0' && content[6] == '0' && content[9] == '0') showWinner('You lost!') + else if(content[1] == '0' && content[5] == '0' && content[9] == '0') showWinner('You lost!') + else if(content[3] == '0' && content[5] == '0' && content[7] == '0') showWinner('You lost!') + + else if( + (content[1] == 'x' || content[1] == '0') && + (content[2] == 'x' || content[2] == '0') && + (content[3] == 'x' || content[3] == '0') && + (content[4] == 'x' || content[4] == '0') && + (content[5] == 'x' || content[5] == '0') && + (content[6] == 'x' || content[6] == '0') && + (content[7] == 'x' || content[7] == '0') && + (content[8] == 'x' || content[8] == '0') && + (content[9] == 'x' || content[9] == '0') + + ) showWinner("It's a draw. Play again!") } } -function showWinner(){ - alert('You won!') + +function showWinner(message){ isGameOver = true + setTimeout(function() { + alert(message) + }, 1000) } diff --git a/public/ticTacToe.html b/public/ticTacToe.html index 19daffb..c9e2ffc 100644 --- a/public/ticTacToe.html +++ b/public/ticTacToe.html @@ -7,7 +7,7 @@

Tic Tac Toe

- +
@@ -26,7 +26,3 @@

Tic Tac Toe

- - - From bc768eafa2fd472188afa2d35d72487602ad2898 Mon Sep 17 00:00:00 2001 From: SomayaB Date: Wed, 3 May 2017 17:49:43 -0700 Subject: [PATCH 06/28] Add html, css and js files --- public/css/simon.css | 0 public/index.html | 1 - public/js/simon.js | 0 public/simon.html | 12 ++++++++++++ 4 files changed, 12 insertions(+), 1 deletion(-) create mode 100644 public/css/simon.css create mode 100644 public/js/simon.js create mode 100644 public/simon.html diff --git a/public/css/simon.css b/public/css/simon.css new file mode 100644 index 0000000..e69de29 diff --git a/public/index.html b/public/index.html index dc025ed..1f91f20 100644 --- a/public/index.html +++ b/public/index.html @@ -15,7 +15,6 @@

Browser Games

diff --git a/public/js/simon.js b/public/js/simon.js new file mode 100644 index 0000000..e69de29 diff --git a/public/simon.html b/public/simon.html new file mode 100644 index 0000000..c7ce9d8 --- /dev/null +++ b/public/simon.html @@ -0,0 +1,12 @@ + + + + + Simon + + +

Simon

+

Round:

+ + + From dca56d7d9a009155c10ff143d797ff747c3c55c3 Mon Sep 17 00:00:00 2001 From: SomayaB Date: Thu, 4 May 2017 16:07:20 -0700 Subject: [PATCH 07/28] WIP --- public/css/simon.css | 116 ++++++++++++++++++++++++++++ public/js/simon.js | 148 ++++++++++++++++++++++++++++++++++++ public/js/simonSounds/1.mp3 | Bin 0 -> 19356 bytes public/js/simonSounds/1.ogg | Bin 0 -> 5186 bytes public/js/simonSounds/2.mp3 | Bin 0 -> 19356 bytes public/js/simonSounds/2.ogg | Bin 0 -> 5096 bytes public/js/simonSounds/3.mp3 | Bin 0 -> 19356 bytes public/js/simonSounds/3.ogg | Bin 0 -> 5211 bytes public/js/simonSounds/4.mp3 | Bin 0 -> 19356 bytes public/js/simonSounds/4.ogg | Bin 0 -> 5243 bytes public/simon.html | 39 +++++++--- 11 files changed, 294 insertions(+), 9 deletions(-) create mode 100644 public/js/simonSounds/1.mp3 create mode 100755 public/js/simonSounds/1.ogg create mode 100644 public/js/simonSounds/2.mp3 create mode 100755 public/js/simonSounds/2.ogg create mode 100644 public/js/simonSounds/3.mp3 create mode 100755 public/js/simonSounds/3.ogg create mode 100644 public/js/simonSounds/4.mp3 create mode 100755 public/js/simonSounds/4.ogg diff --git a/public/css/simon.css b/public/css/simon.css index e69de29..b2b1fcd 100644 --- a/public/css/simon.css +++ b/public/css/simon.css @@ -0,0 +1,116 @@ +body { + font-family: Arial, serif; + color: black; + -webkit-user-select: none; /* Chrome/Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* IE10+ */ + -o-user-select: none; + user-select: none; + background: white; +} + +ul { + list-style: none; +} + +ul, li { + padding: 0; + margin: 0; +} + +p[data-action="lose"] { + display: none; +} + +.active { + opacity: 1 !important; +} + +.wrapper { + width: 540px; + margin: 0 auto; + margin-top: 90px; +} + +/*.container { + width: 305px; +}*/ + +.simon { + /*background: white;*/ + position: relative; + float: left; + margin-right: 3em; + width: 295px; + height: 290px; + /*-webkit-border-radius: 150px 150px 150px 150px; + border-radius: 150px 150px 150px 150px;*/ + /*-moz-box-shadow: 2px 1px 12px #aaa; + -webkit-box-shadow: 2px 1px 12px #aaa; + -o-box-shadow: 2px 1px 12px #aaa; + box-shadow: 2px 1px 12px #aaa;*/ +} + +.tile { + opacity: 0.7; + -webkit-transition: opacity 250ms ease; + -moz-transition: opacity 250ms ease; + -ms-transition: opacity 250ms ease; + -o-transition: opacity 250ms ease; + transition: opacity 250ms ease; +} + +.tile.lit { + opacity: 1; +} + +.red, .blue, .yellow, .green { + height: 290px; + -webkit-border-radius: 150px 150px 150px 150px; + border-radius: 150px 150px 150px 150px; + position: absolute; + text-indent: 10000px; +} + +.red:hover, .blue:hover, .yellow:hover, .green:hover { + border: 2px solid black; +} + +.red { + background: #b00101; + clip: rect(0px, 300px, 150px, 150px); + width: 296px; +} + +.blue { + background: #000fd9; + clip: rect(0px, 150px, 150px, 0px); + width: 300px; +} + +.yellow { + background: #deb502; + clip: rect(150px, 150px, 300px, 0px); + width: 300px; +} + +.green { + background: #00850d; + clip: rect(150px,300px, 300px, 150px); + width: 296px; +} + +.game-info button { + width: 5em; + box-sizing: border-box; + font-size: 1.4em; + -webkit-border-radius: 10px 10px 10px 10px; + border-radius: 10px 10px 10px 10px; + background: #6DABE8; + border: none; + padding: 0.3em 0.6em; +} + +.game-info button:hover { + background: #78BCFF; +} diff --git a/public/js/simon.js b/public/js/simon.js index e69de29..4d970bc 100644 --- a/public/js/simon.js +++ b/public/js/simon.js @@ -0,0 +1,148 @@ + +// Wait for player to click start +// Start a round, which follows these steps +// Add a random number (1-4) to the sequence +// Animate the sequence to the user +// Enable user interaction with the board, and register any clicks on the Simon tiles +// While the player has not entered an incorrect response, and the number of clicks is less than the length of the sequence, wait for player input +// Continue adding rounds until the player loses + + var Simon = { + sequence: [], + copy: [], + round: 0, + active: true, + + init: function() { + var that = this; + document.querySelector('.start').addEventListener('click', function() { + that.startGame(); + }) + }, + + startGame: function() { + this.sequence = []; + this.copy = []; + this.round = 0; + this.active = true; + document.querySelector('.lose').style.visibility = "hidden" + this.newRound(); + }, + + // add a new color to the sequence and animate it to the user + newRound: function() { + document.querySelector('.round').innerText(++this.round); + this.sequence.push(this.randomNumber()); + this.copy = this.sequence.slice(0); + this.animate(this.sequence); + }, + + // the game is controlled primarily through this function, along with checkLose(). + // Since the player can never actually "win", we just listen for clicks as the user + // plays the sequence and each time, check if they lost + registerClick: function(event) { + var desiredResponse = this.copy.shift(); + var actualResponse = $(event.target).data('tile'); + this.active = (desiredResponse === actualResponse); + this.checkLose(); + }, + + // three possible situations: + // 1. The user clicked the wrong color (end the game) + // 2. The user entered the right color, but is not finished with the sequence (do nothing) + // 3. The user entered the right color and just completed the sequence (start a new round) + checkLose: function() { + // copy array will be empty when user has successfully completed sequence + if (this.copy.length === 0 && this.active) { + this.deactivateSimonBoard(); + this.newRound(); + + } else if (!this.active) { // user lost + this.deactivateSimonBoard(); + this.endGame(); + } + }, + + endGame: function() { + // notify the user that they lost and change the "round" text to zero + document.querySelector('.lose').show(); + document.querySelector('.round').get(0).text('0'); + }, + + /*----------------- Helper functions -------------------*/ + + // allow user to interact with the game + activateSimonBoard: function() { + var that = this; + document.querySelector('.tile').onclick.console.log('hi') + // $('.simon') + // .on('click', '[data-tile]', function(e) { + // that.registerClick(e); + // }) + + .on('mousedown', '[data-tile]', function(){ + $(this).addClass('active'); + that.playSound($(this).data('tile')); + }) + + .on('mouseup', '[data-tile]', function(){ + $(this).removeClass('active'); + }); + + $('[data-tile]').addClass('hoverable'); + }, + + // prevent user from interacting until sequence is done animating + deactivateSimonBoard: function() { + document.querySelector('.simon') + .off('click', '[data-tile]') + .off('mousedown', '[data-tile]') + .off('mouseup', '[data-tile]'); + + $('[data-tile]').removeClass('hoverable'); + }, + + animate: function(sequence) { + var i = 0; + var that = this; + var interval = setInterval(function() { + that.playSound(sequence[i]); + that.lightUp(sequence[i]); + + i++; + if (i >= sequence.length) { + clearInterval(interval); + that.activateSimonBoard(); + } + }, 600); + }, + + lightUp: function(tile) { + var $tile = $('[data-tile=' + tile + ']').addClass('lit'); + window.setTimeout(function() { + $tile.removeClass('lit'); + }, 300); + + + }, + + // we are embedding the sound file on the fly for the following benefits: + // 1. ability to play multiple sounds in a row without waiting for the first to complete, + // 2.
-
-

Round: 0

- -

Sorry, you lost after rounds!

+
+

Round: 0

+ +

Sorry, you lost after rounds!

- +
From ea431407cac04b594cdb7fec52d31f8ad28d5a17 Mon Sep 17 00:00:00 2001 From: SomayaB Date: Fri, 5 May 2017 11:45:04 -0700 Subject: [PATCH 09/28] Add more meaningful variable names --- public/js/ticTacToe.js | 101 ++++++++++++++++++++--------------------- public/ticTacToe.html | 1 + 2 files changed, 51 insertions(+), 51 deletions(-) diff --git a/public/js/ticTacToe.js b/public/js/ticTacToe.js index b887669..37257ee 100644 --- a/public/js/ticTacToe.js +++ b/public/js/ticTacToe.js @@ -1,11 +1,10 @@ var button = [] for(var i = 1; i < 10; i++) { - button[i] = document.getElementById('canvas'+i) - + button[i] = document.getElementById('canvas'+ i) } var canvasContext = [] -for(var i = 1; i < 10; i++){ +for(var i = 1; i < 10; i++) { canvasContext[i] = button[i].getContext('2d') } @@ -15,35 +14,35 @@ for(var i = 1; i < 10; i++) { } var isGameOver = false -var content = [] +var btnContent = [] var isComputerTurn = false -function loop(x) { +function loop(currentButton) { //Need help giving this function a better name if (isGameOver || isComputerTurn) return - if(!buttonDisabled[x]) { - buttonDisabled[x] = true - button[x].style.opacity = 0.7 - content[x] = 'x' + if(!buttonDisabled[currentButton]) { + buttonDisabled[currentButton] = true + button[currentButton].style.opacity = 0.7 + btnContent[currentButton] = 'x' - button[x].style.Transform = 'rotateY(180deg)' - button[x].style.webkitTransform = 'rotateY(180deg)' - button[x].style.mozTransform = 'rotateY(180deg)' - button[x].style.msTransform = 'rotateY(180deg)' - button[x].style.oTransform = 'rotateY(180deg)' + button[currentButton].style.Transform = 'rotateY(180deg)' + button[currentButton].style.webkitTransform = 'rotateY(180deg)' + button[currentButton].style.mozTransform = 'rotateY(180deg)' + button[currentButton].style.msTransform = 'rotateY(180deg)' + button[currentButton].style.oTransform = 'rotateY(180deg)' isComputerTurn = true checkWinner() setTimeout(function(){ - canvasContext[x].lineWidth = 3 - canvasContext[x].beginPath() - canvasContext[x].moveTo(10,10) - canvasContext[x].lineTo(90,90) - canvasContext[x].moveTo(90,10) - canvasContext[x].lineTo(10,90) - canvasContext[x].stroke() - canvasContext[x].closePath() + canvasContext[currentButton].lineWidth = 3 + canvasContext[currentButton].beginPath() + canvasContext[currentButton].moveTo(10,10) + canvasContext[currentButton].lineTo(90,90) + canvasContext[currentButton].moveTo(90,10) + canvasContext[currentButton].lineTo(10,90) + canvasContext[currentButton].stroke() + canvasContext[currentButton].closePath() computerTurn() }, 300) @@ -79,7 +78,7 @@ function computerTurn() { function draw0(x) { buttonDisabled[x] = true button[x].style.opacity = 0.7 - content[x] = '0' + btnContent[x] = '0' button[x].style.webkitTransform = "rotateX(180deg)" setTimeout(function(){ @@ -94,36 +93,36 @@ function draw0(x) { function checkWinner(){ if(!isGameOver){ - if(content[1] == 'x' && content[2] == 'x' && content[3] == 'x') showWinner('You won!') - else if(content[4] == 'x' && content[5] == 'x' && content[6] == 'x') showWinner('You won!') - else if(content[7] == 'x' && content[8] == 'x' && content[9] == 'x') showWinner('You won!') - else if(content[1] == 'x' && content[4] == 'x' && content[7] == 'x') showWinner('You won!') - else if(content[2] == 'x' && content[5] == 'x' && content[8] == 'x') showWinner('You won!') - else if(content[3] == 'x' && content[6] == 'x' && content[9] == 'x') showWinner('You won!') - else if(content[1] == 'x' && content[5] == 'x' && content[9] == 'x') showWinner('You won!') - else if(content[3] == 'x' && content[5] == 'x' && content[7] == 'x') showWinner('You won!') - - else if(content[1] == '0' && content[2] == '0' && content[3] == '0') showWinner('You lost!') - else if(content[4] == '0' && content[5] == '0' && content[6] == '0') showWinner('You lost!') - else if(content[7] == '0' && content[8] == '0' && content[9] == '0') showWinner('You lost!') - else if(content[1] == '0' && content[4] == '0' && content[7] == '0') showWinner('You lost!') - else if(content[2] == '0' && content[5] == '0' && content[8] == '0') showWinner('You lost!') - else if(content[3] == '0' && content[6] == '0' && content[9] == '0') showWinner('You lost!') - else if(content[1] == '0' && content[5] == '0' && content[9] == '0') showWinner('You lost!') - else if(content[3] == '0' && content[5] == '0' && content[7] == '0') showWinner('You lost!') + if(btnContent[1] == 'x' && btnContent[2] == 'x' && btnContent[3] == 'x') showWinner('You won!') + else if(btnContent[4] == 'x' && btnContent[5] == 'x' && btnContent[6] == 'x') showWinner('You won!') + else if(btnContent[7] == 'x' && btnContent[8] == 'x' && btnContent[9] == 'x') showWinner('You won!') + else if(btnContent[1] == 'x' && btnContent[4] == 'x' && btnContent[7] == 'x') showWinner('You won!') + else if(btnContent[2] == 'x' && btnContent[5] == 'x' && btnContent[8] == 'x') showWinner('You won!') + else if(btnContent[3] == 'x' && btnContent[6] == 'x' && btnContent[9] == 'x') showWinner('You won!') + else if(btnContent[1] == 'x' && btnContent[5] == 'x' && btnContent[9] == 'x') showWinner('You won!') + else if(btnContent[3] == 'x' && btnContent[5] == 'x' && btnContent[7] == 'x') showWinner('You won!') + + else if(btnContent[1] == '0' && btnContent[2] == '0' && btnContent[3] == '0') showWinner('You lost!') + else if(btnContent[4] == '0' && btnContent[5] == '0' && btnContent[6] == '0') showWinner('You lost!') + else if(btnContent[7] == '0' && btnContent[8] == '0' && btnContent[9] == '0') showWinner('You lost!') + else if(btnContent[1] == '0' && btnContent[4] == '0' && btnContent[7] == '0') showWinner('You lost!') + else if(btnContent[2] == '0' && btnContent[5] == '0' && btnContent[8] == '0') showWinner('You lost!') + else if(btnContent[3] == '0' && btnContent[6] == '0' && btnContent[9] == '0') showWinner('You lost!') + else if(btnContent[1] == '0' && btnContent[5] == '0' && btnContent[9] == '0') showWinner('You lost!') + else if(btnContent[3] == '0' && btnContent[5] == '0' && btnContent[7] == '0') showWinner('You lost!') else if( - (content[1] == 'x' || content[1] == '0') && - (content[2] == 'x' || content[2] == '0') && - (content[3] == 'x' || content[3] == '0') && - (content[4] == 'x' || content[4] == '0') && - (content[5] == 'x' || content[5] == '0') && - (content[6] == 'x' || content[6] == '0') && - (content[7] == 'x' || content[7] == '0') && - (content[8] == 'x' || content[8] == '0') && - (content[9] == 'x' || content[9] == '0') - - ) showWinner("It's a draw. Play again!") + (btnContent[1] == 'x' || btnContent[1] == '0') && + (btnContent[2] == 'x' || btnContent[2] == '0') && + (btnContent[3] == 'x' || btnContent[3] == '0') && + (btnContent[4] == 'x' || btnContent[4] == '0') && + (btnContent[5] == 'x' || btnContent[5] == '0') && + (btnContent[6] == 'x' || btnContent[6] == '0') && + (btnContent[7] == 'x' || btnContent[7] == '0') && + (btnContent[8] == 'x' || btnContent[8] == '0') && + (btnContent[9] == 'x' || btnContent[9] == '0') + ) + showWinner("It's a draw. Play again!") } } diff --git a/public/ticTacToe.html b/public/ticTacToe.html index c9e2ffc..ff5ee79 100644 --- a/public/ticTacToe.html +++ b/public/ticTacToe.html @@ -6,6 +6,7 @@ +

Tic Tac Toe

From fc20c182356066efc4e42e4b6bcc199a44a06476 Mon Sep 17 00:00:00 2001 From: SomayaB Date: Fri, 5 May 2017 12:55:36 -0700 Subject: [PATCH 10/28] still working --- public/js/simon.js | 57 ++++++++++++++++++++++++++++++++++++---------- 1 file changed, 45 insertions(+), 12 deletions(-) diff --git a/public/js/simon.js b/public/js/simon.js index 589745a..1b8db02 100644 --- a/public/js/simon.js +++ b/public/js/simon.js @@ -23,34 +23,67 @@ var randomNumber = function() { var animate = function(sequence) { var i = 0; - var that = this; var interval = setInterval(function() { - // that.playSound(sequence[i]); - that.lightUp(sequence[i]); + playSound(sequence[i]); + lightUp(sequence[i]); i++; if (i >= sequence.length) { clearInterval(interval); - that.activateSimonBoard(); + activateSimonBoard(); } }, 600); } -// var playSound = function(tile) { -// var audio = $(''); -// audio.append(''); -// audio.append(''); -// document.querySelector('[data-action=sound]').innerHTMLhtml(audio); -// } +var playSound = function(tile) { + let audio = document.createElement('audio') + audio.setAttribute('autoplay', true) + let source1 = document.createElement('source') + source1.src = 'js/simonSounds/' + tile + '.ogg' + source1.type = 'audio/ogg' + let source2 = document.createElement('source') + source2.src = 'js/simonSounds/' + tile + '.mp3' + source2.type = 'audio/mp3' + audio.appendChild(source1) + audio.appendChild(source2) + document.querySelector('[data-action="sound"]').appendChild(audio) +} var lightUp = function(tile) { - var $tile = document.querySelector('[data-tile=' + tile + ']').className += ' lit'; + var tileDom = document.querySelector('[data-tile="' + tile + '"]') + tileDom.className += ' lit'; window.setTimeout(function() { - $tile.classList.remove('lit'); + tileDom.classList.remove('lit'); }, 300); } +var activateSimonBoard = function() { + document.querySelector('.simon').addEventListener('click', function(event) { + let num = event.target.getAttribute('data-tile') + registerClick(num) + }) +} +// +// +// .on('mousedown', '[data-tile]', function(){ +// $(this).addClass('active'); +// that.playSound($(this).data('tile')); +// }) +// +// .on('mouseup', '[data-tile]', function(){ +// $(this).removeClass('active'); +// }); +// +// $('[data-tile]').addClass('hoverable'); +// }, + +var registerClick = function(num) { + var desiredResponse = this.copy.shift(); + var actualResponse = num + this.active = (desiredResponse === actualResponse); + this.checkLose(); +} window.onload = function() { document.querySelector('[data-action=start]').addEventListener('click', function() { From cba2fd4cb74d56f6a756db2f321a907b6777a10f Mon Sep 17 00:00:00 2001 From: SomayaB Date: Fri, 5 May 2017 14:50:50 -0700 Subject: [PATCH 11/28] Add Simon game functionality for 1 round --- CONTRACT.md | 22 ++-- public/js/simon.js | 249 +++++++++------------------------------------ public/simon.html | 43 ++++---- 3 files changed, 84 insertions(+), 230 deletions(-) diff --git a/CONTRACT.md b/CONTRACT.md index d22164d..d114776 100644 --- a/CONTRACT.md +++ b/CONTRACT.md @@ -45,30 +45,30 @@ Your work will be mainly in deciding how to replicate that formal logic and user #### General -- [ ] Artifact produced is a fork of the [browser-games][browser-games] repo. -- [ ] Variables, functions, files, etc. have appropriate and meaningful names. -- [ ] HTML, CSS, and JS files are well formatted with proper spacing and indentation. +- [x] Artifact produced is a fork of the [browser-games][browser-games] repo. +- [x] Variables, functions, files, etc. have appropriate and meaningful names. +- [x] HTML, CSS, and JS files are well formatted with proper spacing and indentation. - [ ] All major features are added via pull requests with a clear description and concise commit messages. -- [ ] Every pull request has been reviewed by at least one other person. -- [ ] The artifact produced is properly licensed, preferably with the [MIT license][mit-license]. +- [x] Every pull request has been reviewed by at least one other person. +- [x] The artifact produced is properly licensed, preferably with the [MIT license][mit-license]. #### Tic-Tac-Toe -- [ ] Tic-Tac-Toe game can be found at `public/ticTacToe.html` +- [x] Tic-Tac-Toe game can be found at `public/ticTacToe.html` - [ ] Tic-Tac-Toe game is playable by two people -- [ ] Tic-Tac-Toe game page is linked from `public/index.html` +- [x] Tic-Tac-Toe game page is linked from `public/index.html` #### Simon -- [ ] Simon game can be found at `public/ticTacToe.html` +- [x] Simon game can be found at `public/ticTacToe.html` - [ ] Simon game is playable -- [ ] Simon game page is linked from `public/index.html` +- [x] Simon game page is linked from `public/index.html` ### Stretch -- [ ] Tic-Tac-Toe has a player-vs-computer version +- [x] Tic-Tac-Toe has a player-vs-computer version - [ ] Tic-Tac-Toe AI will always win or tie -- [ ] Simon plays sounds +- [x] Simon plays sounds - Implement Connect Four game - [ ] Connect Four game can be found at `public/connectFour.html` - [ ] Connect Four game is playable by two people (human v human) diff --git a/public/js/simon.js b/public/js/simon.js index 1b8db02..c63ce3b 100644 --- a/public/js/simon.js +++ b/public/js/simon.js @@ -1,38 +1,41 @@ - +var sequence = [] +var copy = [] +var round = 0 +var active = true var startGame = function() { - this.sequence = []; - this.copy = []; - this.round = 0; - this.active = true; document.querySelector('[data-action="lose"]').style.visibility = "hidden" - this.newRound(); + sequence = [] + copy = [] + round = 0 + active = true + newRound() } var newRound = function() { - document.querySelector('[data-round]').innerHTML = ++this.round; - this.sequence.push(this.randomNumber()); - this.copy = this.sequence.slice(0); - this.animate(this.sequence); + document.querySelector('[data-round]').innerHTML = ++round + sequence.push(randomNumber()) + copy = sequence.slice(0) + animate(sequence) } var randomNumber = function() { - return Math.floor((Math.random()*4)+1); - } + return Math.floor((Math.random()*4)+1) +} var animate = function(sequence) { - var i = 0; + var i = 0 var interval = setInterval(function() { - playSound(sequence[i]); - lightUp(sequence[i]); + playSound(sequence[i]) + lightUp(sequence[i]) - i++; + i++ if (i >= sequence.length) { - clearInterval(interval); - activateSimonBoard(); + clearInterval(interval) + activateSimonBoard() } - }, 600); + }, 600) } var playSound = function(tile) { @@ -51,10 +54,10 @@ var playSound = function(tile) { var lightUp = function(tile) { var tileDom = document.querySelector('[data-tile="' + tile + '"]') - tileDom.className += ' lit'; + tileDom.className += ' lit' window.setTimeout(function() { - tileDom.classList.remove('lit'); - }, 300); + tileDom.classList.remove('lit') + }, 300) } var activateSimonBoard = function() { @@ -62,192 +65,40 @@ var activateSimonBoard = function() { let num = event.target.getAttribute('data-tile') registerClick(num) }) + document.querySelector('[data-tile]').className += ' hoverable' } -// -// -// .on('mousedown', '[data-tile]', function(){ -// $(this).addClass('active'); -// that.playSound($(this).data('tile')); -// }) -// -// .on('mouseup', '[data-tile]', function(){ -// $(this).removeClass('active'); -// }); -// -// $('[data-tile]').addClass('hoverable'); -// }, - var registerClick = function(num) { - var desiredResponse = this.copy.shift(); + var desiredResponse = copy.shift() var actualResponse = num - this.active = (desiredResponse === actualResponse); - this.checkLose(); + active = (desiredResponse == actualResponse) + checkLose() } -window.onload = function() { - document.querySelector('[data-action=start]').addEventListener('click', function() { - startGame(); - }) +var checkLose = function() { + if (copy.length === 0 && active) { + deactivateSimonBoard() + newRound() + } else if (!active) { + deactivateSimonBoard() + endGame() + } } +var deactivateSimonBoard = function() { + document.querySelector('.tile').removeEventListener('click', function() { + }) + document.querySelector('[data-tile]').classList.remove('hoverable') +} +var endGame = function() { + document.querySelector('[data-action="lose"]').style.visibility = "visible" +} - - - - - - - - -// -// // add a new color to the sequence and animate it to the user -// newRound: function() { -// document.querySelector('.round').innerText(++this.round); -// this.sequence.push(this.randomNumber()); -// this.copy = this.sequence.slice(0); -// this.animate(this.sequence); -// }, -// -// // the game is controlled primarily through this function, along with checkLose(). -// // Since the player can never actually "win", we just listen for clicks as the user -// // plays the sequence and each time, check if they lost -// registerClick: function(event) { -// var desiredResponse = this.copy.shift(); -// // var actualResponse = $(event.target).data('tile'); -// // //document..data -// // this.active = (desiredResponse === actualResponse); -// // this.checkLose(); -// }, -// -// // three possible situations: -// // 1. The user clicked the wrong color (end the game) -// // 2. The user entered the right color, but is not finished with the sequence (do nothing) -// // 3. The user entered the right color and just completed the sequence (start a new round) -// checkLose: function() { -// // copy array will be empty when user has successfully completed sequence -// if (this.copy.length === 0 && this.active) { -// this.deactivateSimonBoard(); -// this.newRound(); -// -// } else if (!this.active) { // user lost -// this.deactivateSimonBoard(); -// this.endGame(); -// } -// }, -// -// endGame: function() { -// // notify the user that they lost and change the "round" text to zero -// document.querySelector('.lose').show(); -// document.querySelector('.round').get(0).text('0'); -// }, -// -// /*----------------- Helper functions -------------------*/ -// -// // allow user to interact with the game -// activateSimonBoard: function() { -// var that = this; -// document.querySelector('.tile').onclick.console.log('hi') -// // $('.simon') -// // .on('click', '[data-tile]', function(e) { -// // that.registerClick(e); -// // }) -// -// .on('mousedown', '[data-tile]', function(){ -// $(this).addClass('active'); -// that.playSound($(this).data('tile')); -// }) -// -// .on('mouseup', '[data-tile]', function(){ -// $(this).removeClass('active'); -// }); -// -// $('[data-tile]').addClass('hoverable'); -// }, -// -// // prevent user from interacting until sequence is done animating -// deactivateSimonBoard: function() { -// document.querySelector('.simon') -// .off('click', '[data-tile]') -// .off('mousedown', '[data-tile]') -// .off('mouseup', '[data-tile]'); -// -// $('[data-tile]').removeClass('hoverable'); -// }, -// -// animate: function(sequence) { -// var i = 0; -// var that = this; -// var interval = setInterval(function() { -// that.playSound(sequence[i]); -// that.lightUp(sequence[i]); -// -// i++; -// if (i >= sequence.length) { -// clearInterval(interval); -// that.activateSimonBoard(); -// } -// }, 600); -// }, -// -// lightUp: function(tile) { -// var $tile = $('[data-tile=' + tile + ']').addClass('lit'); -// window.setTimeout(function() { -// $tile.removeClass('lit'); -// }, 300); -// }, -// -// // we are embedding the sound file on the fly for the following benefits: -// // 1. ability to play multiple sounds in a row without waiting for the first to complete, -// // 2.
+ From 311ecfd11e05e895c14bae33631c7760c96cb485 Mon Sep 17 00:00:00 2001 From: SomayaB Date: Tue, 16 May 2017 16:25:36 -0700 Subject: [PATCH 27/28] Cleans code and spacing --- public/js/platform.js | 29 +++++------------------------ public/platform.html | 1 - 2 files changed, 5 insertions(+), 25 deletions(-) diff --git a/public/js/platform.js b/public/js/platform.js index 7d70bca..6cc92f1 100644 --- a/public/js/platform.js +++ b/public/js/platform.js @@ -27,14 +27,12 @@ function Level(plan) { })[0]; this.status = this.finishDelay = null; } - Level.prototype.isFinished = function() { return this.status != null && this.finishDelay < 0; } - function Vector(x, y) { - this.x = x + this.x = x; this.y = y; } Vector.prototype.plus = function(other) { @@ -50,7 +48,6 @@ var actorChars = { "=": Lava, "|": Lava, "v": Lava } - function Player(pos) { this.pos = pos.plus(new Vector(0, -0.5)); this.size = new Vector(0.8, 1.5); @@ -58,8 +55,6 @@ function Player(pos) { } Player.prototype.type = "player"; - - function Lava(pos, ch) { this.pos = pos; this.size = new Vector(1, 1); @@ -74,7 +69,6 @@ function Lava(pos, ch) { } Lava.prototype.type = "lava"; - function Coin(pos) { this.basePos = this.pos = pos.plus(new Vector(0.2, 0.1)); this.size = new Vector(0.6, 0.6); @@ -82,7 +76,6 @@ function Coin(pos) { } Coin.prototype.type = "coin"; - function elt(name, className) { var elt = document.createElement(name); if (className) { @@ -91,7 +84,6 @@ function elt(name, className) { return elt; } - function DOMDisplay(parent, level) { this.wrap = parent.appendChild(elt("div", "game")); this.level = level; @@ -129,20 +121,19 @@ DOMDisplay.prototype.drawActors = function() { } DOMDisplay.prototype.drawFrame = function() { - if (this.actorLayer) + if (this.actorLayer) { this.wrap.removeChild(this.actorLayer); + } this.actorLayer = this.wrap.appendChild(this.drawActors()); this.wrap.className = "game " + (this.level.status || ""); this.scrollPlayerIntoView(); } - DOMDisplay.prototype.scrollPlayerIntoView = function() { var width = this.wrap.clientWidth; var height = this.wrap.clientHeight; var margin = width / 3; - var left = this.wrap.scrollLeft, right = left + width; var top = this.wrap.scrollTop, bottom = top + height; @@ -158,12 +149,10 @@ DOMDisplay.prototype.scrollPlayerIntoView = function() { this.wrap.scrollTop = center.y + margin - height; } - DOMDisplay.prototype.clear = function() { this.wrap.parentNode.removeChild(this.wrap); } - Level.prototype.obstacleAt = function(pos, size) { var xStart = Math.floor(pos.x); var xEnd = Math.ceil(pos.x + size.x); @@ -194,8 +183,6 @@ Level.prototype.actorAt = function(actor) { } } - - var maxStep = 0.05; Level.prototype.animate = function(step, keys) { @@ -295,8 +282,6 @@ Level.prototype.playerTouched = function(type, actor) { } } - - var arrowCodes = {37: "left", 38: "up", 39: "right"}; function trackKeys(codes) { @@ -313,7 +298,6 @@ function trackKeys(codes) { return pressed; } - function runAnimation(frameFunc) { var lastTime = null; function frame(time) { @@ -329,7 +313,6 @@ function runAnimation(frameFunc) { requestAnimationFrame(frame); } - var arrows = trackKeys(arrowCodes); function runLevel(level, Display, andThen) { @@ -374,8 +357,6 @@ function runLevel(level, Display, andThen) { runAnimation(animation); } - - function runGame(plans, Display) { var lives = 3; var livesSpan = document.getElementById('lives'); @@ -397,8 +378,8 @@ function runGame(plans, Display) { startLevel(n + 1); } else { console.log("You win!"); - } - }); + } + }) } startLevel(0); } diff --git a/public/platform.html b/public/platform.html index 6dfdd25..d065ec3 100644 --- a/public/platform.html +++ b/public/platform.html @@ -17,6 +17,5 @@

Lives:

- From ea1581eec80882d78fca9822b0c1fd19ac8c3c24 Mon Sep 17 00:00:00 2001 From: SomayaB Date: Tue, 16 May 2017 16:26:40 -0700 Subject: [PATCH 28/28] Checks of last spec box --- CONTRACT_Platform-Game.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CONTRACT_Platform-Game.md b/CONTRACT_Platform-Game.md index 88262be..70a1caf 100644 --- a/CONTRACT_Platform-Game.md +++ b/CONTRACT_Platform-Game.md @@ -40,7 +40,7 @@ Your work will be mainly in deciding how to replicate that formal logic and user - [x] Artifact produced is a fork of the [browser-games][browser-games] repo. - [x] Variables, functions, files, etc. have appropriate and meaningful names. -- [ ] HTML, CSS, and JS files are well formatted with proper spacing and indentation. +- [x] HTML, CSS, and JS files are well formatted with proper spacing and indentation. - [x] There is a clear separation of game logic code from view/rendering code. - [x] All major features are added via pull requests with a clear description and concise commit messages. - [x] The artifact produced is properly licensed, preferably with the [MIT license][mit-license].