Build a simple JavaScript tic-tac-toe game. Each click switches turns between 'X' and 'O'.
Created
April 12, 2020 02:28
-
-
Save cannandev/4179c49e7d5a98c34b387fea18eb9905 to your computer and use it in GitHub Desktop.
JavaScript Tic-Tac-Toe
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<header class="text-center"> | |
<h1>JavaScript Tic-Tac-Toe</h1> | |
<h2 class="message">Click a square to mark your spot!</h2> | |
<button id="reset" class="btn btn-primary">Reset</button> | |
</header> | |
<div> | |
<ul id="grid"></ul> | |
</div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var grid = document.getElementById('grid'); | |
var msg = document.querySelector('.message'); | |
var mark = 'X'; | |
var cells; | |
// build grid | |
for (var i=1; i<=9; i++){ | |
var cell = document.createElement('li'); | |
cell.id = 'c' + i; | |
cell.addEventListener('click', setMove, false); | |
grid.appendChild(cell); | |
} | |
cells = document.querySelectorAll('li'); | |
// add click listener to each cell | |
function setMove(){ | |
if(this.textContent == ''){ | |
this.textContent = mark; | |
checkRow(); | |
switchMark(); | |
} | |
} | |
// switch user | |
function switchMark(){ | |
if (mark == 'X'){ | |
mark = 'O'; | |
} | |
else { | |
mark = 'X'; | |
} | |
} | |
// determine a winner | |
function winner(a,b,c){ | |
if (a.textContent == mark && b.textContent == mark && c.textContent == mark){ | |
msg.textContent = mark + ' is the winner!'; | |
a.classList.add('winner'); | |
b.classList.add('winner'); | |
c.classList.add('winner'); | |
return true; | |
} | |
else { | |
return false; | |
} | |
} | |
function checkSiblings(currentMove){ | |
var next = Number(currentMove.id + 3); | |
var prev = Number(currentMove.id - 3); | |
winner(cells[currentMove.id].textContent, cells[next].textContent, cells[prev].textContent); | |
} | |
// check cell combinations | |
function checkRow(){ | |
winner(document.getElementById('c1'), document.getElementById('c2'), document.getElementById('c3')); | |
winner(document.getElementById('c4'), document.getElementById('c5'), document.getElementById('c6')); | |
winner(document.getElementById('c7'), document.getElementById('c8'), document.getElementById('c9')); | |
winner(document.getElementById('c1'), document.getElementById('c4'), document.getElementById('c7')); | |
winner(document.getElementById('c2'), document.getElementById('c5'), document.getElementById('c8')); | |
winner(document.getElementById('c3'), document.getElementById('c6'), document.getElementById('c9')); | |
winner(document.getElementById('c1'), document.getElementById('c5'), document.getElementById('c9')); | |
winner(document.getElementById('c3'), document.getElementById('c5'), document.getElementById('c7')); | |
} | |
// clear the grid | |
function reset(){ | |
mark = 'X'; | |
for (var i=0; i<cells.length; i++){ | |
cells[i].textContent = ''; | |
cells[i].classList.remove('winner'); | |
} | |
msg.textContent = 'Click a square to mark your spot!'; | |
} | |
var resetButton = document.getElementById('reset'); | |
resetButton.addEventListener('click', function(e){ | |
e.preventDefault(); | |
reset(); | |
}); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html { | |
box-sizing: border-box; | |
} | |
*, *:before, *:after { | |
box-sizing: inherit; | |
} | |
body { | |
background-color: #299B89; | |
} | |
#grid { | |
width: 300px; | |
margin: 2em auto; | |
} | |
li { | |
border: 1px solid #000; | |
width: 100px; | |
height: 100px; | |
display: block; | |
float: left; | |
font-size: 3em; | |
text-align: center; | |
padding: .5em; | |
} | |
#c1, #c2, #c3 { | |
border-top: none; | |
} | |
#c3, #c6, #c9 { | |
border-right: none; | |
} | |
#c7, #c8, #c9 { | |
border-bottom: none; | |
} | |
#c1, #c4, #c7 { | |
border-left: none; | |
} | |
.btn-primary, | |
.btn-primary:focus { | |
outline: 0; | |
background-color: #ECBD18; | |
transition: all ease .3s; | |
} | |
.btn-primary:hover { | |
background-color: #FFC700; | |
} | |
.wrapper { | |
width: 400px; | |
margin: 0 auto; | |
} | |
.winner { | |
color: #9A109B; | |
} | |
.message { | |
color: #fff; | |
font-size: 1.5em; | |
padding-bottom: 1em; | |
} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment