From e930a9ba1333e2e0b8fdf89afcd1ac4e970115ab Mon Sep 17 00:00:00 2001 From: Aurelia Lim Date: Fri, 14 Aug 2020 02:14:27 +0800 Subject: [PATCH 1/3] completed game logic except for draw --- circle.png | Bin 0 -> 5153 bytes close.png | Bin 0 -> 2068 bytes cross.png | Bin 0 -> 2747 bytes index.html | 30 +++++++++++ script.js | 150 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 44 ++++++++++++++++ 6 files changed, 224 insertions(+) create mode 100644 circle.png create mode 100644 close.png create mode 100644 cross.png create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/circle.png b/circle.png new file mode 100644 index 0000000000000000000000000000000000000000..557bdc75c8230e2c312a1695d6400044a91f9317 GIT binary patch literal 5153 zcmZXYWmpt%)W&BQSQZpmL>d8fkFpjwM7wB?Re^4kXtnLiXtocx6In5dTaQ1_fA#9H;fa}b`_FUSqrQK&VNWyC9Vys9s^gXI zx;HAp+~BR6pT`)pd^E=%%|#dOEa?qphX_U>^8bBsE*g?GMglHs*xOFFg zOQV_aqINQkN}6+N6&_A;`7~%4vRLeR5W|As1t!@{hDeP|6YQBAO*GdT%R29==t9}P zt%*i!p_9?V8u`Q{sYrg3z|k{t!b~_*Z|P+bq1uR0__m*U{>-fa3fL^mD7qh(uAPnr z!;l$7TIfxU#)$*1VV(kCuGXZ#vwU234GbxD4&c^(A80e@o6U1Mx%LHSpXnL=X*Fa> z@4e)Phc_W`mjx0pi?&IpL4sO59yFbMY^j-qI~s%9z**psrr}(E(_!60jSy_Os>ztk z?5P`@^8Cj1rfa#|cp%e>XK7O?-^=sdVB0i|D&C&wx0ze5dHUl_AP&|C-XV%)tj+In zi207M9C!IB=*(9ip1Sr#O55?slyZ9(F_5);H$u28#fuwx%B_S=)-r`6pgv5E;B4l) z(a)2Agq^36goh4^pMM-Rsb@V5Z1vt-Il9=pvXtHo9OUg}HWw(rU{f+l9xf(FK!quT z0rQ)2|Ge0%vYXJ=Wl+rE$KLpBUvp>|hG28}0 z+4(UzjIW*gsSl0g*WQHc&Vy6&T$x+|ilb zD?})+jSOnSF1bpG)hpIhObWwzDle|aZ@*5_3X^*WY8cm33Zvg9J@$1SGt3VQQs!-? zY1h`YDB3wMvj(Eoy3C^O-NPa^q$W|1#o{)tNjF z+DD)toRd@fZq#U42`m`InNHttX|9cZN6#qgVL#lEQ`;hq6O;J?h@nDq<7al&LI>aw z8KnD1)`bfagXYGhbfV14mRiW!#^>V}Cm(w*Fi(BCogf`l|l| zXO<#XC87@8Mt@Pner(LudCp{7)kKlklqzgi_l;hT)tp8>M=Pm}1P0x=su8hcmXn{G zWL#^cXfkvkpP3#0W21HUbmUM)kQA=z-oYgJPkWk^A`l@e(gyKYQVoCy^lgiRWG8$eD*j9QGh$k&xH5 zUM3?pVh;Zp5l{xH7NJoa?|y$(+wbU9ltM#@z`JGo%kXYH|#O0Vh<^@k?)xi?d!#}?hwV61VL2yK7 zr*+6q`H&NnS*yNj2I~?DIYZzy=WJzRoj5HxWk|+W8$`S~Yr(?n+2lLCd!27*Lh(Hs z>sit+2soF^2-Y`k(IF-ypj$R)awciPdOpUS)FTYqgo{rx=JuyqrR)rro-f*_uxB5u}GSJJJ1NeOl$%NJpmBONkOW z%9va9+_Hanu@y9NFi|X|2M{ob5_10cu85E#S*^pz`RNu}>pDz=uv-YsrEQtKWR3e3 z#=|u=aO-U16*_**yo!qI+O$Bk{upq1<9mIaL}t;&lokEj9EYB>(VP$)^G7h&KpQLp z`dY0_=Afvrsi=o)`Rq4ET6p>GgLU_)jP7w@swOEwzsQl$c=OT}qOJP{r4nP5SN7!j z#SBhZuR+%)k!AYkBU_Qr4*PWzL!jw&gPV+U241-WaSY@UaJ%>o6ye`0RW;JUbXauJ zJ?nOM{OU^aa^hw_MZ}B9*XLCe*Q@X*Ss;!K0OJt)KrSBr_cSZ)mxXq=LpO)J!n)@r z??!X69`L5R|03Pj=}SOt{(yU8;i7$OW~!Mfp@<Z| zV%8urN>5=N+T2|pPa91b8iH4O|B}F7PduE6dsl7=<=Ey6O5{Tukda~bfDX-Da67|n zz%!oovqi~oC}iRV2>6tzA2?+U1Lvik6g5}TzfOuP4{l#Hc1O;sn(zpf2`$xOZ@xs3!B+7fA@I*lh%ore`iOd5j*MtMs_iUcCy5p)5aR(PlkFE1M94Tvivov%@!LX^?%?C<2Vc)~r>2M59D^gSvWLQ$HV!KyxH2dbkdl!i z#HqEx%jEd5p6cnicU~b-f|EK&LZpyZAQmzjgmpXcT!76*qn~Ihrz}HzehXNkiGqivr3`G8?l+Y2tefmwAgZBuE^)22A=Vc56$%+IM4)>`={ z6tZ46vzfvO^^NROV&%QKc}`sH_V<(Af}yoStk}wNup>Mu@?Z60%bj!LMk468$-H^b z!>1;qpNV&DY)4n5L8tojR@CT>cSKc`@PMhAZ#ZAc-EW50b_cmiUnv!NsjJ{_il7%(IHvg#LpwU5MpboK@GN-? zu>#B4zICX~BcaccR&s?^L*ZXdS;FM?^DOn}ne@pJn(K;lw72yu;x`p+ioPc?m62A; zgkJx=8iZWl-eZn#h4h<|TUTCr;|H<~4G6FEee-B?^TpzITLfJojmNw>2f*`t6?27O zo!;&3H@L=OJls;n9XhTH& z-MwCzBdx1{JH&9ut%$sMY7ZUi7Y-X& zo5JC8)|Yjain*>SfhQ+{lZT7EJyOd!Dq&)_@(bwfor|p}GQ*1j_A%?76$Mgnop zPcLk!Y_C^!60zUe9t4L+N|&}@D|x)$80cjNdog4N!vTCC+tiuF_T1MGb@qRWV{c9@ zd#mN2dHg)%`r0EiRUweknyg_3Qs<#6S%|raDzb1Veg=uQX(;*%9ls*@z-P8M7H~%& z5DSC%sHuQG?wS+QA6{y6J^Qva7d47Cu0DZkEi(#1&5?MsXWyNDG}HmZVH-S`G5hj> zjD+FIF->APj*Z0sDAdRQS;|FTo2(AORbsiwe%y9#Zojtyib;9Ohiyd__PlDH#~Jk6 zr}CD?eR{dapnY=X&ScYPi?U(dY|=|fIMMB>XoS(>X^bC@&Z-uD?#9|WzNgSRm4#fE z4lY%woUE;GZj|k$tp4XG=eubn)ifDp)T~tc;Q*WW@`!#N58nMWx&hvCYdxjlwPz|z zj}2>`fY*vvU&^`5>ow*++V-~!FQ_hW1B7CMw_AF7oI23hD)=}?={cnWYBHSz(^pb0 z&OHBXJZY1fA)1#5;RjHO^%7_WGXuikk6ge#b z0PfPirjYC#cV2$pHDe$p z=HB~=4cZf*{oN}^%&J16tE=CVK4&OAVw3&l6RT=L(;K51hVc*nVQmfX0s#9*bG(xO zUCE`GP08(6EYxVL$BP2*s%FMLrga{{V%aSA9o;}DDVQc1b+=3#fbA3KMNeXnCq(JI zKUoVhe<)!fpu(GwNL#b}N8|j7hgEGi+SzD>B2zQS0R+@u=?lB0tykL%`839pUR?s& zW!UVR7ms0;j4DMYCVTpFiE8U7NJ9{edk-=UI}b@A$YB!TO=axEH8{1-YgyfnND`VT zzeoQ^B^fe(AtRGw-H{64nZ;8Mcr}Y%5JbJ|WhwwHiAEOuqguh#XZoq}gRnH&Fb&K4 z0zR=o|H(yc>^N5U(obU3o^rY#ey8u*&Qvu3PBqqb0!*9xE?MrGz|1&v6 z-TwbEWVIfim@~(bv$4CcIrK}qFepxd`=czLhs~2?f#4RnY`Qc4-gqKg5h(P^(6_8Q zhgH0;V!g*C?S~w~6EX?lesmxIKRATH<|p+v}6SYT{t4r9VgvN|novzS{i=F*69+ar#A@=>qOyZIuYM< zEAnAp5wj0a|2CEiLXYBEpl9*YNDv3b)|4j^{HwnLYx3J$2pIcEMs8#~3`Y}NSTg+O zdA@vB+T`T9JVYks5E>#6Qm5E3kDDBLxcd#wjO$y>^eWn)6YgKU)$*57vve0)-&s)ms~fn>9>)-U%Pl`4 z{f!vhNu&naNE%6c4RQKsrG~$M8pJnTnDn08ptBQmr8#u_no6C6u3dK%`(HB<&`{A; Ju1DI%{10$Bn|S~L literal 0 HcmV?d00001 diff --git a/close.png b/close.png new file mode 100644 index 0000000000000000000000000000000000000000..dada2721e58158b766e5a22cd3f6ab84cc5b50c8 GIT binary patch literal 2068 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html new file mode 100644 index 0000000..27fc264 --- /dev/null +++ b/index.html @@ -0,0 +1,30 @@ + + + + + + Tic Tac Toe + + + +
+

Tic Tac Toe

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

+ +
+ + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..786143c --- /dev/null +++ b/script.js @@ -0,0 +1,150 @@ +/* Tic Tac Toe + +you will need three functions handle three main things: +MAIN LOGIC: +checkWin: which checks if the player won the game; +handleTurn: which checks who's turn is it; +checkDraw: which checks at the end of the game if it is a draw. +SECONDARY LOGIC: +placeMark = change div into a square or circle +endGame = which checks if win OR if draw, and display the message to the user +changeTurn + +*/ + +//Global variables +const crossClass = 'cross'; +const circleClass = 'circle'; +let crossTurn = true; +let crossArray = []; +let circleArray = []; +let crossWon; +let circleWon; +let win= 'false'; +let winner; +let draw; +var endmessage = document.querySelector(".status"); + +// const winningMessage =`${currentPlayer} has won!`; +const drawMessage ='The game ended in a draw!'; +//need to be zero-indexed bc its an array +const winningCombinations = [ + ["0", "1", "2"], + ["3", "4", "5"], + ["6", "7", "8"], + ["0", "3", "6"], + ["1", "4", "7"], + ["2", "5", "8"], + ["0", "4", "8"], + ["2", "4", "6"] +]; + +const cellElements = document.getElementsByClassName("cell"); + +//helper functions section + + +//handle click will handle 4 operations: place mark, check for win, check draw, switch turns + + +let handleClick= function(e){ + console.log("click") + const cell = e.target + let currentClass = crossTurn ? crossClass : circleClass + console.log(currentClass) + markSpot(currentClass,cell) + spotsTaken(currentClass,cell) + console.log(circleArray,crossArray) + //check for win + //check for draw + //change turn + // checkWin(currentClass); + compareCross(crossArray) + compareCircle(circleArray) + winCheck(circleWon, crossWon) + if(win === true){ + endGame(); + } + + checkDraw(); + if(draw===true){ + endGame(); + } + + changeTurns() + +}; +//helper function to keep track of both cross and circle positions +var spotsTaken = function(currentClass,cell){ + if(currentClass==='circle'){ + circleArray.push(cell.getAttribute("id")); + } else if (currentClass ==='cross'){ + crossArray.push(cell.getAttribute("id")); + } +} +//helper function to add class attribute to grid +var markSpot = function(currentclass, item){ + item.classList.add(currentclass) +}; + +//helper fucntion to change turns + var changeTurns = function(){ + if(crossTurn === true){ + crossTurn = false; + } else if (crossTurn === false){ + crossTurn = true; + } + } + +//add event listener on each grid using for loop +for(var i =0; i< cellElements.length; i++){ + cellElements[i].addEventListener("click", handleClick,{once: true}) +}; + + + + +var compareCross = function(crossArray) { + winningCombinations.forEach(element => { + crossWon= element.filter(x => crossArray.includes(x)) + // console.log(element); + // console.log(crossArray); + console.log(crossWon); + }) +} + +var compareCircle = function(circleArray) { + winningCombinations.forEach(element => { + circleWon = element.filter(x => circleArray.includes(x)) + + }) +} + +var winCheck = function(circleWon, crossWon) { + if(circleWon.length >2 ){ + win = true; + winner = "circle" + } else if( crossWon.length) { + win = true; + winner ="cross" + } else{ + winner=false; + } +} + +// var checkDraw = function() { +// if(cellElements.every(cell => { +// return cell.classList.contains(crossClass) || +// cell.classList.contains(circleClass) +// })){ +// return draw = true +// } +// } + +var endGame = function(draw){ + if(draw) { + endmessage.innerText = "Draw!" + } else { + endmessage.innerText = `${winner} wins!` + } +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..a609562 --- /dev/null +++ b/style.css @@ -0,0 +1,44 @@ +body { + font-family: "Arial", sans-serif; +} +section { + text-align: center; +} +.container { + display: grid; + grid-template-columns: repeat(3, auto); + width: 306px; + margin: 50px auto; +} +.cell { + font-family: "Permanent Marker", cursive; + width: 100px; + height: 100px; + box-shadow: 0 0 0 1px #333333; + border: 1px solid #333333; + cursor: pointer; + line-height: 100px; + font-size: 60px; +} + +.cell.circle, +.cell.cross{ + cursor: not-allowed; +} + +.circle { + content: url('circle.png'); + +} + +.cross { + content:url('cross.png'); +} + +.winningmessage { + +} + +.drawmessage { + +} \ No newline at end of file From ef6dbc7318971dd36952f23917c83f3f0e5fed0b Mon Sep 17 00:00:00 2001 From: Aurelia Lim Date: Fri, 14 Aug 2020 10:24:09 +0800 Subject: [PATCH 2/3] fixed the winning and draw logic. but now, theres a bug where if cross win, circle can still win --- script.js | 63 ++++++++++++++++++++++++------------------------------- 1 file changed, 27 insertions(+), 36 deletions(-) diff --git a/script.js b/script.js index 786143c..8ad5978 100644 --- a/script.js +++ b/script.js @@ -24,6 +24,7 @@ let win= 'false'; let winner; let draw; var endmessage = document.querySelector(".status"); +let noOfTurns = 0; // const winningMessage =`${currentPlayer} has won!`; const drawMessage ='The game ended in a draw!'; @@ -53,15 +54,15 @@ let handleClick= function(e){ let currentClass = crossTurn ? crossClass : circleClass console.log(currentClass) markSpot(currentClass,cell) + noOfTurns ++; spotsTaken(currentClass,cell) console.log(circleArray,crossArray) //check for win //check for draw //change turn // checkWin(currentClass); - compareCross(crossArray) - compareCircle(circleArray) - winCheck(circleWon, crossWon) + winCheck(crossArray, circleArray) + console.log(win); if(win === true){ endGame(); } @@ -104,47 +105,37 @@ for(var i =0; i< cellElements.length; i++){ -var compareCross = function(crossArray) { + + +var winCheck = function(crossArray, circleArray) { winningCombinations.forEach(element => { crossWon= element.filter(x => crossArray.includes(x)) - // console.log(element); - // console.log(crossArray); - console.log(crossWon); + if(crossWon.length === 3 ){ + win = true; + return winner = "cross" + } }) -} -var compareCircle = function(circleArray) { winningCombinations.forEach(element => { - circleWon = element.filter(x => circleArray.includes(x)) - - }) + circleWon = element.filter(x => circleArray.includes(x)) + if ( circleWon.length === 3) { + win = true; + winner ="circle" + } +}) } -var winCheck = function(circleWon, crossWon) { - if(circleWon.length >2 ){ - win = true; - winner = "circle" - } else if( crossWon.length) { - win = true; - winner ="cross" - } else{ - winner=false; - } -} -// var checkDraw = function() { -// if(cellElements.every(cell => { -// return cell.classList.contains(crossClass) || -// cell.classList.contains(circleClass) -// })){ -// return draw = true -// } -// } - -var endGame = function(draw){ - if(draw) { - endmessage.innerText = "Draw!" - } else { +var checkDraw = function(noOfTurns){ + if(noOfTurns===9 && winner === null) { + draw = true; + } +}; + +var endGame = function(){ + if(draw ===true){ + endmessage.innerText = "its a draw!" + } else if (winner !== null){ endmessage.innerText = `${winner} wins!` } } \ No newline at end of file From 5c6b54262d294d64f7b01ddc48e64e05a44e03e5 Mon Sep 17 00:00:00 2001 From: Aurelia Lim Date: Fri, 14 Aug 2020 10:36:36 +0800 Subject: [PATCH 3/3] fixed bug! --- script.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/script.js b/script.js index 8ad5978..d8e562b 100644 --- a/script.js +++ b/script.js @@ -26,8 +26,7 @@ let draw; var endmessage = document.querySelector(".status"); let noOfTurns = 0; -// const winningMessage =`${currentPlayer} has won!`; -const drawMessage ='The game ended in a draw!'; + //need to be zero-indexed bc its an array const winningCombinations = [ ["0", "1", "2"], @@ -124,6 +123,12 @@ var winCheck = function(crossArray, circleArray) { } }) } + //disable game so that user cant press after one person wins +var disableGame = function() { + for(var i =0; i< cellElements.length; i++){ + cellElements[i].removeEventListener("click", handleClick) + }; +} var checkDraw = function(noOfTurns){ @@ -133,6 +138,7 @@ var checkDraw = function(noOfTurns){ }; var endGame = function(){ + disableGame(); if(draw ===true){ endmessage.innerText = "its a draw!" } else if (winner !== null){