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/README.md b/README.md index 09a972f..2a8bf9e 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 + + - [X] Simon game can be found at public/simon.html + - [ ] Simon game is playable + - [X] 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 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/img/.gitkeep b/public/img/.gitkeep deleted file mode 100644 index e69de29..0000000 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/.gitkeep b/public/js/.gitkeep deleted file mode 100644 index e69de29..0000000 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/js/ticTacToe.js b/public/js/ticTacToe.js new file mode 100644 index 0000000..0bb02d8 --- /dev/null +++ b/public/js/ticTacToe.js @@ -0,0 +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) +} + +const nextMove = (square) => { + 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(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.") + } +} + +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/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! + + + diff --git a/public/ticTacToe.html b/public/ticTacToe.html new file mode 100644 index 0000000..00fae23 --- /dev/null +++ b/public/ticTacToe.html @@ -0,0 +1,67 @@ + + + + Tic Tac Toe + + + + +

Tic Tac Toe

+
Message here.
+ + + + + + + + + + + + + + + + +
+ Play Again! + + +