HTML5是一個(gè)非常強(qiáng)大的網(wǎng)頁(yè)開(kāi)發(fā)語(yǔ)言，它可以用來(lái)制作很多功能豐富的網(wǎng)頁(yè)。其中，五子棋是一種非常經(jīng)典的游戲，本文將分享一個(gè)簡(jiǎn)單的HTML5五子棋代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5五子棋</title>
<style>
/* 定義棋盤(pán)的樣式 */
#board {
display: grid;
grid-template-columns: repeat(15, 40px); /* 定義15行每行40個(gè)像素 */
grid-template-rows: repeat(15, 40px); /* 定義15列每列40個(gè)像素 */
border: 1px solid #000;
}
/* 定義棋子的樣式 */
.stone {
width: 36px;
height: 36px;
border-radius: 50%;
box-sizing: border-box;
border: 2px solid #000;
position: absolute;
left: 2px;
top: 2px;
transform: translate(-50%, -50%);
}
.black {
background-color: #000;
}
.white {
background-color: #fff;
}
</style>
</head>
<body>
<div id="board"></div>
<script>
// 生成15*15的棋盤(pán)
const board = document.getElementById('board');
for (let i = 0; i < 15; i++) {
for (let j = 0; j < 15; j++) {
const cell = document.createElement('div');
cell.dataset.x = i;
cell.dataset.y = j;
cell.className = 'cell';
board.appendChild(cell);
}
}
// 下棋事件
let isBlack = true;
board.addEventListener('click', event => {
const x = event.target.dataset.x;
const y = event.target.dataset.y;
if (x && y) {
const stone = document.createElement('div');
stone.className = 'stone ' + (isBlack ? 'black' : 'white');
stone.style.left = x*40 + 21 + 'px';
stone.style.top = y*40 + 21 + 'px';
board.appendChild(stone);
isBlack = !isBlack;
}
});
</script>
</body>
</html>以上便是一個(gè)簡(jiǎn)單的HTML5五子棋代碼，它利用了HTML5的網(wǎng)頁(yè)排版和JavaScript的事件綁定功能，實(shí)現(xiàn)了一個(gè)基礎(chǔ)的五子棋游戲。通過(guò)這個(gè)代碼，在HTML5的學(xué)習(xí)中，我們可以更加深入地了解其強(qiáng)大的功能和應(yīng)用。