HTML5是一個非常強大的網頁開發語言，它可以用來制作很多功能豐富的網頁。其中，五子棋是一種非常經典的游戲，本文將分享一個簡單的HTML5五子棋代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5五子棋</title>
<style>
/* 定義棋盤的樣式 */
#board {
display: grid;
grid-template-columns: repeat(15, 40px); /* 定義15行每行40個像素 */
grid-template-rows: repeat(15, 40px); /* 定義15列每列40個像素 */
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的棋盤
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>以上便是一個簡單的HTML5五子棋代碼，它利用了HTML5的網頁排版和JavaScript的事件綁定功能，實現了一個基礎的五子棋游戲。通過這個代碼，在HTML5的學習中，我們可以更加深入地了解其強大的功能和應用。
上一篇html5答題翻頁代碼
下一篇mod-list.css