五子棋小游戏
创作时间:
作者:
@小白创作中心
五子棋小游戏
引用
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创建了一个简单的五子棋小游戏。你可以根据自己的需求对游戏进行扩展和优化。如果对代码还有其他疑问，或者想进一步优化功能，欢迎随时交流。
热门推荐
场景记忆法，特别适合职场人！
民间说的几厘利息是百分之几？
乏燃料再利用经济效益
提升车动力的方法有哪些？这些方法的效果如何评估？
怎样洗车才能有效保护车漆？保护车漆的洗车方法有哪些注意事项？
AI多实例分割技术的应用篇
如果学校有校企合作公司，学生能自主实习吗
公司总资产是什么构成？了解公司总资产对企业分析有何意义？
文艺复兴的实质是什么？文艺复兴的核心思想
七龙珠"角色深度解析：悟空与贝吉塔的实力较量
无锡自驾去成都：合理中途休息点、路线规划、所需时间及沿途景点一览
如何进行资产多元化投资
个税App全面解析：全年一次性奖金收入税务处理
男性增强CT后多久可以备孕
普洱茶与普通茶叶的区别及全面解析：从制作工艺到品鉴方法
幽门螺杆菌根除与胃癌防控有关吗
每天1个鸡蛋早晚吃出事？10个关于吃鸡蛋的问题，建议都搞搞清楚。
深蓝汽车连续两年销量未及预期，邓承浩2025年50万辆目标恐难实现
树脂补牙当天能刷牙吗？附上几个补牙后需要注意的事项快收藏！
市场分析方法有哪些？
带草字头寓意好的字女孩
棚户区改造助力城市更新与居民幸福生活
鬼灭之刃：半天狗七上月四形态综合指南
高性能富锂锰基正极材料改性研究
如何集成化管理API,方便企业内外部调用？
最大摄氧量和跑力指数揭示你的跑步潜力
计算机类就业率高的专业有哪些？
旅行摄影必备：揭晓最佳万能镜头推荐清单
购房合同审查要点及违约金规定详解
美联储如何在利率走廊内调整联邦基金利率？