From ff09327965a2317ad4d6c923834fb25dab6f354e Mon Sep 17 00:00:00 2001 From: Jaspreet099 Date: Thu, 6 Oct 2022 13:20:23 +0530 Subject: [PATCH] JavaScript Tic Tac Toe added --- JavaScript Tic Tac Toe/index.html | 150 ++++++++++ JavaScript Tic Tac Toe/script.js | 478 ++++++++++++++++++++++++++++++ JavaScript Tic Tac Toe/style.css | 210 +++++++++++++ 3 files changed, 838 insertions(+) create mode 100644 JavaScript Tic Tac Toe/index.html create mode 100644 JavaScript Tic Tac Toe/script.js create mode 100644 JavaScript Tic Tac Toe/style.css diff --git a/JavaScript Tic Tac Toe/index.html b/JavaScript Tic Tac Toe/index.html new file mode 100644 index 0000000..ad48109 --- /dev/null +++ b/JavaScript Tic Tac Toe/index.html @@ -0,0 +1,150 @@ + + + + + + Paper and Pencil + + + + + + +
+
+
+
+

Tic Tac Toe !

+

CHOOSE YOUR OPPONENT

+

CHOOSE YOUR LEVEL

+
+ + + +
+

Let's play !

+
+

Human

+

vs

+

Computer

+
+
+

X

+

vs

+

O

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

reset

+
+
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/JavaScript Tic Tac Toe/script.js b/JavaScript Tic Tac Toe/script.js new file mode 100644 index 0000000..92fcca4 --- /dev/null +++ b/JavaScript Tic Tac Toe/script.js @@ -0,0 +1,478 @@ +// btns class, flex posistion, improve switch function + +var drawboard = document.getElementById('tictactoe'), + winnerset = document.getElementById('winnerset').children, + gameBoard = document.getElementById('board'), + play = document.getElementById('play'), + winner = document.getElementById('winner'), + res = document.getElementById('reset'), + tiles = document.getElementsByClassName('tile'), + signs = document.getElementsByClassName('sign'), + opponent = document.getElementById("opponent"), + settings = document.getElementById("settings"), + humvscomp = document.getElementById("humvscomp"), + xvso = document.getElementById("xvso"), + options = document.getElementsByClassName("options"), + btns = document.getElementsByClassName('btn'), + sets = document.getElementsByClassName('sets'), + welcome = document.getElementsByClassName('welcome'), + chooses = document.getElementsByClassName('chooses'), + destiny = document.getElementsByClassName('destiny'), + options = document.getElementsByClassName('options'), + human, + computer, + humVal, + comVal, + palyer1, + player2, + player1val, + player2val, + game, + board = [0,0,0,0,0,0,0,0,0], + round = 0, + winningBoard = [ + [0, 1, 2], + [3,4,5], + [0,3,6], + [6,7,8], + [1,4,7], + [2,5,8], + [0,4,8], + [2,4,6] +]; + + +//drawingWithDelay(winnerset[1], 0.5, 0.5); + + +HTMLElement.prototype.addClass = function(el) { + this.classList.add(el); +} +HTMLElement.prototype.removeClass = function(el) { + this.classList.remove(el); +} + +// drawing svg elemts +// if var element contains more then one html element, do delay between each animation to // achieve hand drawing effect +// if element has childs, +// check for the elemts nodes +// Loop through an array of elements, if element's childs +//nodeType = 1 ad some style: animation to it with delay beetwen each node +function drawingWithDelay(element, newTime, newDelay) { +var time = newTime; +if (element.hasChildNodes()) { + var delay = 0, + child = element.childNodes; + for(var d=0; d 0) { + elementsToShow[j].addClass('fadeIn'); + } + elementsToShow[j].removeClass('disable'); + } + } + //for (var i = 0; i< elementsToShow.length; i++) { + +switchClass (sets, welcome); + + for (var i =0; i< btns.length ; i++){ + btns[i].addEventListener('click', function () { + var elemnt = this.id; + console.log(elemnt); + choose(elemnt); + }); + } + +function choose(id) { + // first we choose our opponent, if human is true we play against other human player if computer is true we play with ai + if (id == 'play') { + switchClass (sets, chooses); + } + + else if (id == 'reset') { + reset(); + } + +else if (id == 'human') { + human = true; + computer = false; + switchClass (sets, destiny); + } + else if (id == 'computer') { + human = false; + computer = true; + switchClass (sets, destiny); + } + // when we know our opponent we can chooseour sign. When computer condition is true we choose sign for human player + else if (computer) { + if (id == 'o' || id == 'x') { + if (id == 'x') { + humVal = 'x' + comVal = 'o' + } + else { + humVal = 'o' + comVal = 'x' + } + game = true; + startGame(); + } + } + // If human condition is true we choose sign for player 1 with our first choice + else if (human){ + if (id == 'o' || id == 'x') { + if (id == 'x') { + player1val = 'x'; + player2val = 'o'; + } else { + player2val = 'x'; + player1val = 'o'; + } + } + game = true; + startGame(); +} + console.log ('human :'+human+ " " + "computer :" + computer); + console.log ('player1val: ' + player1val); + console.log ('player2val: ' + player2val); + console.log ('humVal: ' + humVal); + console.log ('comVal: ' + comVal) + console.log ('game: ' + game) +} + + +function startGame() { + settings.addClass('disable'); + gameBoard.removeClass('disable'); + drawingWithDelay(drawboard, 0.5, 0.5); + player1 = true; +} + +// reset the game +function reset() { + window.location = window.location; + round = 0; + for(var x= 0; x<9 ;x++) { + board[x] = 0; + } + game = false; +} + + +function ai() { + if (game) { + console.log('computer move'); + var obj = minimax(board, 0 , computer); + console.log('outside ' +board + 'obj '+obj); + + } +} + +function minimax(actualBoard, depth, player) { + // check if there is a winner, if yes return points + if(checkWin(actualBoard, computer)) { + // console.log('computer win :' +(10 - depth)); + return 10 - depth ; + } + else if(checkWin(actualBoard, human)) { + //console.log('human win :' + (-10 + depth)); + return -10 + depth ; + } + else if (checkBoard(actualBoard)) { + // console.log('tie :' + 0); + return 0; + } + + // set the first of maximum values for each players + var max; + if (player) { + max = -Infinity + } + else{ + max = Infinity + } + // index of the move +var index = 0; + + //console.log('max :'+max) ; + + + for (var i =0; i max) { + // console.log('is minimaxScore'+minmaxScore+ " > "+"max"+max) + max = minmaxScore; + index = i; + //console.log(max); + } + } + else { + if(minmaxScore < max) { + //console.log('is minimaxScore'+minmaxScore+ " < "+"max"+max) + max = minmaxScore; + index = i; + // console.log(max); + } + } + + } + } + +// when finally function reach back its depth 0 level, it can make a move according to index - movie where best max value was achieved. +if (depth == 0) { +// console.log('teraz depth 0') + + set(index, computer); + //console.log(player +" "+ max); +} + //console.log(player +" "+ max) + //console.log('the end, max: '+ max+', minmaxScore :'+minmaxScore +' player '+ player+' index '+ index+', depth :'+depth ); + + // return max value to the previus level depth + return max; +} + +play.addEventListener \ No newline at end of file diff --git a/JavaScript Tic Tac Toe/style.css b/JavaScript Tic Tac Toe/style.css new file mode 100644 index 0000000..0eba15c --- /dev/null +++ b/JavaScript Tic Tac Toe/style.css @@ -0,0 +1,210 @@ +@import url("https://fonts.googleapis.com/css?family=Amatic+SC|Dawning+of+a+New+Day|League+Script|Loved+by+the+King|Waiting+for+the+Sunrise"); +body, html { + height: 100%; +} + +body { + display: flex; + flex-flow: column no-wrap; + justify-content: center; + align-items: center; + align-content: center; +} + +.paper { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + justify-content: center; + align-items: center; + width: 700px; + height: 500px; + background-image: -webkit-repeating-linear-gradient(left, #3a2493, 1px, transparent 1px, transparent 20px), -webkit-repeating-linear-gradient(bottom, #3a2493, 1px, #3a2493 1px, #3a2493 20px); + background-image: repeating-linear-gradient(90deg, #3a2493, 1px, transparent 1px, transparent 20px), repeating-linear-gradient(90deg, #316b6a, 1px, #3a2493 1px, #3a2493 20px); + background-size: 20px 20px; + background-origin: content-box; + padding: 1em auto; + position: relative; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 50px rgba(0, 0, 0, 0.1) inset; +} + +.rotated { + transform: rotate(0deg); +} + +.paper:after, .paper:before { + z-index: -1; + position: absolute; + content: ""; + left: auto; + max-width: 300px; + background: white; + transform: rotate(0deg); +} + +.paper:after { + bottom: 10px; + right: 7px; + width: 80%; + top: 90%; + box-shadow: 3px 15px 12px #777; + transform: rotate(0deg); +} + +.paper:before { + bottom: 10px; + left: 7px; + width: 70%; + top: 80%; + box-shadow: -3px 15px 12px #777; + transform: rotate(0deg); +} + +#board { + position: relative; + display: flex; + flex-flow: row wrap; + justify-content: center; + align-items: center; + width: 50%; + height: 300px; + margin: 50px auto; +} + +#logo { + width: 35%; + height: auto; + margin: 30px; +} +#logo svg { + fill: #ffffff; +} + +#gameboard { + position: absolute; + top: 5px; + left: 20px; + width: 100%; + height: auto; + stroke-dasharray: 250; + stroke-dashoffset: 250; + stroke: #ffffff; + stroke-width: 1.25px; + stroke-miterlimit: 10; + fill: none; +} +#gameboard .st4 { + stroke-width: 2; + stroke-miterlimit: 10; +} + +draw { + animation: dash 0.5s ease-in-out forwards; +} + +@keyframes dash { + to { + stroke-dashoffset: 0; + } +} +.tile { + margin: 5%; + width: 22%; + height: 22%; + border-radius: 5px; + cursor: pointer; + z-index: 2; +} + +#winner { + width: 600px; + height: max-content; + margin: auto; + margin-top: 60px; + position: absolute; + align-self: flex-start; + text-align: center; + transform: rotate(5deg); +} + +#reset { + margin: 0.5vh; + padding: 0; + width: 50%; + height: 30px; + vertical-align: middle; + text-align: center; + border-radius: 20px; + cursor: pointer; + float: left; +} + +h1, h2 { + font-family: "Waiting for the Sunrise", cursive; + margin: 0; + font-size: 40px; + color: #ffffff; +} + +#settings, .container, .options { + width: 100%; + display: flex; + flex-direction: column; + justify-content: space-around; +} + +#settings { + height: 70%; + align-items: center; + align-content: center; +} +#settings .container { + height: 30%; + align-items: center; +} +#settings .container .options { + flex-direction: row; + width: 60%; +} + +.btn { + cursor: pointer; + transition: all 0.2s ease-in-out; +} +.btn:hover { + transform: rotate(3deg) scale(1.3); +} + +.disable { + display: none !important; +} + +.fadeBounceIn { + animation: fadeBounceIn 1s ease-in-out forwards; +} + +.fadeIn { + animation: fadeIn 2s ease-in-out forwards; +} + +@keyframes fadeBounceIn { + 0% { + opacity: 0; + transform: scale(0.4); + } + 80% { + transform: scale(1.4); + } + 100% { + opacity: 1; + transform: scale(1); + } +} +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} \ No newline at end of file