Skip to content

Commit 6da4c7b

Browse files
michparamichpara
authored
adding js tic tac toe project
1 parent cd44e87 commit 6da4c7b

File tree

8 files changed

+258
-0
lines changed

8 files changed

+258
-0
lines changed

‎tic-tac-toe/README.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Tic Tac Toe
2+
3+
![](gifs/tictactoe.gif)
4+
5+
A Tic Tac Toe game using HTML, CSS and JavaScript.
6+
7+
To view the website, visit : https://michpara.github.io/tic-tac-toe/

‎tic-tac-toe/gifs/tictactoe.gif

75.2 KB
Loading

‎tic-tac-toe/images/tic-tac-toe-o.png

5.92 KB
Loading

‎tic-tac-toe/images/tic-tac-toe-x.png

6.34 KB
Loading

‎tic-tac-toe/images/tic-tac-toe.png

12.7 KB
Loading

‎tic-tac-toe/index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<link rel="stylesheet" type="text/css" href="styles.css"/>
5+
<title>Tic Tac Toe</title>
6+
<link rel="icon" href="images/tic-tac-toe.png" type="image/icon type">
7+
</head>
8+
<body>
9+
<div class="center">
10+
<p>Player 1: </p>
11+
<input id="player1" type="text">
12+
<p>Player 2: </p>
13+
<input id="player2" type="text">
14+
<button id="start">Start</button>
15+
<button id="reset">Reset</button>
16+
</div>
17+
<div class="center">
18+
<p id="winner"></p>
19+
</div>
20+
<div class="center">
21+
<div id="gameboard"></div>
22+
</div>
23+
<script src="script.js"></script>
24+
</body>
25+
</html>

‎tic-tac-toe/script.js

Lines changed: 170 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,170 @@
1+
const GameBoard = (() => {
2+
const size = 3;
3+
let gameboard = [["", "", ""], ["", "", ""], ["", "", ""]];
4+
5+
const getGameBoard = () => gameboard;
6+
7+
const displayGameBoard = () => {
8+
let rows = gameboard.length;
9+
let cols = gameboard[0].length;
10+
let gameboardDiv = document.querySelector("#gameboard");
11+
for(var row = 0; row < rows; row++){
12+
for(var col = 0; col < cols; col++){
13+
var cell = document.createElement("div");
14+
if(gameboard[row][col] === ""){
15+
cell.innerHTML = gameboard[row][col];
16+
} else {
17+
cell.appendChild(gameboard[row][col])
18+
}
19+
cell.id = [row, col];
20+
cell.setAttribute("class", "cell");
21+
gameboardDiv.appendChild(cell);
22+
23+
cell.style.top = row * 110 + "px";
24+
cell.style.left = col * 110 + "px";
25+
}
26+
}
27+
};
28+
29+
const play = (player, row, col) => {
30+
symbol = player.getSymbol();
31+
gameboard[row][col] = symbol;
32+
displayGameBoard();
33+
if(GameBoard.gameOver(symbol, row, col) == 0){
34+
document.getElementById("winner").innerHTML = ("The game is over! " + player.getName() + " is the winner!");
35+
} else if (GameBoard.gameOver(symbol, row, col) == 1){
36+
document.getElementById("winner").innerHTML = ("It is a draw!")
37+
} else {
38+
Game.listen();
39+
Game.increaseMoveCount();
40+
}
41+
};
42+
43+
const gameOver = (symbol, row, col) => {
44+
for(var i = 0; i<size; i++){
45+
if(gameboard[row][i].alt != symbol.alt){
46+
break;
47+
}
48+
if(i == size-1){
49+
return 0;
50+
}
51+
}
52+
53+
for(var i = 0; i<size; i++){
54+
if(gameboard[i][col].alt != symbol.alt){
55+
break;
56+
}
57+
if(i == size-1){
58+
return 0;
59+
}
60+
}
61+
62+
if(row == col){
63+
for(var i = 0; i<size; i++){
64+
if(gameboard[i][i].alt != symbol.alt){
65+
break;
66+
}
67+
if(i == size-1){
68+
return 0;
69+
}
70+
}
71+
}
72+
if(row + col == size-1){
73+
for(var i = 0; i<size; i++){
74+
if(gameboard[i][size-1-i].alt != symbol.alt){
75+
break;
76+
}
77+
if(i == size-1){
78+
return 0;
79+
}
80+
}
81+
}
82+
if(Game.getMoveCount() >= (size*size-1)){
83+
return 1
84+
}
85+
}
86+
87+
const clearBoard = () => {
88+
gameboard = [["", "", ""], ["", "", ""], ["", "", ""]];
89+
}
90+
91+
return {getGameBoard, displayGameBoard, play, gameOver, clearBoard};
92+
})();
93+
94+
const Player = (symbol, name) => {
95+
const getSymbol = () => symbol;
96+
const getName = () => name;
97+
return {getSymbol, getName};
98+
};
99+
100+
const Game = (() => {
101+
102+
let turn = false;
103+
104+
let moveCount = 0;
105+
106+
GameBoard.displayGameBoard();
107+
108+
const getMoveCount = () => {
109+
return moveCount;
110+
};
111+
112+
const increaseMoveCount = () => {
113+
moveCount++;
114+
};
115+
116+
const listen = () => {
117+
player1Name = document.getElementById("player1").value;
118+
player2Name = document.getElementById("player2").value;
119+
120+
symbolX = document.createElement("img");
121+
symbolX.src="images/tic-tac-toe-x.png"
122+
symbolX.width = 100;
123+
symbolX.alt = "x"
124+
125+
symbolO = document.createElement("img");
126+
symbolO.src="images/tic-tac-toe-o.png"
127+
symbolO.width = 90;
128+
symbolO.alt = "o"
129+
130+
131+
const player1 = Player(symbolX, player1Name);
132+
const player2 = Player(symbolO, player2Name);
133+
134+
const cells = document.getElementsByClassName("cell");
135+
if(turn){
136+
player = player2;
137+
turn = false;
138+
} else {
139+
player = player1;
140+
turn = true;
141+
}
142+
Array.from(cells).forEach((cell) => {
143+
cell.addEventListener("click", function(){
144+
if(GameBoard.getGameBoard()[cell.id[0]][cell.id[2]] === ""){
145+
GameBoard.play(player, parseInt(cell.id[0]), parseInt(cell.id[2]))
146+
}
147+
})
148+
});
149+
};
150+
151+
const reset = () => {
152+
window.location.reload();
153+
}
154+
return {listen, moveCount, getMoveCount, increaseMoveCount, reset};
155+
})();
156+
157+
document.getElementById("start").addEventListener("click", function(){
158+
player1Name = document.getElementById("player1").value;
159+
player2Name = document.getElementById("player2").value;
160+
161+
if(player1Name === '' || player2Name === ''){
162+
alert("Please input your names!");
163+
} else {
164+
Game.listen();
165+
}
166+
})
167+
168+
document.getElementById("reset").addEventListener("click", function(){
169+
Game.reset();
170+
})

‎tic-tac-toe/styles.css

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
.cell {
2+
position: absolute;
3+
width: 100px;
4+
height: 100px;
5+
border: 10px solid black;
6+
background-color: white;
7+
cursor: pointer;
8+
}
9+
10+
.cell:hover{
11+
background-color: #f2f2f2;
12+
}
13+
14+
#gameboard{
15+
position: relative;
16+
padding: 220px;
17+
}
18+
19+
input[type=text] {
20+
margin: 0 10px 0px 10px;
21+
border:0;
22+
box-shadow:0 0 15px 4px rgba(0,0,0,0.06);
23+
border-radius:10px;
24+
font-size: 20px;
25+
text-align: center;
26+
}
27+
28+
button {
29+
/* remove default behavior */
30+
appearance:none;
31+
-webkit-appearance:none;
32+
33+
/* usual styles */
34+
padding:5px;
35+
border:none;
36+
background-color:#3F51B5;
37+
color:#fff;
38+
font-weight:600;
39+
border-radius:5px;
40+
width:10%;
41+
margin: 0 10px 0px 10px;
42+
cursor: pointer;
43+
}
44+
45+
button:hover {
46+
background-color: #3849a2;;
47+
}
48+
49+
.center {
50+
display: flex;
51+
justify-content: center;
52+
}
53+
54+
p{
55+
font-size: 20px;
56+
}

0 commit comments

Comments
 (0)