【前段】开发五子棋小游戏全流程

使用前端技术开发五子棋小游戏

在这篇博文中,我们将详细介绍如何使用HTML、CSS和JavaScript开发一个简单的五子棋小游戏。我们将展示如何初始化棋盘、处理用户交互以及实现胜负判定。特别是,我们将着重介绍胜负判定的逻辑实现。
完整代码我放在了这里:github
在这里插入图片描述

项目结构

项目主要由两个文件组成:

  1. HTML文件:用于定义页面结构。
  2. JavaScript文件:负责游戏的逻辑和交互。

HTML结构

首先,我们创建一个简单的HTML文件,它定义了棋盘和基本样式。

<!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);border: 1px solid #000;}.cell {width: 40px;height: 40px;border: 1px solid #ccc;display: flex;align-items: center;justify-content: center;}</style>
</head>
<body><h1>五子棋小游戏</h1><div id="board"></div><script src="game.js"></script>
</body>
</html>

棋盘初始化

game.js 文件中,我们首先初始化棋盘和相关变量,然后生成棋盘界面并为每个单元格添加点击事件监听器。

const board = document.getElementById('board');
const size = 15;
let currentPlayer = 'black';// 初始化棋盘数组
const boardArray = Array(size).fill(null).map(() => Array(size).fill(null));// 初始化棋盘
for (let i = 0; i < size * size; i++) {const cell = document.createElement('div');cell.classList.add('cell');cell.dataset.index = i;board.appendChild(cell);
}// 监听点击事件
board.addEventListener('click', (event) => {const cell = event.target;if (cell.classList.contains('cell') && !cell.innerHTML) {const index = +cell.dataset.index;const x = index % size;const y = Math.floor(index / size);const disc = document.createElement('div');disc.style.width = '30px';disc.style.height = '30px';disc.style.borderRadius = '50%';disc.style.backgroundColor = currentPlayer;cell.appendChild(disc);// 更新棋盘状态boardArray[y][x] = currentPlayer;// 检查胜负if (checkWinner(boardArray, currentPlayer)) {alert(`${currentPlayer} wins!`);} else {// 切换玩家currentPlayer = currentPlayer === 'black' ? 'white' : 'black';}}
});

胜负判定

胜负判定逻辑是这个游戏的核心部分。我们需要检测棋盘上是否有五个连续的棋子。我们将从四个方向(水平、垂直、左上到右下、右上到左下)进行检查。

function checkWinner(boardArray, player) {const directions = [[1, 0], // 水平[0, 1], // 垂直[1, 1], // 左上到右下[1, -1] // 右上到左下];for (let y = 0; y < size; y++) {for (let x = 0; x < size; x++) {if (boardArray[y][x] === player) {for (let [dx, dy] of directions) {let count = 1;for (let step = 1; step < 5; step++) {const nx = x + dx * step;const ny = y + dy * step;if (nx >= 0 && nx < size &&ny >= 0 && ny < size &&boardArray[ny][nx] === player) {count++;} else {break;}}if (count === 5) {return true;}}}}}return false;
}

胜负判定逻辑解释

  1. 定义四个方向:我们定义了四个方向的增量 (dx, dy),分别对应水平、垂直、左上到右下和右上到左下。

  2. 遍历棋盘:在每个格子上,如果该格子是当前玩家的棋子,我们检查四个方向上是否有连续五个棋子。

  3. 检测五个连续的棋子:在每个方向上,我们使用一个 for 循环从1到4逐步增加步数 (step),计算新的坐标 (nx, ny),如果新坐标上的棋子和当前玩家相同,则增加计数器 count

  4. 返回胜利结果:如果在任何方向上计数器 count 达到5,则当前玩家胜利,函数返回 true,否则返回 false

总结

通过这篇博客,我们介绍了如何使用HTML、CSS和JavaScript开发一个简单的五子棋小游戏,重点介绍了棋盘初始化和点击事件处理,以及胜负判定的逻辑实现。希望这篇文章能帮助你更好地理解前端开发和算法的基础知识。享受编程的乐趣吧!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/13281.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

push to origin/master was rejected解决方案之一

如果你是git小白&#xff0c;并且其他帖子的方法都不行&#xff0c;可以一试 在你的远程库&#xff08;我这个是gitee&#xff09;设置中的邮箱设置里不勾这个选项 然后就没有然后了。

html标签属性解析

jar包 <dependency> <groupId>org.jsoup</groupId> <artifactId>jsoup</artifactId> <version>1.13.1</version> </dependency> 解析方法 private String parseOriginUrl(String tzurl) { if (StrUtil.isEmpty(tzurl)) { retu…

宣布推出 Search AI Lake 和 Elastic Cloud Serverless 以扩展低延迟搜索

作者&#xff1a;来自 Elastic Ken Exner 今天&#xff0c;我们很高兴地宣布 Search AI Lake 和 Elastic Cloud Serverless。 Search AI Lake 是一种针对实时应用程序进行优化的开创性云原生架构&#xff0c;它将扩展的存储容量与低延迟查询以及 Elasticsearch 强大的搜索和 AI…

26 | MQTT协议:如何支持海量的在线IoT设备?

MQTT 和其他消息队列的传输协议有什么不同&#xff1f; 从宏观上来说&#xff0c;MQTT 和其他消息队列采用的传输协议是差不多的。它采用的也是发布 - 订阅的消息模型。网络结构上&#xff0c;也是 C/S 架构&#xff0c;IoT 设备是客户端&#xff0c;Broker 是服务端&#xff…

视频监控平台智能边缘分析一体机视频存储平台打手机检测算法

智能边缘分析一体机的打手机检测算法是一种集成了先进图像处理、计算机视觉和人工智能技术的解决方案&#xff0c;专门用于实时监测和识别监控场景中的打手机行为。 在提到“打手机检测算法”时&#xff0c;可能是指一种能够识别和检测使用手机行为的算法。这种算法可以应用于多…

winform,子线程里messagebox如何模态阻止ui线程

在WinForms中&#xff0c;如果你想在子线程中显示一个MessageBox并阻止UI线程&#xff0c;可以使用Invoke或BeginInvoke方法来确保MessageBox是在UI线程上显示的。这是因为WinForms控件不是线程安全的&#xff0c;所有的UI操作都应该在UI线程上进行。 以下是一个示例代码&…

力扣HOT100 - 300. 最长递增子序列

解题思路&#xff1a; 动态规划 class Solution {public int lengthOfLIS(int[] nums) {if (nums.length 0) return 0;int[] dp new int[nums.length];int max 0;Arrays.fill(dp, 1);for (int i 0; i < nums.length; i) {for (int j 0; j < i; j) {if (nums[j] <…

文字生成数字员工!实在AI Agent化身“六边形战士”落地千行百业

2023年8月&#xff0c;实在智能在全行业首发“一句话生成数字员工”的实在AI Agent智能体产品&#xff0c;即实在Agent智能体&#xff0c;也是TARS-RPA Agent智能体数字员工&#xff0c;其同时具备LLM大模型的对话式交互能力和RPA的流程自动化能力&#xff0c;有“大脑”&#…

C# .Net8 switch 的用法

在 .net 8中&#xff0c;switch 不需要再和传统的写法一样了&#xff0c;会更加的方便 创建一个 .net 8 控制台项目 switch 的写法没必要和以前一样 namespace SwitchTest {internal class Program{static void Main(string[] args){int day 3;var week day switch{1 > &…

Go语言不再难!跟随ChatGPT轻松攻克编程难关

开发人员&#xff08;包括我在内&#xff09;通常偏好边学习边实践的方式。这不仅仅是我与LLM协作的核心准则之一&#xff0c;也是最关键的准则&#xff1a;因为你是在任务导向的学习过程中积累知识&#xff0c;这种学习方式不是预先的——它基于实时的、可感知的情境。 当资深…

安防监控视频平台EasyNVR级联视频上云系统EasyNVS出现“Login error”报错

EasyNVR安防视频云平台是旭帆科技TSINGSEE青犀旗下支持RTSP/Onvif协议接入的安防监控流媒体视频云平台。平台具备视频实时监控直播、云端录像、云存储、录像检索与回看、告警等视频能力&#xff0c;能对接入的视频流进行处理与多端分发&#xff0c;包括RTSP、RTMP、HTTP-FLV、W…

##21 深入理解文本处理:使用PyTorch进行NLP基础操作

文章目录 前言简介文本预处理实现分词构建词汇表 文本向量化构建简单的文本分类模型结论 前言 在现代深度学习应用中&#xff0c;文本处理是不可或缺的一部分&#xff0c;尤其在自然语言处理&#xff08;NLP&#xff09;领域。借助强大的框架如PyTorch&#xff0c;我们可以更加…

一篇文章搞懂退火算法

退火算法,全称为模拟退火算法(Simulated Annealing,SA),是一种通用概率算法,用来在给定一个大的搜寻空间内找寻问题的近似最优解。模拟退火算法灵感来源于固体物理学中的退火过程,这一过程中,物质被加热后再缓慢冷却,原子会在加热过程中获得较大的运动能量,随着温度的…

KIOXIA CD8P-R 1.92TB SSD KCD81PUG1T92数据中心读密集型

KIOXIA全新推出的CD8P-R系列数据中心级读密集型SSD - KCD81PUG1T92型号。这款SSD不仅在性能和可靠性方面表现出色,还能为您的数据中心应用带来前所未有的体验。 首先,让我们一起来看看KCD81PUG1T92的关键亮点: 超高性能: KCD81PUG1T92采用PCIe 5.0和NVMe 2.0规范,最高可提供…

JSpdf,前端下载大量表格数据pdf文件,不创建dom

数据量太大使用dom》canvas》image》pdf.addimage方法弊端是canvas超出 浏览器承受像素会图片损害&#xff0c;只能将其切割转成小块的canvas,每一次调用html2canvas等待时间都很长累积时间更长&#xff0c;虽然最终可以做到抽取最小dom节点转canvas拼接数据&#xff0c;但是死…

Linux基础之进程的优先级

目录 一、进程优先级的概念 二、进程优先级的查看 三、怎么修改进程优先级 四、进程饥饿 一、进程优先级的概念 cpu资源分配的先后顺序&#xff0c;就是指进程的优先权&#xff08;priority&#xff09;。优先权高的进程有优先执行权利。配置进程优先权对多任务环境的linu…

Redis教程(三):Redis的五种基本数据类型

String&#xff08;字符串&#xff09; 字符串 String 是 Redis 最简单的数据结构&#xff0c;可以存储字符串、整数或者浮点数&#xff0c;常用于存储对象。 List&#xff08;列表&#xff09; 列表List相当于 Java 语言里面的 LinkedList&#xff0c;插入性能高&#xff0…

特征衍生-多变量交叉组合特征衍生

https://www.bilibili.com/video/BV1Kg411n7jv?p21&vd_source08e23da22e328e8950aeb24d2001d586

【LeetCode】每日一题:1953.你可以工作的最大周数

给你 n 个项目&#xff0c;编号从 0 到 n - 1 。同时给你一个整数数组 milestones &#xff0c;其中每个 milestones[i] 表示第 i 个项目中的阶段任务数量。 你可以按下面两个规则参与项目中的工作&#xff1a; 每周&#xff0c;你将会完成 某一个 项目中的 恰好一个 阶段任务。…

用ffmpeg和EasyDARWIN实现推流

步骤&#xff1a; 1.配置easydarwin-ini里面的端口&#xff0c;打开easydarwin.exe 查看端口号是否成功&#xff0c;若不成功&#xff0c;则需要修改 2.在web网页打开 http://localhost:10008/ 看是否成功 3.用ffmpeg打开视频 ffmpeg.exe -re -i C:/22/Rec_20200903.mp4 -v…