Skip to content

Instantly share code, notes, and snippets.

@nairihar

nairihar/index.html

Created March 24, 2020 15:33
Show Gist options
  • Save nairihar/3569e45148593bfa9bd538b0956da65c to your computer and use it in GitHub Desktop.
Save nairihar/3569e45148593bfa9bd538b0956da65c to your computer and use it in GitHub Desktop.
Download ZIP
JavaScript Armenia | Tic Tac Toe | LIVE session #2 | Building and discussing a simple Tic Tac Toe game via HTML, CSS, and JavaScript !!!
Raw
index.html
<html>
<head>
<title>Tic Tac Toe</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
<div id="Board"></div>
</body>
<script src="./script.js"></script>
</html>
Raw
script.js
const SIZE = 5;
const BOX_WIDTH = 100;
const BORDER_SIZE = 2;
const gameData = {}
const Board = document.getElementById('Board');
function initGame() {
gameData.turn = 1; // X
gameData.move = 0;
gameData.board = []
for (let n = 0; n < SIZE; n++) {
gameData.board[n] = new Array(SIZE).fill(null);
}
}
function getCurrentPlayerName() {
return gameData.turn === 0 ? 'O' : 'X';
}
function getNextPlayer() {
return gameData.turn === 0 ? 1 : 0;
}
function valideHorizotal(lineIndex) {
for (let key of gameData.board[lineIndex]) {
if (key !== gameData.turn) {
console.log(key, gameData.turn)
return false;
}
}
return true;
}
function validateVertical(boxIndex) {
for (let line of gameData.board) { // 0, 1, 2
if (line[boxIndex] !== gameData.turn) {
return false;
}
}
return true;
}
function validateGame(lineIndex, boxIndex) {
if (valideHorizotal(lineIndex) || validateVertical(boxIndex)) {
alert('WIN:', getCurrentPlayerName())
}
console.log(gameData.move)
if (gameData.move === SIZE**2) {
alert('Draw!!');
}
}
function play() {
gameData.move += 1;
const p = document.createElement('p');
p.innerHTML = getCurrentPlayerName();
this.appendChild(p);
const lineIndex = Math.floor(this.boardIndex / SIZE);
const boxIndex = this.boardIndex % SIZE;
gameData.board[lineIndex][boxIndex] = gameData.turn;
setTimeout(() => {
validateGame(lineIndex, boxIndex)
gameData.turn = getNextPlayer()
}, 0)
}
function createBox(index) {
const BoxElement = document.createElement('div');
BoxElement.setAttribute('class', 'Box');
BoxElement.style.width = BOX_WIDTH;
BoxElement.style.height = BOX_WIDTH;
BoxElement.boardIndex = index;
BoxElement.addEventListener('click', play);
return BoxElement;
}
function setupGame() {
Board.style.width = (BOX_WIDTH) * SIZE;
Board.style.height = (BOX_WIDTH) * SIZE;
Board.style.marginTop = -(SIZE * BOX_WIDTH) / 2;
Board.style.marginLeft = -(SIZE * BOX_WIDTH) / 2;
for (let n = 0; n < SIZE**2; n++) {
Board.appendChild(createBox(n));
}
}
setupGame()
initGame()
Raw
style.css
body {
background-color: black;
}
#Board {
background: gray;
position: absolute;
top: 50%;
left: 50%;
}
.Box {
background-color: white;
display: inline-block;
border: 1px solid black;
box-sizing: border-box;
text-align: center;
line-height: 1;
font-size: 40px;
font-family: fantasy;
vertical-align: top;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment