From 0fdcb402093cc5e5c9be981b0f3cad1354ed5a75 Mon Sep 17 00:00:00 2001 From: afterthebleep Date: Tue, 9 May 2017 10:16:51 -0700 Subject: [PATCH 1/6] initial game commit WIP --- public/html/ticTacToe.html | 49 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) create mode 100644 public/html/ticTacToe.html diff --git a/public/html/ticTacToe.html b/public/html/ticTacToe.html new file mode 100644 index 0000000..226f5d1 --- /dev/null +++ b/public/html/ticTacToe.html @@ -0,0 +1,49 @@ + + + + + Tic Tac Toe + + + + + +

Tic Tac Toe

+
Messages here.
+ + + + + + + + + + + + + + + + +
xox
xox
xox
+ + From 3e31cda03c29d6fe20326c7174e775f91fbfd570 Mon Sep 17 00:00:00 2001 From: afterthebleep Date: Tue, 9 May 2017 10:23:46 -0700 Subject: [PATCH 2/6] WIP tic-tac-toe --- public/html/ticTacToe.html | 1 - 1 file changed, 1 deletion(-) diff --git a/public/html/ticTacToe.html b/public/html/ticTacToe.html index 226f5d1..9b136e9 100644 --- a/public/html/ticTacToe.html +++ b/public/html/ticTacToe.html @@ -1,4 +1,3 @@ - From 03afaee5f892d9ccc8bad923e6e7c1c9b46b7033 Mon Sep 17 00:00:00 2001 From: afterthebleep Date: Wed, 10 May 2017 12:41:09 -0700 Subject: [PATCH 3/6] Babel setup, WIP game files and fixed some bugs --- .babelrc | 3 ++ dist/js/ticTacToe.js | 18 ++++++++++++ dist/ticTacToe.js | 18 ++++++++++++ package.json | 8 +++++- public/css/.gitkeep | 0 public/html/ticTacToe.html | 48 ------------------------------- public/img/.gitkeep | 0 public/js/.gitkeep | 0 public/js/ticTacToe.js | 26 +++++++++++++++++ public/ticTacToe.html | 58 ++++++++++++++++++++++++++++++++++++++ 10 files changed, 130 insertions(+), 49 deletions(-) create mode 100644 .babelrc create mode 100644 dist/js/ticTacToe.js create mode 100644 dist/ticTacToe.js delete mode 100644 public/css/.gitkeep delete mode 100644 public/html/ticTacToe.html delete mode 100644 public/img/.gitkeep delete mode 100644 public/js/.gitkeep create mode 100644 public/js/ticTacToe.js create mode 100644 public/ticTacToe.html diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..002b4aa --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["env"] +} diff --git a/dist/js/ticTacToe.js b/dist/js/ticTacToe.js new file mode 100644 index 0000000..8b5b85b --- /dev/null +++ b/dist/js/ticTacToe.js @@ -0,0 +1,18 @@ +"use strict"; + +var startGame = function startGame() { + document.turn = "X"; +}; + +var nextMove = function nextMove(Square) { + square.innerText = document.turn; + switchTurn(); +}; + +var switchTurn = function switchTurn() { + if (document.turn == "X") { + document.turn = "0"; + } else { + document.turn = "X"; + } +}; \ No newline at end of file diff --git a/dist/ticTacToe.js b/dist/ticTacToe.js new file mode 100644 index 0000000..8b5b85b --- /dev/null +++ b/dist/ticTacToe.js @@ -0,0 +1,18 @@ +"use strict"; + +var startGame = function startGame() { + document.turn = "X"; +}; + +var nextMove = function nextMove(Square) { + square.innerText = document.turn; + switchTurn(); +}; + +var switchTurn = function switchTurn() { + if (document.turn == "X") { + document.turn = "0"; + } else { + document.turn = "X"; + } +}; \ No newline at end of file diff --git a/package.json b/package.json index be78d2e..42c0b80 100644 --- a/package.json +++ b/package.json @@ -3,7 +3,9 @@ "version": "0.0.0", "description": "A collection of games to play in a web browser.", "scripts": { - "start": "http-server ./public -p 4321" + "build": "babel --copy-files src --out-dir dist", + "build:watch": "npm run build -- --watch", + "start": "http-server ./public -p 4321" }, "repository": { "type": "git", @@ -20,6 +22,10 @@ }, "homepage": "https://github.com/GuildCrafts/browser-games#readme", "dependencies": { + "babel-cli": "^6.24.1", + "babel-core": "^6.24.1", + "babel-env": "^2.4.1", + "babel-preset-es2015": "^6.24.1", "http-server": "^0.9.0" } } diff --git a/public/css/.gitkeep b/public/css/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/public/html/ticTacToe.html b/public/html/ticTacToe.html deleted file mode 100644 index 9b136e9..0000000 --- a/public/html/ticTacToe.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - Tic Tac Toe - - - - - -

Tic Tac Toe

-
Messages here.
- - - - - - - - - - - - - - - - -
xox
xox
xox
- - diff --git a/public/img/.gitkeep b/public/img/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/public/js/.gitkeep b/public/js/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/public/js/ticTacToe.js b/public/js/ticTacToe.js new file mode 100644 index 0000000..f3d71fb --- /dev/null +++ b/public/js/ticTacToe.js @@ -0,0 +1,26 @@ +const startGame = () => { + document.turn = 'X' + setMessage(document.turn + ' ready, set, GO!') +} + +const setMessage = (msg) => { + document.getElementByID('message').innerText = (msg) +} + +const nextMove = (square) => { + if(square.innerText === '') { + square.innerText = document.turn + switchTurn() + } else { + setMessage('Um, you see me here already! Pick another square foo.') + } +} + +const switchTurn = () => { + if(document.turn == 'X') { + document.turn = '0' + } else { + document.turn = 'X' + } + setMessage('') +} diff --git a/public/ticTacToe.html b/public/ticTacToe.html new file mode 100644 index 0000000..27522fb --- /dev/null +++ b/public/ticTacToe.html @@ -0,0 +1,58 @@ + + + + Tic Tac Toe + + + + +

Tic Tac Toe

+
Message here.
+ + + + + + + + + + + + + + + + +
+ + + From 350215f1d9e3e739758032af374b5652bc8e8842 Mon Sep 17 00:00:00 2001 From: afterthebleep Date: Wed, 10 May 2017 15:17:00 -0700 Subject: [PATCH 4/6] Tic Tac Toe game complete all tests passing. README reflects completion --- public/js/ticTacToe.js | 61 +++++++++++++++++++++++++++++++++++------- public/ticTacToe.html | 35 +++++++++++++++--------- 2 files changed, 74 insertions(+), 22 deletions(-) diff --git a/public/js/ticTacToe.js b/public/js/ticTacToe.js index f3d71fb..0bb02d8 100644 --- a/public/js/ticTacToe.js +++ b/public/js/ticTacToe.js @@ -1,26 +1,69 @@ const startGame = () => { + for(let i = 1; i <= 9; i++) { + clearBox(i) + } + document.turn = 'X' + document.winner = null setMessage(document.turn + ' ready, set, GO!') } const setMessage = (msg) => { - document.getElementByID('message').innerText = (msg) + document.getElementById('message').innerText = (msg) } const nextMove = (square) => { - if(square.innerText === '') { - square.innerText = document.turn - switchTurn() - } else { - setMessage('Um, you see me here already! Pick another square foo.') - } + if(document.winner != null) { + setMessage(document.turn + ', you already won foo!') + } else if(square.innerText == '') { + square.innerText = document.turn + switchTurn() + } else { + setMessage('Um, you see me here already! Pick another square foo.') + } } const switchTurn = () => { - if(document.turn == 'X') { + if(checkForWinner(document.turn)) { + setMessage('Winner Winner Chicken Dinner! Congrats ' + document.turn) + document.winner = document.turn + } else if(document.turn == 'X') { document.turn = '0' + setMessage("It\'s " + document.turn + "'s turn.") + } else { document.turn = 'X' + setMessage("It\'s " + document.turn + "'s turn.") } - setMessage('') +} + +const checkForWinner = (move) => { + let result = false + if(checkRow(1, 2, 3, move) || + checkRow(4, 5, 6, move) || + checkRow(7, 8, 9, move) || + checkRow(1, 4, 7, move) || + checkRow(2, 5, 8, move) || + checkRow(3, 6, 9, move) || + checkRow(1, 5, 9, move) || + checkRow(3, 5, 7, move)) { + result = true + } + return result +} + +const checkRow = (a, b, c, move) => { + let result = false + if(getBox(a) == move && getBox(b) == move && getBox(c) == move) { + result = true + } + return result +} + +const getBox = (number) => { + return document.getElementById('s' + number).innerText +} + +const clearBox = (number) => { + document.getElementById('s' + number).innerText = '' } diff --git a/public/ticTacToe.html b/public/ticTacToe.html index 27522fb..00fae23 100644 --- a/public/ticTacToe.html +++ b/public/ticTacToe.html @@ -15,7 +15,7 @@ h1 { border-bottom: 1px solid black; - width: 325px; + width: 470px; font-family: 'Roboto Mono', monospace; } @@ -24,10 +24,18 @@ font-family: 'Josefin Sans', sans-serif; } + #restart { + font-size: 20px; + font-weight: bold; + text-decoration: none; + color: black; + font-family: 'Josefin Sans', sans-serif; + } + .Square { - height: 100px; - width: 100px; - font-size: 60px; + height: 150px; + width: 150px; + font-size: 80px; text-align: center; font-family: 'Roboto Mono', monospace; } @@ -38,21 +46,22 @@

Tic Tac Toe

Message here.
- - - + + + - - - + + + - - - + + +
+ Play Again! From f4387f99f2370b4314f060bd3d76aa7027ce48d6 Mon Sep 17 00:00:00 2001 From: afterthebleep Date: Wed, 10 May 2017 15:17:36 -0700 Subject: [PATCH 5/6] Tic Tac Toe game complete all tests passing. README reflects completion --- README.md | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) diff --git a/README.md b/README.md index 09a972f..7551689 100644 --- a/README.md +++ b/README.md @@ -2,6 +2,8 @@ A collection of games to play in a web browser. See the full list of games in the [games.md](games.md) file. +#### By: Aisha Ortiz + ## Installation and Setup Clone the repo, install npm dependencies, and start the server: @@ -22,3 +24,52 @@ Available on: ``` Then open `http://localhost:4321/` in your browser of choice and play away! + +## Description + +Build simple graphical games for the browser. + +Fork the the browser-games repository and use the fork as your project artifact. + +Implement the games Tic-Tac-Toe and Simon from the list in the games.md 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 + + - [X] Artifact produced is a fork of the 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. + - [X] All major features are added via pull requests with a clear description and concise commit messages. + - [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. + +### Tic-Tac-Toe + + - [X] Tic-Tac-Toe game can be found at public/ticTacToe.html + - [X] Tic-Tac-Toe game is playable by two people + - [X] Tic-Tac-Toe game page is linked from public/index.html + +### Simon + + - [ ] Simon game can be found at public/simon.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 From 0968a404fd0051d0bcfb9bdd5bea68378cf7ffee Mon Sep 17 00:00:00 2001 From: afterthebleep Date: Thu, 11 May 2017 15:31:07 -0700 Subject: [PATCH 6/6] WIP Simon outline --- README.md | 4 +- public/index.html | 4 +- public/js/simon.js | 87 ++++++++++++++++++++++++++++++++++++++ public/simon.html | 101 +++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 192 insertions(+), 4 deletions(-) create mode 100644 public/js/simon.js create mode 100644 public/simon.html diff --git a/README.md b/README.md index 7551689..2a8bf9e 100644 --- a/README.md +++ b/README.md @@ -60,9 +60,9 @@ Your work will be mainly in deciding how to replicate that formal logic and user ### Simon - - [ ] Simon game can be found at public/simon.html + - [X] Simon game can be found at public/simon.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 diff --git a/public/index.html b/public/index.html index 278d291..9300a3c 100644 --- a/public/index.html +++ b/public/index.html @@ -13,8 +13,8 @@

Browser Games

diff --git a/public/js/simon.js b/public/js/simon.js new file mode 100644 index 0000000..a6cddd5 --- /dev/null +++ b/public/js/simon.js @@ -0,0 +1,87 @@ +class Game = () => { + constructor() { + this.welcome = [] + this.audio = {} + this.lightUp = 'colors' + this.gameVoice = '' + } + + startGame() => { + + } + + audio() => { + + + + + } + + lightUp() => { + + } + + gameVoice(msg) => { + setMessage('').innerText = msg + } +} + +class Simon = () => { + constructor() { + this.turn = [] + this.audio = + this.click = ['colors'] + this.gameVoice = '' + } + + simonTurn() => { + //have our array of colors we're picking from + let colors = ['green', 'red', 'yellow', 'blue'] + //randomly pick from array + for(let i = 1; i <= colors.length; i++) { + + } + } + //call a function that displays simon's choice + simonChoice() => { + + } + //record simon's choice, prob by pushing into empty array + + } + + simonAudio() => { + + } + + simonClick() => { + + } + } + + class Player = () => { + constructor() { + this.turn = [] + this.audio = + this.color = 'pickColors' + this.gameVoice = '' + } + + playerTurn() => { + //array that records player click + //check match (compare simon and player clicks) + for(let i = 1; i <= 4; i++) { + if(pickColor >= 4) { + turn.push([1]) + } + } + } + + playerAudio() => { + + } + + playerClick() => { + + } +} diff --git a/public/simon.html b/public/simon.html new file mode 100644 index 0000000..e015430 --- /dev/null +++ b/public/simon.html @@ -0,0 +1,101 @@ + + + + Simon + + + + +

Simon

+
Welcome message
+ + + + + + + + + +
+ Play Again! + + +