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
<!DOCTYPE html>
<html>
<head>
<title>Tic-Tac Toe</title>
</head>
<body>
<div class="tabs">
<button class="button" id="one" onclick = checkForLetter("one") > </button>
<button class="button" id="two" onclick = checkForLetter("two") > </button>
<button class="button" id="three" onclick = checkForLetter("three") > </button>
<br/>
<button class="button" id="four" onclick = checkForLetter("four") > </button>
<button class="button" id="five" onclick = checkForLetter("five") > </button>
<button class="button" id="six" onclick = checkForLetter("six") > </button>
<br/>
<button class="button" id="seven" onclick = checkForLetter("seven") > </button>
<button class="button" id="eight" onclick = checkForLetter("eight") > </button>
<button class="button" id="nine" onclick = checkForLetter("nine") > </button>
<br/>
</div>
<div class = "scores">
<label id="p1Score" >Player 1 Score(X): </label>
<label id="p2Score" >Player 2 Score(O): </label>
</div>
</body>
</html>
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
*{
font-family: arial;
font-size: 15px;
}
.tabs {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}
.button{
width: 75px;
height: 75px;
background-color: #FFFFFF;
cursor: pointer;
box-shadow: 0 5px 0 0 #6FC1D3;
color: #0000FF;
padding: 0;
margin: 5px;
border-radius: 5px;
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
}
.scores {
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
alert("Your resolution might affect the button's placements :/");
var turn = 0;
var placeIsEmpty = false;
let player1Score = 0;
let player2Score = 0;
function checkForLetter(id) {
if (document.getElementById(id).textContent === "X".trim() || document.getElementById(id).textContent === "O".trim()) {
placeIsEmpty = false;
return placeIsEmpty;
} else {
placeIsEmpty = true;
return placeIsEmpty & switchTurns(id);
}
}
function switchTurns(id) {
if (placeIsEmpty === true) {
if (turn % 2 === 1) {
document.getElementById(id).textContent = "X".trim();
turn++;
placeIsEmpty = false;
console.log(turn);
return placeIsEmpty & determineWinner();
}
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run