前端技术搭建五子棋游戏（内含源码）
The sand accumulates to form a pagoda
- ✨ 写在前面
- ✨ 功能介绍
- ✨ 页面搭建
- ✨ 样式设置
- ✨ 逻辑部分
✨ 写在前面
上周我们实通过前端基础实现了拼图游戏，今天还是继续按照我们原定的节奏来带领大家完成一个五子棋游戏，功能也比较简单简单，也是想借助这样一个简单的功能，然后来帮助大家了解我们JavaScript在前端中的作用， 在前面的文章当中我们也提及到我们在本系列的专栏是循序渐进从简单到复杂的过程，这份专栏中我们会带领大家用前端实现翻卡片、飞机大战、弹珠游戏、贪吃蛇、井字游戏、拼图、连连看、扫雷等等有趣的小游戏，纯前端语言实现，都会陆续带给大家。欢迎大家订阅我们这份前端小游戏的专栏。订阅链接：https://blog.csdn.net/jhxl_/category_12261013.html
✨ 功能介绍
五子棋是一种古老而受欢迎的策略棋类游戏，它的目标是在棋盘上先形成连续的五个棋子（横向、纵向或对角线），以赢得比赛。这款游戏简单易学，同时也有很高的策略性和竞争性，因此深受广大玩家喜爱。
游戏棋盘：五子棋的棋盘是一个15x15的方格网格，共有225个交叉点。玩家可以在这些交叉点上放置自己的棋子。
游戏目标：玩家需要先于对手在棋盘上形成连续的五个棋子（横向、纵向或对角线），以获得胜利。
游戏流程：玩家与电脑（或其他玩家）轮流进行下棋，玩家先手。玩家可以通过点击棋盘上的交叉点来放置自己的棋子。电脑（或其他玩家）也会在空闲的交叉点上进行自己的下棋操作。每一步棋之后，都会检查是否有玩家获胜或者游戏结束。
获胜条件：如果玩家在横向、纵向或对角线上形成连续的五个棋子（即五子连珠），即可获得胜利。如果棋盘填满且没有玩家获胜，则宣布游戏为平局。
再来一局：在游戏结束后，玩家可以选择重新开始一局，棋盘会被清空，双方重新开始对决。
通过上述规则，你可以实现一个简单的玩家对电脑的五子棋游戏。你可以根据自己的喜好和需求进一步扩展和定制游戏功能，例如添加游戏设置、优化电脑的下棋策略等。祝你玩得愉快！
✨ 页面搭建
创建文件
首先呢我们创建我们的HTML文件，这里我就直接命名为 五子棋.html 了，大家可以随意命名， 文件创建生成后我们通过编辑器打开，这里我用的是VScode， 然后初始化我们的代码结构，那在这里告诉大家一个快捷键，就是我们敲上我们英文的一个 ! 我们敲击回车直接就会给我们生成基础版本的前端代码结构。
文档声明和编码设置： 在HTML文档的头部，使用<!DOCTYPE>声明HTML文档类型，确保浏览器以正确的方式渲染网页内容。同时，设置UTF-8编码，以确保浏览器能够正确地解析和显示中文字符。下面我就开始搭建我们的DOM结构了！
DOM结构搭建
<body><div class="board"></div><div class="message"></div><button class="reset-button">重新开始</button>
</body>
<body>：页面的主体元素。<div class="board">：一个具有board类的<div>元素，用于承载五子棋的棋盘。<div class="message">：一个具有message类的<div>元素，用于显示游戏中的消息或提示。<button class="reset-button">重新开始</button>：一个具有reset-button类的<button>元素，用于重新开始游戏。
这段代码描述了一个五子棋游戏的基本页面结构，其中棋盘、消息和重新开始按钮是游戏的主要组成部分。
✨ 样式设置
我们看到了上面的的DOM已经搭建好了，但是页面什么都看不出来，下面我们简单的来配置一下样式吧，其实我们本专栏也是想带领大家掌握一些逻辑所以样式方面我们就一切从简；
.board：棋盘容器的样式规则，使用网格布局，设置背景颜色和间距。.cell：每个棋盘格子的样式规则，设置背景颜色和边框。.cell:hover：鼠标悬停在格子上时的样式规则，设置背景颜色。.piece：棋子的样式规则，设置宽度、高度、边框半径和间距。.black-piece：黑色棋子的样式规则，设置背景颜色。.white-piece：白色棋子的样式规则，设置背景颜色。.message：消息文本的样式规则，设置字体粗细。.reset-button：重新开始按钮的样式规则，设置上方间距。
这些样式规则通过类名的方式应用到HTML元素上，从而实现了五子棋游戏界面的样式效果。
<style>.board {display: grid;grid-template-columns: repeat(15, 40px);grid-template-rows: repeat(15, 40px);gap: 1px;background-color: #aaa;margin-bottom: 20px;}.cell {background-color: #eee;border: 1px solid #ccc;}.cell:hover {background-color: #ddd;}.piece {width: 36px;height: 36px;border-radius: 50%;margin: 2px;}.black-piece {background-color: #000;}.white-piece {background-color: #fff;}.message {font-weight: bold;}.reset-button {margin-top: 10px;}
</style>
✨ 逻辑部分
上面我们搭建了基本的样式，下面呢我们就通过js代码，实现我们游戏的功能吧，下面是对代码的简化解释：
createBoard()：创建棋盘函数，用于动态生成一个15x15的棋盘，并为每个格子添加事件监听器。handleCellClick(event)：处理格子点击事件函数，根据当前游戏状态和点击的格子位置判断是否可以下子，并进行相应的处理。placePiece(row, col, player)：下子函数，根据给定的行、列和玩家类型，在指定的格子位置放置对应颜色的棋子，并更新棋盘状态。switchPlayer()：切换玩家函数，用于在玩家下子后切换到另一个玩家。checkWin(row, col)：检查胜利函数，根据当前下子的位置检查是否达到五子连珠的胜利条件。checkDirection(row, col, dx, dy, player)：检查方向函数，根据指定的方向，在当前位置的左右两侧检查是否有连续的同色棋子。isValidPosition(row, col)：验证位置有效性函数，用于判断指定的行和列是否在合法的范围内。makeComputerMove()：电脑下子函数，随机生成电脑下子的位置，并执行下子操作。endGame(winner)：结束游戏函数，当游戏达到胜利条件时，设置游戏结束标志，并显示胜利信息。resetGame()：重新开始游戏函数，用于重置游戏状态，清空棋盘，重新创建棋盘。resetButton.addEventListener('click', resetGame)：绑定重新开始按钮的点击事件监听器。createBoard()：在页面加载完成后，执行创建棋盘的函数，初始化游戏。
以上是对给定的JavaScript代码中各个方法的大概作用进行的简要讲解。每个方法都承担着不同的功能，通过它们的协作实现了一个基本的人机对决的五子棋游戏。
完整代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>几何⚡️前端小游戏⚡️五子棋</title><style>.board {display: grid;grid-template-columns: repeat(15, 40px);grid-template-rows: repeat(15, 40px);gap: 1px;background-color: #aaa;margin-bottom: 20px;}.cell {background-color: #eee;border: 1px solid #ccc;}.cell:hover {background-color: #ddd;}.piece {width: 36px;height: 36px;border-radius: 50%;margin: 2px;}.black-piece {background-color: #000;}.white-piece {background-color: #fff;}.message {font-weight: bold;}.reset-button {margin-top: 10px;}</style>
</head><body><div class="board"></div><div class="message"></div><button class="reset-button">重新开始</button>
</body><script>document.addEventListener('DOMContentLoaded', () => {const board = document.querySelector('.board');const message = document.querySelector('.message');const resetButton = document.querySelector('.reset-button');const PlayerType = {PLAYER: 'player',COMPUTER: 'computer',};let currentPlayer = PlayerType.PLAYER;let isGameOver = false;let boardState = [];function createBoard() {board.innerHTML = '';for (let row = 0; row < 15; row++) {boardState[row] = [];for (let col = 0; col < 15; col++) {const cell = document.createElement('div');cell.classList.add('cell');cell.dataset.row = row;cell.dataset.col = col;cell.addEventListener('click', handleCellClick);board.appendChild(cell);boardState[row][col] = '';}}}function handleCellClick(event) {if (isGameOver) {return;}const cell = event.target;const row = parseInt(cell.dataset.row);const col = parseInt(cell.dataset.col);if (boardState[row][col] !== '') {return;}placePiece(row, col, currentPlayer);if (checkWin(row, col)) {endGame(currentPlayer);return;}switchPlayer();if (currentPlayer === PlayerType.COMPUTER && !isGameOver) {makeComputerMove();}}function placePiece(row, col, player) {const piece = document.createElement('div');piece.classList.add('piece');piece.classList.add(player === PlayerType.PLAYER ? 'black-piece' : 'white-piece');const cell = document.querySelector(`.cell[data-row="${row}"][data-col="${col}"]`);cell.appendChild(piece);boardState[row][col] = player;}function switchPlayer() {currentPlayer = currentPlayer === PlayerType.PLAYER ? PlayerType.COMPUTER : PlayerType.PLAYER;}function checkWin(row, col) {const directions = [[1, 0],[0, 1],[1, 1],[1, -1]];const player = boardState[row][col];for (const direction of directions) {const [dx, dy] = direction;let count = 1;// Check for consecutive pieces in both directionscount += checkDirection(row, col, dx, dy, player);count += checkDirection(row, col, -dx, -dy, player);if (count >= 5) {return true;}}return false;}function checkDirection(row, col, dx, dy, player) {let count = 0;let newRow = row + dx;let newCol = col + dy;while (isValidPosition(newRow, newCol) && boardState[newRow][newCol] === player) {count++;newRow += dx;newCol += dy;}return count;}function isValidPosition(row, col) {return row >= 0 && row < 15 && col >= 0 && col < 15;}function makeComputerMove() {// Generate a random move for the computerlet row, col;do {row = Math.floor(Math.random() * 15);col = Math.floor(Math.random() * 15);} while (boardState[row][col] !== '');placePiece(row, col, currentPlayer);if (checkWin(row, col)) {endGame(currentPlayer);return;}switchPlayer();}function endGame(winner) {isGameOver = true;message.textContent = winner === PlayerType.PLAYER ? 'You win!' : 'Computer wins!';}function resetGame() {currentPlayer = PlayerType.PLAYER;isGameOver = false;boardState = [];message.textContent = '';createBoard();}resetButton.addEventListener('click', resetGame);createBoard();});
</script></html>
几何送书七十二期
参与方式：本博客中进行评论即可，只要评论内容不被折叠都可以参与抽奖；
抽奖方式：程序自动拉取未折叠的评论随机抽取5位伙伴，每人最多可评论5次；
抽奖时间：2023-07-07 17:00
本期获奖者各送实体书《Python从入门到精通》一本（包邮到家）
✨ 原创不易，还希望各位大佬支持一下 \textcolor{blue}{原创不易，还希望各位大佬支持一下} 原创不易，还希望各位大佬支持一下
前端技术搭建五子棋游戏（内含源码）相关推荐
- 前端技术搭建俄罗斯方块（内含源码）
The sand accumulates to form a pagoda ✨ 写在前面 ✨ 功能介绍 ✨ 页面搭建 ✨ 样式设置 ✨ 逻辑部分 ✨ 写在前面 上周我们实通过前端基础实现了扫雷游戏,今 ...
- 用python来做一个五子棋游戏，源码分享~
五子棋的规则大家肯定都了解,也是大家在百忙之中娱乐的一部分,也都在网上玩过五子棋的游戏,那么大家有没有想过自己编写一个五子棋游戏呢.很多人都感觉做"游戏"这个词汇听着就很难,不知道 ...
- 用python做五子棋游戏_用python来做一个五子棋游戏，源码分享~
五子棋的规则大家肯定都了解,也是大家在百忙之中娱乐的一部分,也都在网上玩过五子棋的游戏,那么大家有没有想过自己编写一个五子棋游戏呢.很多人都感觉做"游戏"这个词汇听着就很难,不知道 ...
- （微信小程序）微信小程序-毕设级项目搭建-微信阅读小程序（内含源码，微信小程序+java逻辑后台+vue管理系统）~不求完美，实现就好
转载地址:(微信小程序)微信小程序-毕设级项目搭建-微信阅读小程序(内含源码,微信小程序+java逻辑后台+vue管理系统)~不求完美,实现就好 转载请注明出处 作者:Happy王子乐 个人网站(整理 ...
- 微信读书登陆界面java_（JAVA后端）微信小程序-毕设级项目搭建-微信阅读小程序（内含源码，微信小程序+java逻辑后台+vue管理系统）~不求完美，实现就好...
转载地址:(JAVA后端)微信小程序-毕设级项目搭建-微信阅读小程序(内含源码,微信小程序+java逻辑后台+vue管理系统)~不求完美,实现就好 转载请注明出处 一.环境搭建 相关环境软件:JDK1 ...
- 响应式瀑布流布局新闻资讯技术博客织梦模板/DedeCMS自适应手机版游戏新闻网站源码下载
响应式瀑布流布局新闻资讯技术博客织梦模板,DedeCMS自适应手机版游戏新闻网站源码下载.本套织梦模板采用织梦最新内核开发的模板,这款模板使用范围广,不仅仅局限于一类型的企业,游戏新闻.游戏博客类的网 ...
- netty 游戏服务器 项目,netty游戏服务器源码
netty游戏服务器源码 内容精选 换一换 简要介绍KBEngine是一款开源的游戏服务端引擎,使用简单的约定协议就能够使客户端与服务端进行交互, 使用KBEngine插件能够快速与(Unity3D. ...
- 计算机毕业设计Java藏宝阁游戏交易系统(源码+系统+mysql数据库+lw文档)
计算机毕业设计Java藏宝阁游戏交易系统(源码+系统+mysql数据库+lw文档) 计算机毕业设计Java藏宝阁游戏交易系统(源码+系统+mysql数据库+lw文档) 本源码技术栈: 项目架构:B/S ...
- lua文件服务器,lua游戏服务器源码
lua游戏服务器源码 内容精选 换一换 简要介绍Lua是一种轻量小巧的脚本语言,用标准C语言编写并以源代码形式开放, 其设计目的是为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能.语言:C一 ...
最新文章
- LeetCode 801. 使序列递增的最小交换次数（动态规划）
- 致力语言资源建设、常识推理的自然语言处理螺丝钉
- 【数据结构笔记41】散列表/哈希表的性能分享
- Atitit 提升记忆的稳定性防止遗忘 目录 1. 存储稳定性（记忆牢固性），需要多处存储，提升稳定性 1 2. 方法分类原则 2 2.1. 常复习 2 2.2. 复习方法多样化 利用多种感官 2
- ssh框架原理及工作流程
- 职高计算机基础知识大全,职高计算机基本教学大纲.doc
- 2020-09-20
- 7-4 华氏度转摄氏度 (5分) java
- 华为西安工业大学鸿蒙,培养百位将领、19位院士，这所211大学被誉为“华为人的母校”...
- div+css三栏式布局
- iis服务器响应缓慢,IIS网站加载缓慢怎么办？如何处理？
- ngrok使用/踩坑分析-http代理
- RFM分析模型——用户生命周期解析
- 虚拟机ipv4和6都没访问权限_ipv4和ipv6无网络访问权限 win10
- 【前端荣耀】开篇：晋级赛就是赢不了
- @ConfigrationProperties + @EnableConfigrationProperties
- 西门子S7-1500PLC大型程序，各种FB块PTO控制20多个轴
- S型步进电机加减速运动（STM32）
- Windows 7中如何安装卸载IE11或重装IE10
- 张宇1000题高等数学 第十四章 二重积分
热门文章