写一个五子棋的html
<!DOCTYPE html>
<html>
<head>
<title>五子棋</title>
<style type="text/css">
body {
background-color: #F5DEB3;
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
#board {
margin: 50px auto;
width: 500px;
height: 500px;
background-color: #CD853F;
position: relative;
}
.square {
float: left;
width: 50px;
height: 50px;
border: 1px solid black;
box-sizing: border-box;
cursor: pointer;
}
.piece {
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: white;
box-shadow: 0px 0px 5px 2px black;
top: 5px;
left: 5px;
}
.black {
background-color: black;
}
.white {
background-color: white;
box-shadow: 0px 0px 5px 2px black, inset 0px 0px 5px 2px black;
}
.win {
position: absolute;
width: 500px;
height: 500px;
background-color: rgba(255, 255, 255, 0.8);
top: 0;
left: 0;
display: none;
justify-content: center;
align-items: center;
font-size: 50px;
font-weight: bold;
text-align: center;
}
</style>
</head>
<body>
<div id="board">
<script type="text/javascript">
// 定义棋盘大小
var ROW = 10;
var COL = 10;
<pre><code> // 定义棋子半径
var RADIUS = 20;
// 定义棋子颜色
var BLACK = 1;
var WHITE = 2;
// 定义棋子数组
var chess = [];
// 定义当前落子方
var turn = BLACK;
// 定义胜利状态
var win = false;
// 初始化棋盘
function init() {
for (var i = 0; i < ROW; i++) {
chess[i] = [];
for (var j = 0; j < COL; j++) {
chess[i][j] = 0;
}
}
}
// 绘制棋盘
function drawBoard() {
var board = document.getElementById("board");
for (var i = 0; i < ROW; i++) {
for (var j = 0; j < COL; j++) {
var square = document.createElement("div");
square.className = "square";
board.appendChild(square);
square.setAttribute("data-x", i);
square.setAttribute("data-y", j);
square.onclick = function() { dropPiece(this); };
}
}
}
// 绘制棋子
function drawPiece(x, y, color) {
var board = document.getElementById("board");
var piece = document.createElement("div");
piece.className = "piece";
piece.classList.add(color === BLACK ? "black" : "white");
board.appendChild(piece);
piece.style.top = (x * 50 + 5 - RADIUS) + "px";
piece.style.left = (y * 50 + 5 - RADIUS) + "px";
}
// 落子
function dropPiece(square) {
if (win) {
return;
}
var x = parseInt(square.getAttribute("data-x"));
var y = parseInt(square.getAttribute("data-y"));
if (chess[x][y] !== 0) {
return;
}
chess[x][y] = turn;
drawPiece(x, y, turn);
checkWin(x, y);
turn = turn === BLACK ? WHITE : BLACK;
}
// 判断胜利条件
function checkWin(x, y) {
var count = 1;
// 横向
for (var i = y - 1; i >= 0; i--) {
if (chess[x][i] !== turn) {
break;
}
count++;
}
for (var i = y + 1; i < COL; i++) {
if (chess[x][i] !== turn) {
break;
}
count++;
}
if (count >= 5) {
showWin(turn);
return;
}
// 纵向
count = 1;
for (var i = x - 1; i >= 0; i--) {
if (chess[i][y] !== turn) {
break;
}
count++;
}
for (var i = x + 1; i < ROW; i++) {
if (chess[i][y] !== turn) {
break;
}
count++;
}
if (count >= 5) {
showWin(turn);
return;
}
// 左上右下
count = 1;
for (var i = x - 1, j = y - 1; i >= 0 && j >= 0; i--, j--) {
if (chess[i][j] !== turn) {
break;
}
count++;
}
for (var i = x + 1, j = y + 1; i < ROW && j < COL; i++, j++) {
if (chess[i][j] !== turn) {
break;
}
count++;
}
if (count >= 5) {
showWin(turn);
return;
}
// 右上左下
count = 1;
for (var i = x - 1, j = y + 1; i >= 0 && j < COL; i--, j++) {
if (chess[i][j] !== turn) {
break;
}
count++;
}
for (var i = x + 1, j = y - 1; i < ROW && j >= 0; i++, j--) {
if (chess[i][j] !== turn) {
break;
}
count++;
}
if (count >= 5) {
showWin(turn);
return;
}
}
// 显示胜利状态
function showWin(color) {
win = true;
var winDiv = document.createElement("div");
winDiv.className = "win";
winDiv.innerText = color === BLACK ? "黑方胜利！" : "白方胜利！";
document.body.appendChild(winDiv);
winDiv.style.display = "flex";
}
init();
drawBoard();
</script>
</div>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/GkE 著作权归作者所有。请勿转载和采集!