五子棋html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>五子棋游戏</title>
<style>body {display: flex;flex-direction: column;align-items: center;background: #f0d9b5;font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;margin: 0;padding: 20px;}h1 {margin-bottom: 10px;}#board {display: grid;grid-template-columns: repeat(15, 30px);grid-template-rows: repeat(15, 30px);gap: 1px;background-color: #333;border: 2px solid #333;}.cell {width: 30px;height: 30px;background-color: #f0d9b5;border-radius: 3px;cursor: pointer;position: relative;}.cell:hover {background-color: #e0cfa3;}.stone {position: absolute;top: 50%;left: 50%;width: 24px;height: 24px;border-radius: 50%;transform: translate(-50%, -50%);}.black {background-color: black;}.white {background-color: white;border: 1px solid black;}#scoreboard {margin-top: 20px;font-size: 18px;}#resetBtn {margin-top: 15px;padding: 8px 16px;font-size: 16px;cursor: pointer;}
</style>
</head>
<body><h1>五子棋游戏</h1><div id="board"></div><div id="scoreboard">黑方胜利次数: <span id="blackWins">0</span> 白方胜利次数: <span id="whiteWins">0</span></div><button id="resetBtn">重新开始</button><script>const boardSize = 15;const board = document.getElementById('board');const blackWinsSpan = document.getElementById('blackWins');const whiteWinsSpan = document.getElementById('whiteWins');const resetBtn = document.getElementById('resetBtn');let currentPlayer = 'black';let boardState = Array(boardSize).fill(null).map(() => Array(boardSize).fill(null));let blackWins = 0;let whiteWins = 0;let gameOver = false;function createBoard() {board.innerHTML = '';for (let row = 0; row < boardSize; row++) {for (let col = 0; col < boardSize; col++) {const cell = document.createElement('div');cell.classList.add('cell');cell.dataset.row = row;cell.dataset.col = col;cell.addEventListener('click', onCellClick);board.appendChild(cell);}}}function onCellClick(e) {if (gameOver) return;const row = parseInt(e.target.dataset.row);const col = parseInt(e.target.dataset.col);if (boardState[row][col] !== null) return;boardState[row][col] = currentPlayer;const stone = document.createElement('div');stone.classList.add('stone', currentPlayer);e.target.appendChild(stone);if (checkWin(row, col, currentPlayer)) {gameOver = true;if (currentPlayer === 'black') {blackWins++;blackWinsSpan.textContent = blackWins;setTimeout(() => alert('黑方获胜！'), 0);} else {whiteWins++;whiteWinsSpan.textContent = whiteWins;setTimeout(() => alert('白方获胜！'), 0);}return;}currentPlayer = currentPlayer === 'black' ? 'white' : 'black';}function checkWin(row, col, player) {return (checkDirection(row, col, player, 1, 0) || // 横向checkDirection(row, col, player, 0, 1) || // 纵向checkDirection(row, col, player, 1, 1) || // 斜向 \checkDirection(row, col, player, 1, -1) // 斜向 /);}function checkDirection(row, col, player, deltaRow, deltaCol) {let count = 1;// 向一个方向计数let r = row + deltaRow;let c = col + deltaCol;while (r >= 0 && r < boardSize && c >= 0 && c < boardSize && boardState[r][c] === player) {count++;r += deltaRow;c += deltaCol;}// 向相反方向计数r = row - deltaRow;c = col - deltaCol;while (r >= 0 && r < boardSize && c >= 0 && c < boardSize && boardState[r][c] === player) {count++;r -= deltaRow;c -= deltaCol;}return count >= 5;}resetBtn.addEventListener('click', () => {gameOver = false;boardState = Array(boardSize).fill(null).map(() => Array(boardSize).fill(null));currentPlayer = 'black';createBoard();});createBoard();</script>
</body>
</html>
相关文章：
五子棋html
<!DOCTYPE html> <html lang"zh-CN"> <head> <meta charset"UTF-8" /> <meta name"viewport" content"widthdevice-width, initial-scale1" /> <title>五子棋游戏</title> <style>bo…...
分布式-基于数据库排他锁
原理： 除了可以通过增删操作数据表中的记录以外，其实还可以借助数据库中自带的锁来实现分布式的锁。 我们还用刚刚创建的那张数据库表。可以通过数据库的排他锁来实现分布式锁。 基于MySql的InnoDB引 擎，可以使用以下方法来实现加锁操作&…...
docker host模式问题
为什么乌班图得docker 我装什么都必须要host 而-p映射不管用 在 Ubuntu 上使用 Docker 时，如果你发现只有 --network host 模式能正常工作，而端口映射（-p）不管用，可能有以下几种原因： 1. Docker 网络模式…...
分布式-Redis分布式锁
Redis实现分布式锁优点 （1）Redis有很高的性能； （2）Redis命令对此支持较好，实现起来比较方便 实现思路 （1）获取锁的时候，使用setnx加锁，并使用expire命令为锁…...
【Python爬虫电商数据采集+数据分析】采集电商平台数据信息，并做可视化演示
前言 随着电商平台的兴起，越来越多的人开始在网上购物。而对于电商平台来说，商品信息、价格、评论等数据是非常重要的。因此，抓取电商平台的商品信息、价格、评论等数据成为了一项非常有价值的工作。本文将介绍如何使用Python编写爬虫程序&a…...
大数据应用开发和项目实战-电商双11美妆数据分析2
数据可视化 使用seaborn库绘制复杂图表，展示各品牌和品类的销售情况。 绘制嵌套柱形图，分别按主类别和子类别进行对比。 通过饼图展示男士专用产品的销售偏好，发现男士主要关注清洁和补水类产品。 用seaborn包给出每个店铺各个大类以及各个…...
GSENSE2020BSI sCMOS科学级相机主要参数及应用场景
GSENSE2020BSI sCMOS科学级相机是一款面向宽光谱成像需求的高性能科学成像设备，结合了背照式（Back-Side Illuminated, BSI）CMOS技术与先进信号处理算法，适用于天文观测、生物医学成像、工业检测等领域。以下是其核心特点及技术细节…...
基于深度学习的交通标志识别系统
基于深度学习的交通标志识别系统 项目简介 本项目实现了一个基于深度学习的交通标志识别系统，使用卷积神经网络(CNN)对交通标志图像进行分类识别。系统包含数据预处理、模型训练与评估、结果可视化和用户交互界面等模块。 数据集 项目使用德国交通标志识别基准数…...
Golang的linux运行环境的安装与配置
很多新手在学go时，linux下的配置环境一头雾水，总结下，可供参考！ --------------------------------------Golang的运行环境的安装与配置-------------------------------------- 将压缩包放在/home/tools/下 解压 tar -zxvf g…...
时间序列数据集增强构造方案（时空网络建模）
时间序列数据集增强构造方案（时空网络建模） 时间序列数据集TimeSeriesDataset 时间序列数据集增强EnhancedTimeSeriesDataset 一、方案背景与动机 1.1 背景分析 传统时间序列预测方法（如ARIMA、Prophet等）以及很多深度学习方法…...
实验六 基于Python的数字图像压缩算法
一、实验目的 掌握图像压缩的必要性； 掌握常见的图像压缩标准； 掌握常见的图像压缩方法分类； 掌握常见的图像压缩方法原理与实现（包括哈夫曼编码、算术编码、行程编码方法等）； 了解我国音视…...
Vue 3 中的 nextTick 使用详解与实战案例
Vue 3 中的 nextTick 使用详解与实战案例 在 Vue 3 的日常开发中，我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时，nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法，并通过三个实战案例，展示…...
Docker + Watchtower 实现容器自动更新：高效运维的终极方案
文章目录 前言一、Watchtower 简介二、Watchtower 安装与基本使用1. 快速安装 Watchtower2. 监控特定容器 三、Watchtower 高级配置1. 设置检查间隔2. 配置更新策略3. 清理旧镜像4. 通知设置 四、生产环境最佳实践1. 使用标签控制更新2. 更新前执行健康检查3. 结合CI/CD流水线 …...
OpenCV 中用于背景分割（背景建模）的一个类cv::bgsegm::BackgroundSubtractorGSOC
操作系统：ubuntu22.04 OpenCV版本：OpenCV4.9 IDE:Visual Studio Code 编程语言：C11 算法描述 cv::bgsegm::BackgroundSubtractorGSOC 是 OpenCV 中用于背景分割（背景建模）的一个类，它是基于 GMMÿ…...
AI恶魔之眼使用说明书
AI恶魔之眼使用说明书 产品简介 1.1 产品介绍 AI恶魔之眼是一款具备动态视觉效果与仿生眼睛模拟功能的智能显示产品，可实现以下特性： 真实人眼模拟：支持虹膜样式变换、眨眼动画、瞳孔缩放等动态特效，仿真度高自定义内容上传&am…...
PBR材质-Unity/Blender/UE
目录 前言： 一、Unity： 二、Blender： 三、UE： 四、全家福： 五、后记： 前言： PBR流程作为表达物理效果的经典方式，很值得一学。纹理贴图使用的是上一期的Textures | cgbookcas…...
C++复习
线程库(类） 在C11之前，涉及到多线程问题，都是和平台相关的，比如Windows和Linux下各有自己的接口，这使得代码的可移植性比较差。C11中最重要的特性就是对线程进行了支持，使得C在并行编程时不需要依赖第三方…...
如何使用docker配置ros-noetic环境并使用rviz，gazebo
参考链接：【Ubuntu】Docker中配置ROS并可视化Rviz及Gazebo_docker ros-CSDN博客 前言： 其实这个东西是相当必要的，因为我们有时候需要在一台电脑上跑好几个项目，每个项目都有不同的依赖，这些依赖冲突搞得人头皮发麻&…...
计算机网络中相比于RIP，路由器动态路由协议OSPF有什么优势？
好的！以下是关于路由信息协议（RIP，Routing Information Protocol）的技术原理详解，以及其与OSPF（Open Shortest Path First）的对比分析。内容分为技术原理、对比优势和不足两部分。 一、RIP技术原理深度解析 1. 基本概念 协议类型：RIP属于距离向量路由协议（Distance-V…...
相似命令对比
awk 命令用法表格 场景命令示例说明示例输入文件内容 (input.txt)输出结果1. 基础字段提取awk -F: {print $1} /etc/passwd按分隔符提取第1列（如用户名）。root:x:0:0:root:/root:/bin/bashroot2. 多字段组合输出awk -F: {print $1, $3, $7} /etc/passwd…...
Vuerouter 的底层实现原理
文章目录 前言🧩 Vue Router 底层实现核心原理🧠 执行流程图（简化版）🔍 核心模块源码原理（简要）① 路由注册与匹配（createRouterMatcher）② 历史模式管理器（c…...
按拼音首字母进行排序组成新的数组（vue）
数据按首字母相同的组成新的数组，使用拼音（Pinyin）转换 比如想要的效果： 下载 npm install pinyin代码： import pinyin from "pinyin"; let studentAllList [{onLine: true,points: undefined…...
在IPv6头部中，Next Header字段
在IPv6头部中，Next Header字段 在IPv6头部中，Next Header字段是一个8位的字段，它的作用是指示下一个头部扩展的类型或者最终的传输层协议类型。这个字段的值决定了数据包中紧随IPv6头部之后的头部扩展的类型，或者是直接指向传输层…...
vue项目部署后部分子页面刷新后403
经过我的仔细分析；终于找到了是刷新后路径后面自动拼接了 / ；如 66.66.66.66/aPage 刷新后变成了 66.66.66.66/aPage/ 导致403 方法一： 修改路由为hash模式 // router/index.jsimport { createRouter, createWebHistory, createWebHashHist…...
C# NX二次开发：曲线和点位相关UFUN函数详解
大家好，今天要介绍查询曲线上点位和返回沿着曲线偏移一定距离的UFUN函数。 （1）UF_MODL_ask_curve_points：这个函数的定义为按照给定条件查询曲线上的点位。 Defined in: uf_modl_curves.h Overview Returns an array of 3D …...
服务器数据恢复—硬盘坏道导致EqualLogic存储不可用的数据恢复
服务器存储数据恢复环境&故障： 一台EqualLogic某型号存储中有一组由16块SAS硬盘组建的RAID5阵列。上层采用VMFS文件系统，存放虚拟机文件，上层一共分了4个卷。 磁盘故障导致存储不可用，且设备已经过保。 服务器存储数据恢复过程…...
【2019 CWE/SANS 25 大编程错误清单】12越界写入
案例1： void tonly_aw21036_led_drv_pwm_init(tonly_gpio_pin_t gpio_pin, uint8_t pwm) {uint8_t pin gpio_pin - AW21036_GPIO_PIN_START;if (pin < AW21036_LED_MAX_CHANNEL){aw21036_ctx.pwm[pin] pwm; /* 有效通道号: 0-35 */}else{TONLY_LED_LOG_E(&qu…...
redis bitmap数据类型调研
一、bitmap是什么？ redis原文： Bitmaps are not an actual data type, but a set of bit-oriented operations defined on the String type . This means that bitmaps can be used with string commands, and most importantly with SET and GET. 翻…...
[Windows] Ghost Downloader v3.5.9 开源多线程下载工具
[Windows] Ghost Downloader 链接：https://pan.xunlei.com/s/VOPejV3veb6v-im-wVmMkXkhA1?pwdpzwk# Ghost Downloader 是一款专为Windows平台设计的多线程下载工具，完全由Python语言开发。它以其高效的多线程下载技术和断点续传功能而著称，…...
互联网大厂Java求职面试：AI集成与云原生架构设计
互联网大厂Java求职面试：AI集成与云原生架构设计 面试场景：技术总监与程序员郑薪苦的对话 技术总监：郑薪苦，我们今天来聊聊你在AI集成场景中的经验。你有没有尝试过将Spring AI与大模型结合？ 郑薪苦：有啊…...
gitignore的相关用法
gitignore .gitignore 是 git 用于管理需要忽略追踪的文件。.gitignore 一般用于远程仓库多人协作的场景，最常见的情况是，使用 MacOS 系统的程序员要在 .gitignore 中添加 .DS_Store 防止将其推送至仓库中。或在开发代码时，将调试文件忽略&a…...
前端取经路——工程化渡劫：八戒的构建之道
大家好，我是老十三，一名前端开发工程师。前端工程化就像八戒的钉耙，看似简单却能降妖除魔。在本文中，我将带你探索前端工程化的九大难题，从模块化组织到CI/CD流程，从代码规范到自动化测试，揭示这些工具背后的核心原理。无论你是初学者还是资深工程师，这些构建之道都能帮…...
Android 数据持久化之 Room 数据库存储
一、简介 Room 是 Google 推出的 Android 持久层框架，建立在 SQLite 之上，提供了一个抽象层，简化了数据库操作。它通过注解和编译时检查来确保数据操作的正确性。 Room 主要由以下三个组件组成： Entity（实体）：定义封装实际数据的实体类，每个实体类对应数据库中的一个…...
Selenium Web自动化测试学习笔记（一）
自动化测试 技术手段模拟人工，执行重复性任务，准确率100%，高于人工 selenium 可通过浏览器驱动控制浏览器，通过元素定位模拟人工，实现web自动化，没有焦点（把浏览器放在最小化依然可以&#x…...
一个项目的周测试的文档（Billing Service 测试文档）
目录 Pending Pool 各项功能测试... 2 1. Assign 分配功能。测试结果： ok. 2 2. Reset 功能。 测试结果： OK. 3 3. Discard 功能。测试结果： 提示discard成功，但是historical job没有找到记录... 3 4. E…...
二分查找习题
一、二叉搜索树与双向链表（剑指 Offer JZ36 ） 解题思路要点 - 利用中序遍历特性：二叉搜索树的中序遍历结果是有序序列，这是将二叉搜索树转化为有序双向链表的关键。通过中序遍历可以按从小到大的顺序访问节点，满足…...
JumpServer批量添加资产
环境说明：我的环境是H3C网络设备环境 一、在linux系统环境下通过Python脚本获取交换机信息，IP地址和设备名称一一对应，脚本如下： cat get_device-sysname.py import re from netmiko import ConnectHandler from concurrent.fut…...
使用 Python 与 Java 实现接入 AI 大模型的 MCP 协议：原理与实战
一、什么是 MCP 协议？ MCP（Model Context Protocol） 是一种专为远程控制和管理 AI 大模型而设计的通信协议。它允许客户端通过网络向服务器发送请求，以执行诸如模型推理、状态查询、参数更新等操作，并接收相应的结果。…...
)
Nginx核心原理以及案例分析(AI)
一、Nginx核心原理分析 1. 事件驱动与非阻塞模型 Epoll异步机制：基于Linux的epoll模型实现异步非阻塞I/O处理，单线程可高效管理数万并发连接，避免传统select模型的轮询性能瓶颈。多进程架构：采用Master-Worker模式&…...
ChromeDriverManager的具体用法
ChromeDriverManager 是 webdriver_manager 库的一部分，它用于自动管理 ChromeDriver 的下载和更新。使用 ChromeDriverManager 可以避免手动下载 ChromeDriver 并匹配系统中安装的 Chrome 浏览器版本。以下是 ChromeDriverManager 的基本用法： 步骤 1…...
Linux：认识基础IO
1.理解"⽂件" 1.1狭义理解 ⽂件在磁盘⾥ 磁盘是永久性存储介质，因此⽂件在磁盘上的存储是永久性的 磁盘是外设（即是输出设备也是输⼊设备） 磁盘上的⽂件 本质是对⽂件的所有操作，都是对外设的输⼊和输出 简称 IO 1.2广…...
SimpleMindMap：一个支持AI的思维导图软件
SimpleMindMap（思绪思维导图）是一款开源、跨平台且功能丰富的思维导图工具，支持 Web 端及多平台客户端（Windows、macOS、Linux）。 SimpleMindMap 提供的主要功能如下： 插件化设计，除了核心功能…...
数据库故障排查指南：MySQL 解决常见问题解决
数据库是现代 IT 系统的核心引擎，承载着企业最重要的数据资产。数据库的稳定、高效运行直接关系到业务的生死存亡。然而，由于软硬件、配置、应用访问等多种因素的影响，数据库故障难以完全避免。当故障发生时，能够迅速定位、分析并解决问题，同时确保数据安全不受影响，是每…...
2025年特种作业操作证考试题库及答案（登高架设作业）
一、单选题 202.带电跨越架羊角撑杆高度（ ）m。 A.1 B.1.1 C.1.2 答案:B 203.跨越架拉线地锚埋深必须按（ ）及架体设计要求进行。 A.现场情况决定 B.土质情况 C.地锚设计分坑图 答案:C 204.单排脚手架洞口处&#…...
Open CASCADE学习|ApplicationFramework 框架使用指南
在现代 CAD（计算机辅助设计）应用开发中，构建一个高效、可扩展且用户友好的应用程序框架是至关重要的。Open CASCADE（简称 OCC）提供了一个功能强大的 ApplicationFramework（应用程序框架）&#x…...
hadoop中的序列化和反序列化（3）
3. Java的序列化 Java提供了内置的序列化机制，通过java.io.Serializable接口实现。 3.1 如何实现Java序列化 让类实现Serializable接口。 使用ObjectOutputStream进行序列化。 使用ObjectInputStream进行反序列化。 示例代码 序列化 java 复制 import jav…...
PostgreSQL给新用户授权select角色
✅ 切换到你的数据库并以超级用户登录（例如 postgres）： admin#localhost: ~$ psql -U postgres -d lily✅ 创建登录的账号机密吗 lily> CREATE USER readonly_user WITH PASSWORD xxxxxxxxxxx; ✅ 确认你授予了这个表的读取权限…...
)
MySQL 8.0 OCP（1Z0-908）英文题库(1-10)
目录 第1题题目解析正确答案 第2题题目解析正确答案 第3题题目解析正确答案 第4题题目解析正确答案 第5题题目解析正确答案 第6题题目解析正确答案 第7题题目解析正确答案 第8题题目解析正确答案 第9题题目解析正确答案 第10题题目解析正确答案： 第1题 Your MySQL …...
南京市出台工作方案深化“智改数转网联”，物联网集成商从“困局”到“蓝海”！
为落实《江苏省深化制造业智能化改造数字化转型网络化联接三年行动计划（2025-2027年）》，南京市近日出台“工作方案”，部署五大行动17项重点任务，进一步深化全市制造业智能化改造、数字化转型、网络化联接（以…...
系统思考：教育焦虑恶性循环分析
今天和团队的小伙伴一起拆解了一个父母教育焦虑与报班行为之间的系统环路图，报班越多 ➡ 孩子自由时间越少 ➡ 情绪调节力下降 ➡ 学习效率更低 ➡ 成绩不理想 ➡ 家长更焦虑 ➡ 继续加码报班…… 一圈一圈，像是陷入了“焦虑的恶性循环”。 这也是我一直…...