五子棋小游戏
创作时间:
作者:
@小白创作中心
五子棋小游戏
引用
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创建了一个简单的五子棋小游戏。你可以根据自己的需求对游戏进行扩展和优化。如果对代码还有其他疑问，或者想进一步优化功能，欢迎随时交流。
热门推荐
为什么说拍摄人像的黄金焦段是85mm-135mm而不是50mm
尿毒症患者的营养补充之道
计算机网络：一文带大家轻松了解TCP/IP协议
22位艺术家的“海”作品在西海美术馆展出
藩王之乱：封建王朝的顽疾与历史教训
大模型终端部署新趋势：硬件直接支持混合矩阵乘法
金发晶真假辨别与价值评估指南
狗狗驱虫的重要性及正确方法（宠物狗的健康需要持续的驱虫保护）
盐吃太多伤全身，记住5个实用的减盐方法！
“Hard”造句：探索语言的魅力，让表达更生动
鸡胸肉的二十种做法
不伤肝肾的降血压药是什么
如何使用API获取数据：从入门到实战
半导体突然爆发，十逾股涨停！券商：行业不再是AI和存储的“双人舞”
肉桂的好处你知道多少？
哪些企业已经成功应用了工业数字孪生技术？
工业数字孪生：智能制造的新引擎
土命与水命是否相配，土命和什么水最配？
如何在金融投资中降低风险并保障资产安全？
如何带领团队提高收益
智趣纷“乘” 玩转数学 | 滨河小学二年级趣味玩转乘法口诀
如何团队协作带动士气
OMS自提订单流程解析：提升用户体验与运营效率
OMS自提订单流程解析：提升用户体验与运营效率
SharePoint文档库和OneDrive版本历史记录限制详解
“七天无理由退货”真能无理由吗？
高韧性材料解析：HAP10粉末冶金高速钢
产权和使用权有什么区别
房屋产权和使用权的区别及续期规定
《雪中悍刀行》：承上启下，为类型文寻找新表达