From 4d2b448838f7b91cb891800256e1e0057729cb25 Mon Sep 17 00:00:00 2001 From: Rosy Basil Date: Fri, 11 Oct 2024 22:56:16 -0400 Subject: [PATCH 1/4] final board --- index.html | 52 ++++++++++++++++ main.js | 107 +++++++++++++++++++++++++++++++++ style.css | 172 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 331 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..0f130f5 --- /dev/null +++ b/index.html @@ -0,0 +1,52 @@ + + + + + + + + + + + + + Tic Tac Toe + + +

Tic-Tac-Toe

+
+ +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+

Scoreboard

+ + + + + + + + + + + + + +
00
Player 1 Player 2
+
+ + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..882cc8b --- /dev/null +++ b/main.js @@ -0,0 +1,107 @@ +class Game{ + constructor(){ + this.curPlayer='X' ///X starts the game + this.board=Array(9).fill(null) //Array to track the board of 9 empty squares + this.score={X:0, O:0} //Tracks scores for X and O + this.winner=null //no winner at start of game + + //Select DOM elements + this.squares=document.querySelectorAll('.square') //selects each square(cell) + this.restart=document.querySelector('#restartButton') //selects restart button + this.playeronescore=document.querySelector('#playeronescore') //selects player one score + this.playertwoscore=document.querySelector('#playertwoscore') //selects player two score + this.status=document.querySelector('#status') //selcts status to display who won + + } + + init(){ + this.squares.forEach(square => square.addEventListener('click',(e)=> this.handleCellClick(e))) + this.restart.addEventListener('click',()=>this.restartButton()) + this.updateStatus() + } + handleCellClick(event){ + const index=event.target.id //Gets the id element when square(cell) is clicked + const cell=event.target //Tracks clicked cell + + if(this.board[index] === null && !this.winner){//checks if cells have been clicked and if there is no winner + this.board[index]=this.curPlayer //fills cell with curPlayers symbol + cell.textContent=this.curPlayer //fills square with curPlayers symbol + if(this.checkWin(this.board)){ //checks to see who won + this.winner=this.curPlayer //winner is current player + this.score[this.curPlayer]++ //adds +1 to score of whoever won + this.updateStatus() //announces who won + this.updateScore() //updates player score + }else if(!this.board.includes(null)){ + this.updateStatus('draw') + }else{ + this.changeCurPlayer() + this.updateStatus() + } + } + + } + + changeCurPlayer(){ //switch players turn + if(this.curPlayer==='X'){ + this.curPlayer='O' + }else{ + this.curPlayer='X' + } + } + + checkWin(board){ + + const winningConditions = [ + [0, 1, 2], [3, 4, 5], [6, 7, 8], //rows + [0, 3, 6], [1, 4, 7], [2, 5, 8], //columns + [0,4,8], [2,4,6]//diagonals + ] + + let win=false; + + winningConditions.forEach((combo)=>{ + if( + board[combo[0]]===board[combo[1]]&& + board[combo[1]]===board[combo[2]]&& + board[combo[0]] !=null + ){ + win=true + } + }); + return win + } + + updateStatus(status=''){ //updates status for handleCellClick function + if(status==='draw'){ + this.status.textContent='It\'s a tie!' //If there is a draw show there is a tie + }else if(this.winner){ + this.status.textContent=`Player ${this.winner} wins!` //Show who won + }else{ + this.status.textContent=`It's player ${this.curPlayer}'s turn` //else, keep the game going and show next player + } + } + + updateScore(){ + this.playeronescore.textContent=this.score.X //updates score while updating status + this.playertwoscore.textContent=this.score.O //updates score while updating status + } + + restartButton(){ //resets the game without reloading the page + this.board=Array(9).fill(null) //returns empty array for each celll + this.curPlayer='X' + this.winner=null + this.squares.forEach(square => {square.textContent = ''})//returns empty square + this.updateStatus() + } + +} + //Start Game +const game=new Game() +game.init() + + + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..67d7b81 --- /dev/null +++ b/style.css @@ -0,0 +1,172 @@ +body { + font-family:'Rock Salt', 'Permanent Marker'; + color: #000000; + font-weight:bold ; + +h1{ + font-size: 30px; + text-align: center; + letter-spacing: 0.4em; + font-family:'Permanent Marker'; + font-size: 40px; + margin:10px +} + +h2{ + border-bottom:2px solid black; + text-align: center; + border:4px solid black; + letter-spacing: 0.3em; +} + +#board { + margin-left: auto; + margin-right: auto; + margin-bottom:20px; + width: 375px; + height: 375px; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-gap: 5px; +} + +.square { + width: 120px; + height: 120px; + border: 1px solid black; + background-color: #F5F5F5; + color:black; + font-family: 'Permanent Marker'; + font-size: 40px; + display: flex; + justify-content: center; + align-items: center; + cursor:pointer +} + +.square:hover { + background-color: pink; +} + +.score{ + display: flex; + flex-direction: column; + align-items: center; +} + +tr{ + display: flex; + justify-content: space-evenly; + font-size: 20px; +} + +td{ + margin: 0 50px 4px 50px; +} + +th{ + margin: 0 20px 4px 20px; +} + +th,td{ + + font-family: 'Permanent Marker'; + font-size: 20px; +} + +#playeronescore,#playertwoscore{ + border:2px solid black; + text-align: center; + padding:7px +} + +#restartButton { + display: block; + margin-left: auto; + margin-right: auto; + height: 50px; + width: 150px; + background-color: black; + border: 1px solid #000000; + border-radius: 40px; + font-size: 20px; + font-family: 'Permanent Marker'; + color:white; + letter-spacing: 0.1em; + text-align: center; + cursor:pointer +} + +#restartButton:hover { + background-color:pink; + color: #FFFFFF; +} + +#status{ + font-family: 'Permanent Marker'; + font-size: 15px; + color:rgb(248, 119, 141); + text-align: center; + padding:10px; + letter-spacing: 0.1em; +} + +@media screen and (max-width: 480px) { + #board { + max-width: 300px; + grid-gap: 3px; + } + + .square { + font-size: 30px; + } + + #restartButton { + font-size: 16px; + padding: 8px 16px; + } + + #status { + font-size: 18px; + } +} + +@media screen and (min-width: 481px) and (max-width: 768px) { + #board { + max-width: 350px; + grid-gap: 4px; + } + + .square { + font-size: 35px; + } + + #restartButton { + font-size: 18px; + padding: 10px 20px; + } + + #status { + font-size: 20px; + } +} + +@media screen and (min-width: 769px) { + #board { + max-width: 400px; + grid-gap: 5px; + } + + .square { + font-size: 45px; + } + + #restartButton { + font-size: 20px; + padding: 12px 24px; + } + + #status { + font-size: 22px; + } +} From 4371cf50f9df7724c38fc4829a68ddefed562841 Mon Sep 17 00:00:00 2001 From: Rosy Basil Date: Fri, 11 Oct 2024 22:59:38 -0400 Subject: [PATCH 2/4] final board --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style.css b/style.css index 67d7b81..685d21d 100644 --- a/style.css +++ b/style.css @@ -99,7 +99,7 @@ th,td{ #restartButton:hover { background-color:pink; - color: #FFFFFF; + color: black; } #status{ From 1924355db30f839cc4123713f586f736932a9670 Mon Sep 17 00:00:00 2001 From: Rosy Basil Date: Wed, 13 Nov 2024 10:37:54 -0500 Subject: [PATCH 3/4] Update README.md --- README.md | 23 +++-------------------- 1 file changed, 3 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index b568cff..1abad6d 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,5 @@ -# 📊 Morning Challenge: Tic-Tac-Toe +Tic-Tac-Toe -### Goal: Create a two player Tic-Tac-Toe game. The users should be able to click to place their X or O and if they win the program should mention their win in the DOM. Please make the game as OOP as possible. +### Goal: Two player Tic-Tac-Toe game. Users click to place their X or O. If they win the program mentions their win in the DOM, and keeps score. -### How to submit your code for review: - -- Fork and clone this repo -- Create a new branch called answer -- Checkout answer branch -- Push to your fork -- Issue a pull request -- Your pull request description should contain the following: - - (1 to 5 no 3) I completed the challenge - - (1 to 5 no 3) I feel good about my code - - Anything specific on which you want feedback! - -Example: -``` -I completed the challenge: 5 -I feel good about my code: 4 -I'm not sure if my constructors are setup cleanly... -``` +Screenshot 2024-11-01 at 9 43 11 PM From 032a6c7042c2934ea78a7869b735880881ae68e2 Mon Sep 17 00:00:00 2001 From: Rosy Basil-Kalu Date: Fri, 22 Nov 2024 11:21:12 -0500 Subject: [PATCH 4/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1abad6d..3bc921f 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -Tic-Tac-Toe +## Project:Tic-Tac-Toe ### Goal: Two player Tic-Tac-Toe game. Users click to place their X or O. If they win the program mentions their win in the DOM, and keeps score.