五子棋是一種非常經典的桌游，而今天我們將學習如何用HTML和JS編寫一個簡單的五子棋游戲代碼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>五子棋游戲</title>
<style>
/*棋盤樣式*/
#board{
width: 500px;
height: 500px;
border: 1px solid black;
margin: auto;
position: relative;
}
/*格子的樣式*/
.cell{
width: 50px;
height: 50px;
border: 1px solid black;
position: absolute;
box-sizing: border-box;
}
/*黑子白子的樣式*/
.black{
background-color: black;
border-radius: 50%;
}
.white{
background-color: white;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="board"></div>
<script>
//定義變量
var board = document.getElementById("board");
var cells = [];
var chess = [];
var currentPlayer = 1;
//創建棋盤
for(var i=0;i<10;i++){
for(var j=0;j<10;j++){
var cell = document.createElement("div");
cell.className = "cell";
cell.style.left = j * 50 + "px";
cell.style.top = i * 50 + "px";
board.appendChild(cell);
cells.push(cell);
chess.push(0);
cell.onclick = function(){
if(this.hasChildNodes()) return;
var index = cells.indexOf(this);
chess[index] = currentPlayer;
var stone = document.createElement("div");
stone.className = (currentPlayer === 1)?"black":"white";
this.appendChild(stone);
if(wins(currentPlayer)){
alert("玩家"+currentPlayer+"勝利！");
}
currentPlayer = 3 - currentPlayer;
}
}
}
//判斷是否勝利
var wins = function(color){
var count = 0;
for(var i=0;i<chess.length;i++){
if(chess[i] == color){
count++;
if(count == 5){
return true;
}
}else{
count = 0;
}
}
return false;
}
</script>
</body>
</html>以上就是這個五子棋游戲的HTML和JS代碼。在這個代碼中，我們創建了一個10*10的棋盤，并在點擊格子的時候，進行了棋子的落子和勝利的判斷。實際上，這個代碼還有很多可以完善的地方，比如可以加上悔棋的功能，讓游戲更加完善和流暢。