Play Tic Tac Toe Online - Free HTML Game
<!DOCTYPE html>
<html>
<head>
<title>Tic Tac Toe</title>
<style>
* { margin: 0; padding: 0; }
body { font-family: sans-serif; }
.container { width: 300px; margin: 0 auto; }
.box {
width: 100px;
height: 100px;
border: 1px solid #000;
display: inline-block;
font-size: 60px;
text-align: center;
line-height: 100px;
cursor: pointer;
}
.clear { clear: both; }
h1 { text-align: center; color: #000; }
</style>
</head>
<body>
<h1>Tic Tac Toe</h1>
<div class="container">
<div class="box" id="box_1">
</div>
<div class="box" id="box_2">
</div>
<div class="box" id="box_3">
</div>
<div class="clear"></div>
<div class="box" id="box_4">
</div>
<div class="box" id="box_5">
</div>
<div class="box" id="box_6">
</div>
<div class="clear"></div>
<div class="box" id="box_7">
</div>
<div class="box" id="box_8">
</div>
<div class="box" id="box_9">
</div>
</div>
<script>
var turn = 'X';
var boxes = document.querySelectorAll('#box_1, #box_2, #box_3, #box_4, #box_5, #box_6, #box_7, #box_8, #box_9');
for (var i = 0; i < boxes.length; i++) {
boxes[i].addEventListener('click', function(){
if(this.innerHTML == '') {
this.innerHTML = turn;
if(turn == 'X') {
turn = 'O';
} else {
turn = 'X';
}
}
});
}
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lnni 著作权归作者所有。请勿转载和采集!