Skip to content

Instantly share code, notes, and snippets.

@cannandev
Created April 12, 2020 02:28
Show Gist options
  • Save cannandev/4179c49e7d5a98c34b387fea18eb9905 to your computer and use it in GitHub Desktop.
Save cannandev/4179c49e7d5a98c34b387fea18eb9905 to your computer and use it in GitHub Desktop.
JavaScript Tic-Tac-Toe
<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>

JavaScript Tic-Tac-Toe

Build a simple JavaScript tic-tac-toe game. Each click switches turns between 'X' and 'O'.

A Pen by cannandev on CodePen.

License.

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();
});
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;
}
<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