五子棋小游戏
创作时间:
作者:
@小白创作中心
五子棋小游戏
引用
CSDN
1.
https://blog.csdn.net/weimengen/article/details/145473208
本文将介绍如何使用HTML、JavaScript和CSS实现一个简单的五子棋小游戏。通过这个项目，你将学习到如何结合这三种技术，构建一个有趣的互动游戏。
一、HTML 结构搭建
首先，我们需要创建一个HTML文件，来定义游戏的基本结构。我们需要一个棋盘和用于显示游戏状态的区域。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五子棋小游戏</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="game-board"></div>
<div id="status">轮到玩家1落子</div>
<script src="script.js"></script>
</body>
</html>
在这段代码中，我们创建了一个包含棋盘（game-board）和游戏状态显示区域（status）的HTML页面，并引入了外部的CSS和JavaScript文件。
二、CSS 样式设计
接下来，我们使用CSS来设计棋盘和棋子的样式。
#game-board {
width: 400px;
height: 400px;
border: 1px solid #000;
display: grid;
grid-template-columns: repeat(15, 1fr);
grid-template-rows: repeat(15, 1fr);
}
#game-board div {
border: 1px solid #ccc;
box-sizing: border-box;
}
.black {
background-color: black;
border-radius: 50%;
}
.white {
background-color: white;
border-radius: 50%;
}
#status {
margin-top: 10px;
font-size: 18px;
}
上述CSS代码定义了棋盘的大小、布局以及棋子的样式，同时设置了游戏状态显示区域的样式。
三、JavaScript 交互逻辑实现
最后，我们使用JavaScript来实现五子棋的核心逻辑，包括落子、判断胜负等。
const gameBoard = document.getElementById('game-board');
const status = document.getElementById('status');
let currentPlayer = 'black';
let board = Array.from({ length: 15 }, () => Array(15).fill(null));
gameBoard.addEventListener('click', function (e) {
const target = e.target;
if (target.tagName === 'DIV' && !target.classList.contains('black') && !target.classList.contains('white')) {
target.classList.add(currentPlayer);
const row = parseInt(target.dataset.row);
const col = parseInt(target.dataset.col);
board[row][col] = currentPlayer;
if (checkWin(currentPlayer)) {
status.textContent = `玩家 ${currentPlayer === 'black' ? '1' : '2'} 获胜！`;
gameBoard.style.pointerEvents = 'none';
} else if (isDraw()) {
status.textContent = '平局！';
gameBoard.style.pointerEvents = 'none';
} else {
currentPlayer = currentPlayer === 'black' ? 'white' : 'black';
status.textContent = `轮到玩家 ${currentPlayer === 'black' ? '1' : '2'} 落子`;
}
}
});
function checkWin(player) {
// 检查行
for (let i = 0; i < 15; i++) {
for (let j = 0; j <= 11; j++) {
if (board[i][j] === player && board[i][j + 1] === player && board[i][j + 2] === player && board[i][j + 3] === player && board[i][j + 4] === player) {
return true;
}
}
}
// 检查列
for (let j = 0; j < 15; j++) {
for (let i = 0; i <= 11; i++) {
if (board[i][j] === player && board[i + 1][j] === player && board[i + 2][j] === player && board[i + 3][j] === player && board[i + 4][j] === player) {
return true;
}
}
}
// 检查正对角线
for (let i = 0; i <= 11; i++) {
for (let j = 0; j <= 11; j++) {
if (board[i][j] === player && board[i + 1][j + 1] === player && board[i + 2][j + 2] === player && board[i + 3][j + 3] === player && board[i + 4][j + 4] === player) {
return true;
}
}
}
// 检查反对角线
for (let i = 0; i <= 11; i++) {
for (let j = 4; j < 15; j++) {
if (board[i][j] === player && board[i + 1][j - 1] === player && board[i + 2][j - 2] === player && board[i + 3][j - 3] === player && board[i + 4][j - 4] === player) {
return true;
}
}
}
return false;
}
function isDraw() {
for (let i = 0; i < 15; i++) {
for (let j = 0; j < 15; j++) {
if (board[i][j] === null) {
return false;
}
}
}
return true;
}
// 初始化棋盘
for (let i = 0; i < 15; i++) {
for (let j = 0; j < 15; j++) {
const cell = document.createElement('div');
cell.dataset.row = i;
cell.dataset.col = j;
gameBoard.appendChild(cell);
}
}
这段JavaScript代码实现了玩家落子、判断胜负和平局的逻辑。当玩家点击棋盘的空白区域时，会根据当前玩家的颜色在该位置放置棋子，并检查是否有玩家获胜或平局。
四、完整代码整合
为了方便大家查看和使用，下面将HTML、CSS和JavaScript的代码整合到一起，这样可以直接复制运行查看效果。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五子棋小游戏</title>
<style>
#game-board {
width: 400px;
height: 400px;
border: 1px solid #000;
display: grid;
grid-template-columns: repeat(15, 1fr);
grid-template-rows: repeat(15, 1fr);
}
#game-board div {
border: 1px solid #ccc;
box-sizing: border-box;
}
.black {
background-color: black;
border-radius: 50%;
}
.white {
background-color: white;
border-radius: 50%;
}
#status {
margin-top: 10px;
font-size: 18px;
}
</style>
</head>
<body>
<div id="game-board"></div>
<div id="status">轮到玩家1落子</div>
<script>
// 获取HTML中id为game-board的元素，即棋盘
const gameBoard = document.getElementById('game-board');
// 获取HTML中id为status的元素，用于显示游戏状态
const status = document.getElementById('status');
// 当前玩家，初始为黑色棋子玩家
let currentPlayer = 'black';
// 创建一个15x15的二维数组来表示棋盘，初始值都为null
let board = Array.from({ length: 15 }, () => Array(15).fill(null));
// 给棋盘添加点击事件监听器
gameBoard.addEventListener('click', function (e) {
// 获取点击的目标元素
const target = e.target;
// 如果点击的是一个div元素，并且该元素没有黑色或白色棋子的类名
if (target.tagName === 'DIV' &&!target.classList.contains('black') &&!target.classList.contains('white')) {
// 给点击的元素添加当前玩家对应的类名（black或white），以显示棋子
target.classList.add(currentPlayer);
// 获取点击元素的data - row属性值，并转换为整数，得到行号
const row = parseInt(target.dataset.row);
// 获取点击元素的data - col属性值，并转换为整数，得到列号
const col = parseInt(target.dataset.col);
// 在棋盘数组中对应的位置记录当前玩家的棋子
board[row][col] = currentPlayer;
// 检查当前玩家是否获胜
if (checkWin(currentPlayer)) {
// 如果获胜，更新游戏状态显示，显示获胜玩家
status.textContent = `玩家 ${currentPlayer === 'black'? '1' : '2'} 获胜！`;
// 禁用棋盘的点击事件，游戏结束
gameBoard.style.pointerEvents = 'none';
}
// 检查是否平局
else if (isDraw()) {
// 如果平局，更新游戏状态显示
status.textContent = '平局！';
// 禁用棋盘的点击事件，游戏结束
gameBoard.style.pointerEvents = 'none';
}
// 如果既没有获胜也没有平局
else {
// 切换当前玩家
currentPlayer = currentPlayer === 'black'? 'white' : 'black';
// 更新游戏状态显示，提示轮到哪个玩家落子
status.textContent = `轮到玩家 ${currentPlayer === 'black'? '1' : '2'} 落子`;
}
}
});
// 检查某个玩家是否获胜的函数
function checkWin(player) {
// 检查行
for (let i = 0; i < 15; i++) {
for (let j = 0; j <= 11; j++) {
// 遍历每一行，检查是否有连续5个相同颜色的棋子
if (board[i][j] === player && board[i][j + 1] === player && board[i][j + 2] === player && board[i][j + 3] === player && board[i][j + 4] === player) {
return true;
}
}
}
// 检查列
for (let j = 0; j < 15; j++) {
for (let i = 0; i <= 11; i++) {
// 遍历每一列，检查是否有连续5个相同颜色的棋子
if (board[i][j] === player && board[i + 1][j] === player && board[i + 2][j] === player && board[i + 3][j] === player && board[i + 4][j] === player) {
return true;
}
}
}
// 检查正对角线
for (let i = 0; i <= 11; i++) {
for (let j = 0; j <= 11; j++) {
// 遍历正对角线，检查是否有连续5个相同颜色的棋子
if (board[i][j] === player && board[i + 1][j + 1] === player && board[i + 2][j + 2] === player && board[i + 3][j + 3] === player && board[i + 4][j + 4] === player) {
return true;
}
}
}
// 检查反对角线
for (let i = 0; i <= 11; i++) {
for (let j = 4; j < 15; j++) {
// 遍历反对角线，检查是否有连续5个相同颜色的棋子
if (board[i][j] === player && board[i + 1][j - 1] === player && board[i + 2][j - 2] === player && board[i + 3][j - 3] === player && board[i + 4][j - 4] === player) {
return true;
}
}
}
// 如果没有找到连续5个相同颜色的棋子，返回false
return false;
}
// 检查是否平局的函数
function isDraw() {
for (let i = 0; i < 15; i++) {
for (let j = 0; j < 15; j++) {
// 遍历整个棋盘
if (board[i][j] === null) {
// 如果有任何一个位置为空，说明还没有平局
return false;
}
}
}
// 如果整个棋盘都没有空位置，说明平局
return true;
}
// 初始化棋盘
for (let i = 0; i < 15; i++) {
for (let j = 0; j < 15; j++) {
// 创建一个新的div元素，代表棋盘上的一个小方格
const cell = document.createElement('div');
// 给div元素添加data - row属性，值为当前行号
cell.dataset.row = i;
// 给div元素添加data - col属性，值为当前列号
cell.dataset.col = j;
// 将这个div元素添加到棋盘上
gameBoard.appendChild(cell);
}
}
</script>
</body>
</html>
通过以上步骤，我们成功地使用HTML、JavaScript和CSS创建了一个简单的五子棋小游戏。你可以根据自己的需求对游戏进行扩展和优化。
热门推荐
劳务合同中的保密义务与争议解决
钱钟书翻译理论中对于化境的理解与分析
如何通过更智能的维护解决工单积压问题
通过血液如何判断白血病
民勤蜜瓜：沙漠绿洲的“甜蜜密码”
旅居新加坡的侨领陈嘉庚、印度尼西亚华人领袖萧玉灿、在中国支持抗日的萧玉美
瞄准“1+2+X”产业赛道！嘉兴高新区“高”“新”发展底色更加鲜明
什么是共振？共振在不同领域的表现形式有哪些？
别让愤怒情绪左右了自己
愤怒的代价：几分钟愤怒如何损害血管健康
末端回肠炎是怎么回事
每天应该喝多少水？八杯不再是铁律
在会议中发言的顺序和时长有哪些职场礼仪要求
骨折后肿胀多久才能全消
骨折后肿胀多久才能全消
假如你在光速飞船上奔跑，是否超光速了？
王昭君嫁到匈奴后，过着怎样的生活？
怎样合理控制踩油门的力度？控制油门力度对车辆行驶有何影响？
怎样实现高转速起步？高转速起步需要注意哪些方面？
成都6个好玩又免费的景点，交通方便，足够你玩几天了
AI时代下12大岗位机会
多肉植物浇水技巧是什么？多久浇一次水？
怀孕需要哪些支持？推荐哪些科学方法？
谁在背后，安排了宇宙的一切？爱因斯坦与杨振宁的怀疑或许是对的
给差评后被商家起诉，合理批评和诋毁的边界在哪？听听法官怎么说
租赁合同审查要点及汽车、仓库租赁合同范本
突破频谱共享技术瓶颈：单一运营商的认知无线电革新
脑卒中检查：CT与CTA的科学选择
英国六所红砖大学详解：历史、排名与优势专业
公务员与事业编：真的有高低之分吗？