HTML Chess Game: Build Your Own Chessboard
<p><!doctype html></p>
<html>
<head>
<title>Chess Game</title>
<style>
.square {
width: 50px;
height: 50px;
background-color: #ccc;
position: relative;
}
</style>
</head>
<body>
<div>
<div class='square' id='a8'></div>
<div class='square' id='b8'></div>
<div class='square' id='c8'></div>
<div class='square' id='d8'></div>
<div class='square' id='e8'></div>
<div class='square' id='f8'></div>
<div class='square' id='g8'></div>
<div class='square' id='h8'></div>
<div class='square' id='a7'></div>
<div class='square' id='b7'></div>
<div class='square' id='c7'></div>
<div class='square' id='d7'></div>
<div class='square' id='e7'></div>
<div class='square' id='f7'></div>
<div class='square' id='g7'></div>
<div class='square' id='h7'></div>
<div class='square' id='a6'></div>
<div class='square' id='b6'></div>
<div class='square' id='c6'></div>
<div class='square' id='d6'></div>
<div class='square' id='e6'></div>
<div class='square' id='f6'></div>
<div class='square' id='g6'></div>
<div class='square' id='h6'></div>
<div class='square' id='a5'></div>
<div class='square' id='b5'></div>
<div class='square' id='c5'></div>
<div class='square' id='d5'></div>
<div class='square' id='e5'></div>
<div class='square' id='f5'></div>
<div class='square' id='g5'></div>
<div class='square' id='h5'></div>
<div class='square' id='a4'></div>
<div class='square' id='b4'></div>
<div class='square' id='c4'></div>
<div class='square' id='d4'></div>
<div class='square' id='e4'></div>
<div class='square' id='f4'></div>
<div class='square' id='g4'></div>
<div class='square' id='h4'></div>
<div class='square' id='a3'></div>
<div class='square' id='b3'></div>
<div class='square' id='c3'></div>
<div class='square' id='d3'></div>
<div class='square' id='e3'></div>
<div class='square' id='f3'></div>
<div class='square' id='g3'></div>
<div class='square' id='h3'></div>
<div class='square' id='a2'></div>
<div class='square' id='b2'></div>
<div class='square' id='c2'></div>
<div class='square' id='d2'></div>
<div class='square' id='e2'></div>
<div class='square' id='f2'></div>
<div class='square' id='g2'></div>
<div class='square' id='h2'></div>
<div class='square' id='a1'></div>
<div class='square' id='b1'></div>
<div class='square' id='c1'></div>
<div class='square' id='d1'></div>
<div class='square' id='e1'></div>
<div class='square' id='f1'></div>
<div class='square' id='g1'></div>
<div class='square' id='h1'></div>
</div>
<script>
const squares = document.querySelectorAll('.square');
let selectedSquare = null;
<pre><code> squares.forEach(square => {
square.addEventListener('click', e => {
if(selectedSquare) {
// Move the piece
selectedSquare.innerHTML = '';
square.innerHTML = selectedSquare.innerHTML;
selectedSquare = null;
} else {
// Select the piece
selectedSquare = square;
}
});
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/lnjq 著作权归作者所有。请勿转载和采集!