diff --git a/WebDev.md b/WebDev.md index bed8cb2..3ed7db3 100644 --- a/WebDev.md +++ b/WebDev.md @@ -39,3 +39,5 @@ Submission has to be done by sharing your github repo link and deployment link o + + diff --git a/tic-tac-toe/script.js b/tic-tac-toe/script.js new file mode 100644 index 0000000..f768625 --- /dev/null +++ b/tic-tac-toe/script.js @@ -0,0 +1,203 @@ +playerNum = document.querySelector('.playerNum'); +buttonX = document.querySelector('#x'); +buttonO = document.getElementById('o'); +symbol = document.querySelector('.symbol'); +table = document.querySelector('.table'); +boxes = document.querySelectorAll('.box'); +winnerBox = document.querySelector('.winner'); +winnerName = document.querySelector('#name'); +replay =document.querySelector('.replay'); + +var player1, player2, winner, noOfMoves=0, mode; +var whichSymbol, whichMode; +var playerXBoxes = [0, 0, 0, 0, 0, 0, 0, 0, 0]; +var playerOBoxes = [0, 0, 0, 0, 0, 0, 0, 0, 0]; + +function reset(){ + playerXBoxes = [0, 0, 0, 0, 0, 0, 0, 0, 0]; + playerOBoxes = [0, 0, 0, 0, 0, 0, 0, 0, 0]; + for(var i=0; i<9; i++){ + boxes[i].textContent = ""; + } + winner=undefined; + mode = undefined; + noOfMoves=0; +} + +document.getElementById('single').addEventListener('click', clickSingleMulti); +document.getElementById('multi').addEventListener('click', clickSingleMulti); + + +function clickSingleMulti(n){ + whichMode = n; + n.target.style.boxShadow = "0 0 10px 1px yellow"; + setTimeout(()=>{playerNum.style.display = "none"; + symbol.style.display = "block"}, 200); + setTimeout(() => whichMode.target.style.boxShadow = "none", 200); + + mode = (n.target.textContent == 'Single Player')? "single" : "multi"; + +} + + + +buttonX.addEventListener('click', clickOX); +buttonO.addEventListener('click', clickOX); + +function clickOX(e){ + console.log(e); + whichSymbol = e; + if(e.target.textContent == 'x'){ + player1 = 'x'; + player2 = 'o'; + } + else{ + player1 = 'o'; + player2 = 'x'; + } + player = player1; + e.target.style.boxShadow = "0 0 10px 1px yellow"; + setTimeout(changeScreen, 200); + setTimeout(() => whichSymbol.target.style.boxShadow = "none", 200); +} + +function changeScreen(){ + symbol.style.display = "none"; + table.style.display = "block"; +} + +for(var i=0; i<9; i++){ + boxes[i].addEventListener('click', clickBox); +} + + +function clickBox(boxInfo){ + var boxId = boxInfo.target.id; + console.log(boxId); + console.log(boxInfo); + if(boxInfo.target.textContent != "") return; + boxInfo.target.style.cssText = 'color: white; font-size: 70px'; + boxInfo.target.textContent= player; + + if(player == 'x'){ + playerXBoxes[boxId-1] = 1; + console.log(playerXBoxes); + checkXWinner(); + } + else{ + playerOBoxes[boxId-1] = 1; + console.log(playerOBoxes); + checkOWinner(); + } + noOfMoves++; + if(noOfMoves == 9) + gameTie(); + player = player=='o'?'x':'o'; + if(mode=='single' && noOfMoves <= 7){ + setTimeout(botMove, 500); + } +} + +function botMove(){ + var botBoxId; + do{ + botBoxId = Math.floor(Math.random()*9) +1; + console.log(document.getElementById(botBoxId)); + }while(document.getElementById(botBoxId) != null && document.getElementById(botBoxId).textContent != ""); + //Use minMax() to get botBoxId and then delete above 3 lines. + //minMax(); + + console.log(botBoxId); + botBox = document.getElementById(botBoxId) + console.log(document.getElementById(botBoxId)); + botBox.style.cssText = 'color: white; font-size: 70px'; + botBox.textContent= player; + + console.log(player); + if(player == 'x'){ + playerXBoxes[botBoxId-1] = 1; + console.log(playerXBoxes); + checkXWinner(); + } + else{ + playerOBoxes[botBoxId-1] = 1; + console.log(playerOBoxes); + checkOWinner(); + } + noOfMoves++; + if(noOfMoves == 9) + gameTie(); + player = player=='o'?'x':'o'; + +} + + +function checkXWinner(){ + + if(playerXBoxes[0]+playerXBoxes[1]+playerXBoxes[2]==3 || + playerXBoxes[3]+playerXBoxes[4]+playerXBoxes[5]==3 || + playerXBoxes[6]+playerXBoxes[7]+playerXBoxes[8]==3 || + playerXBoxes[0]+playerXBoxes[3]+playerXBoxes[6]==3 || + playerXBoxes[1]+playerXBoxes[4]+playerXBoxes[7]==3 || + playerXBoxes[2]+playerXBoxes[5]+playerXBoxes[8]==3 || + playerXBoxes[0]+playerXBoxes[4]+playerXBoxes[8]==3 || + playerXBoxes[2]+playerXBoxes[4]+playerXBoxes[6]==3){ + winner = 'x'; + setTimeout(winnerFound , 500); + } + + +} + +function checkOWinner(){ + //the win cases + if(playerOBoxes[0]+playerOBoxes[1]+playerOBoxes[2]==3 || + playerOBoxes[3]+playerOBoxes[4]+playerOBoxes[5]==3 || + playerOBoxes[6]+playerOBoxes[7]+playerOBoxes[8]==3 || + playerOBoxes[0]+playerOBoxes[3]+playerOBoxes[6]==3 || + playerOBoxes[1]+playerOBoxes[4]+playerOBoxes[7]==3 || + playerOBoxes[2]+playerOBoxes[5]+playerOBoxes[8]==3 || + playerOBoxes[0]+playerOBoxes[4]+playerOBoxes[8]==3 || + playerOBoxes[2]+playerOBoxes[4]+playerOBoxes[6]==3){ + winner = 'o'; + setTimeout(winnerFound , 500); + } +} + +function gameTie(){ + winnerName.textContent = "Game ties!"; + setTimeout(()=>{}, 500); + table.style.display = 'none'; + winnerBox.style.display = 'block'; + replay.style.display = 'block'; +} + +function winnerFound(){ + console.log(winner); + if((winner == 'x' && player1 == 'x') || (winner == 'o' && player1 == 'o')) + winner = "Player 1"; + else + winner = "Player 2"; + winnerName.textContent = winner+" wins!!"; + + table.style.display = 'none'; + winnerBox.style.display = 'block'; + replay.style.display = 'block'; + +} + +replay.addEventListener('click', toReplay); +function toReplay(e){ + e.target.style.boxShadow = "0 0 10px 1px yellow"; + setTimeout(changeScreenToStart, 200); +} + +function changeScreenToStart(){ + winnerBox.style.display = 'none'; + replay.style.display = 'none'; + playerNum.style.display = "block"; + reset(); + setTimeout(()=>replay.style.boxShadow='none', 200); +} + + diff --git a/tic-tac-toe/style.css b/tic-tac-toe/style.css new file mode 100644 index 0000000..f989098 --- /dev/null +++ b/tic-tac-toe/style.css @@ -0,0 +1,117 @@ +div.container{ + color: #4293f5; + text-align: center; + font-size: 40px; + padding: 8px; +} + +.container h2{ + text-shadow: 3px 1px lightgrey; +} + + + +div.symbol, +div.playerNum{ + color: white; + background-color: #4293f5; + text-align: center; + margin: 10% 30% 20% 30%; + padding: 20px 20px 20px 20px; + font-size: 25px; + border-radius: 10px; + box-shadow: 0 4px 8px 0 grey; +} + +div.symbol{ + display: none; +} + +span#single , span#multi{ + font-size: 40px; +} + +span#x, span#o{ + font-size: 80px; +} + + +span#x, span#o, span#single , span#multi{ + display: inline-block; + background-color: white; + color: #4293f5; + border-radius: 10px; + margin-top: 20px; + margin-bottom: 2px; + padding-top: 3px; + padding-bottom: 3px; + width: 48%; + height: 80px; +} + +span#single:hover , span#multi:hover , +span#x:hover , span#o:hover, .replay:hover{ + transform: scale(0.98); +} + +.table{ + display: none; +} +table{ + border-collapse: collapse; + margin-left: auto; + margin-right: auto; + background-color: #4293f5; +} +td{ + border: 4px solid white; + width: 100px; + height:100px; +} + +table tr td:first-child{ + border-left: 0; +} +table tr td:last-child{ + border-right: 0; +} +table tr:first-child td{ + border-top: 0; +} +table tr:last-child td{ + border-bottom: 0; +} + +td:hover, +.replay:hover +{ + background-color: #4dc3ff; +} + +.winner, .replay{ + display: none; + color: white; + background-color: #4293f5; + text-align: center; + margin-top: 6%; + margin-left: 30%; + margin-right: 30%; + padding: 20px 20px 20px 20px; + font-size: 25px; + border-radius: 10px; + box-shadow: 0 4px 8px 0 grey; +} + +#name{ + display: block; + background-color: white; + color: #4293f5; + font-size: 30px; + border-radius: 10px; + margin-top: 20px; + margin-bottom: 20px; + padding-top: 6px; + padding-bottom: 6px; + width: 100%; + height: 50px; +} diff --git a/tic-tac-toe/tic-tac-toe.html b/tic-tac-toe/tic-tac-toe.html new file mode 100644 index 0000000..ed07344 --- /dev/null +++ b/tic-tac-toe/tic-tac-toe.html @@ -0,0 +1,59 @@ + + + + Tic-Tac-Toe + + + +
+

TIC-TAC-TOE

+
+ Which mode would you like? +
+ Single Player + Two Players +
+ + +
+ Player 1: Which would be your symbol? +
+ x + o +
+ +
+ + + + + + + + + + + + + + + + +
+ + +
+ +
+ +
+ +
+ Replay +
+ + +
+ + +