html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!-- Created by Triz -->
<!--
https://www.sololearn.com/Discuss/3093619
x-changes-to-o-and-vice-versa
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Tic-Tac-Toe</title>
</head>
<body>
<h1>Tic <span>-Tac-</span> Toe</h1>
<div id="game">
<div id="status">Move your mouse over a square and click to play an X or an O.</div>
<div id="board">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/* Created by Triz */
@import url('https://fonts.googleapis.com/css?family=Titan+One&display=swap');
:root{
--black: #1a202c;
--lightGrey: #edf2f7;
--grey: #cbd5e0;
--coral: #E57996;
--lighterBlue: #32ABE1;
--lightBlue: #3182ce;
--green: #42B883;
--defaultFontFamily: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;
}
body {
font-family: var(--defaultFontFamily);
background: var(--lightGrey) url('tic-tac-toe-bg.png') repeat top left;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: var(--black);
user-select: none;
}
h1 {
color: var(--lighterBlue);
Enter to Rename, Shift+Enter to Preview
js
js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
// Created by Triz
const board = document.getElementById("board");
const tiles = board.getElementsByTagName("div");
const announcer = document.getElementById("status");
const btn= document.querySelector("button"); //New-game button
let gameEnded, lastPlayer="", arr;
window.onload = event => {
tileLayout();
//New-Game Button
btn.addEventListener("click", function(){
gameEnded= false;
lastPlayer = "O";
arr= new Array(9);
announcer.classList.remove("you-won");
announcer.innerHTML = "Move your mouse over a square and click to play an X or an O.";
for(shape of tiles){
shape.classList.remove("X");
shape.classList.remove("O");
shape.innerText = "";
}
});
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run