用html+js+css实现的战略小游戏
效果图:
兄弟们，话不多说，直接上代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description" content="朝鲜战争战略游戏 - 选择阵营，指挥部队，赢得胜利"><title>朝鲜战争战略游戏</title><link rel="icon" href="favicon.ico" type="image/x-icon"><link rel="stylesheet" href="style.css"><link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin><link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet"></head>
<body><div id="loading-screen" class="loading-screen" aria-live="polite"><div class="loading-content"><div class="loading-spinner"></div><p id="loading-text">正在准备战场...</p></div></div><!-- 阵营选择界面 --><section id="faction-selection" class="faction-selection" aria-label="阵营选择"><h2>Pick your Faction</h2><div class="faction-buttons"><button class="faction-button us" data-faction="us" aria-label="选择美国阵营"><img src="images/us.png" alt="美国国旗" class="faction-flag"><span class="faction-name">US</span></button><button class="faction-button rok" data-faction="rok" aria-label="选择韩国阵营"><img src="images/rok.png" alt="韩国国旗" class="faction-flag"><span class="faction-name">ROK</span></button><button class="faction-button dprk" data-faction="dprk" aria-label="选择朝鲜阵营"><img src="images/dprk.png" alt="朝鲜国旗" class="faction-flag"><span class="faction-name">DPRK</span></button><button class="faction-button pla" data-faction="pla" aria-label="选择中国阵营"><img src="images/pla.png" alt="中国国旗" class="faction-flag"><span class="faction-name">PLA</span></button></div></section><!-- 游戏主界面 --><main id="game-interface" class="game-interface" style="display: none;"><div id="top-bar" class="top-bar"><div class="resource-info"></div><div class="turn-info"><span>Round: <span id="current-turn">1</span></span><span id="action-points-display">Action Points: -/-</span><span>Faction: <span id="current-faction">-</span></span></div><div class="game-controls-top"><button id="pause-button" class="pixel-button top-button" aria-label="暂停">❚❚</button><button id="dev-mode-toggle" class="pixel-button top-button dev-button" style="font-size: 10px;">Dev</button></div></div><!--包裹地图和侧边栏的容器 --><div class="main-content-area"><div id="map-container" class="map-container"></div><aside id="sidebar" class="sidebar"><div id="selected-unit-info">Select a unit</div></aside></div><div id="action-buttons-corner" class="action-buttons-corner"><img id="selected-unit-icon" src="images/placeholder.png" alt="选中单位" style="display: none;"> <button id="move-button" class="pixel-button action-button" aria-label="移动单位"></button><button id="attack-button" class="pixel-button action-button" aria-label="攻击敌人"></button><button id="capture-button" class="pixel-button action-button" aria-label="占领地点"></button></div><div id="end-turn-button-corner" class="end-turn-button-corner"><button id="end-turn-button" class="pixel-button end-turn-button" aria-label="结束当前回合"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="32px" height="32px"><path d="M6 18l8.5-6L6 6v12zm2-8.14L11.03 12 8 14.14V9.86zM16 6h2v12h-2z"/></svg></button></div></main><script src="script.js"></script>
</body>
</html> 相关文章：
用html+js+css实现的战略小游戏
效果图: 兄弟们，话不多说，直接上代码 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">…...
【落羽的落羽 C++】list及其模拟实现
文章目录 一、list介绍二、list模拟实现1. 节点2. 迭代器3. list 一、list介绍 list是我们之前学过的带头双向链表的类模板，具有链表的一系列性质，也有多种多样的接口便于使用，使用方法与vector大体相似： 函数接口说明list()构造…...
深入理解高性能网络通信：从内核源码到云原生实践
深入理解高性能网络通信：从内核源码到云原生实践 前言 随着互联网业务规模的高速增长，服务端网络通信能力成为系统性能的核心瓶颈。如何支撑百万级连接、在极限场景下实现低延迟高吞吐？本篇博客将围绕Linux通信机制内核剖析、性能调优实战、…...
全格式文档转 Markdown 工具，Docker 一键部署，支持 API 调用
以下是简要介绍： 这是一款可以快速将任意文档文件转markdown格式内容的工具，提供API转换接口，方便集成与应用原理就是利用libreoffice、pandoc文件转换工具，把所有文档类型的文件逐步转化，最终转成markdown格式的内容…...
算法思想之深度优先搜索（DFS）、递归以及案例（最多能得到多少克黄金、精准核酸检测、最富裕的小家庭）
深度优先搜索（DFS）、递归 深度优先搜索（Depth First Search，DFS）是一种用于遍历或搜索树或图的算法。在 DFS 算法中，从起始节点开始，沿着一条路径尽可能深地访问节点，直到到达叶子节…...
Windows玩游戏的时候，一按字符键就显示桌面
最近打赛伯朋克 2077 的时候，不小心按错键了，导致一按字符键就显示桌面。如下： 一开始我以为是输入法的问题（相信打游戏的人都知道输入法和奔跑键冲突的时候有多烦），但是后来解决半天发现并不是。在网上搜…...
2025 后端自学UNIAPP【项目实战：旅游项目】1、创建项目框架
1、创建项目 ①项目名称：自定义，【我是travel】 ②vue版本：vue3 ③其他默认，最后创建 2、创建页面 ①展开自己刚才创建的项目 ②单击选中pages文件夹 --->鼠标右键---->新建页面 ③页面名称：自定义favouri…...
Tomcat中Web应用程序停止时为了防止内存泄漏，JDBC驱动程序被强制取消注册出现原因
1.问题描述 本地Windows环境开发的Springboot项目同样的mysql版本，jdk版本，tomcat版本，本地运行没有任何问题，发布到阿里云服务器上时报以下问题： 06-May-2025 20:06:12.842 警告 [main] org.apache.catalina.loader…...
vitepress 复杂环境引入 mermaid
方式一： 参考官网，这里不赘述 。 方式二： pnpm add -D vitepress-plugin-mermaid pnpm add -D mermaidimport { MermaidMarkdown, MermaidPlugin } from vitepress-plugin-mermaid;export default defineConfig({markdown: {config(md) {md…...
盘古信息领德创|半导体存储与云计算存储小巨人企业IMS数字化升级项目正式启动！
在数字化和智能化浪潮下，数据已然成为企业核心资产。随着大模型应用加速落地和智算新基建推进，数据量呈爆炸式增长，存储作为数据基础设施的关键环节，正从传统的容量与性能保障，向数据智能处理、高效管理及安全可靠的全…...
Oracle04-基本使用
零、文章目录 Oracle04-基本使用 1、创建表空间 （1）创建语句 create tablespace testdata datafile c:\datafile\testdata.dbf size 100m autoextend on next 10m（2）参数说明 testdata：表空间名称datafile&#x…...
YOLO 从入门到精通学习指南
一、引言 在计算机视觉领域，目标检测是一项至关重要的任务，其应用场景广泛，涵盖安防监控、自动驾驶、智能交通等众多领域。YOLO（You Only Look Once）作为目标检测领域的经典算法系列，以其高效、快速的特点受到了广泛的关注和应用。本学习指南将带领你从 YOLO 的基础概念…...
Linux 磁盘初始化与扩容操作手册
📦 1. 初始化服务器，新磁盘挂载为 LV ✅ 使用 ext4 格式 # 创建挂载目录 mkdir -p /datatmp# 初始化物理卷 sudo pvcreate /dev/sdb# 创建卷组 sudo vgcreate vg_data /dev/sdb# 创建逻辑卷（使用全部空间） sudo lvcreate -l 100…...
ShardingSphere：使用information_schema查询时报错：Table ‘数据库名称.tables‘ doesn‘t exist
目录 简介异常信息SQL排查原因解决 简介 1、程序jdk1.8升级为jdk21 2、ShardingSphere框架从4.1.1升级为5.2.1 3、使用 information_schema.tables 查询时报错 异常信息 ### Error querying database. Cause: java.sql.SQLSyntaxErrorException: Table 数据库名称.tables …...
uniapp开发09-设置一个tabbar底部导航栏且配置icon图标
uniapp开发09-设置一个tabbar底部导航栏且配置icon图标！在实际项目开发中，经常会遇到需要设置icon图标的情况，而且底部导航通常都是有固定位置且内容不会轻易发生变化的。官方提供了自带的tabbar组件。我们来了解一下最基础的入门案例。 1&am…...
使用OpenCV 和 Dlib 实现年龄性别预测
文章目录 引言1.系统架构2.代码解析2.1 模型初始化2.2 核心函数实现(1) 人脸检测函数 getBoxes()(2) 中文文本显示函数 3. 主循环流程4.关键技术点5.总结 引言 在计算机视觉领域，人脸检测与属性分析是一项基础且重要的技术。本文将详细介绍如何使用OpenCV和深度学习…...
SSTI学习
1，什么是模板 模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，利用模板引擎来生成前端的html代码，模板引擎会提供…...
0基础学习鸿蒙开发-HarmonyOS4
一、初识 1. 开发工具 官网 开发-HarmonyOS NEXT鸿蒙应用开发平台-华为开发者联盟 2. ArkTS 二、TypeScript 基本语法 1.变量声明 2. 条件控制 注意 在TypeScrips中 空字符串数字0、null、undefined 都坡认为是false 其它值则为true if (num) {// num 非空执行 } 3. 循环迭…...
原生 IP（Native IP）
目录 一、核心特点 二、原生 IP 的常见应用 三、原生 IP vs. 数据中心 IP 四、如何获取原生 IP？ 五、原生 IP 的优缺点 六、实际案例 原生 IP（Native IP） 是指由互联网服务提供商（ISP）直接分配给用户的 IP 地址&…...
python + whisper 读取蓝牙耳机， 转为文字
1. 起因， 目的: 看到别人做了类似的效果。所以自己也想试试看。动手。 2. 先看效果 3. 过程: 我用的是蓝牙耳机，EDIFIER W820NB 先找到声音，设置为 Hands-Free 模式 代码 1 ，查找设备名称， 看看哪个是能用的。 我…...
Prometheus实战教程：k8s平台-使用文件服务发现案例
date: 2025-03-06 tags:- prometheus --- 1查看NODE-IPkubectl get node -o wideNAME STATUS ROLES AGE VERSION INTERNAL-IP EXTERNAL-IP OS-IMAGE KERNEL-VERSION CONTAINER-RUNTIMEk8s-node01 Ready &…...
黄金量化：高频实时的贵金属API
在风云变幻的投资领域，贵金属黄金市场一直备受瞩目。近期，黄金等贵金属报价API，价格走势犹如过山车，引发投资者高度关注。据 iTick 数据显示，截至 2025 年 5 月 6 日 15:30，黄金 TD 价格为 792.97 元 / 克&…...
人工智能在医疗运营编程中的应用综述
引言 随着人工智能技术的迅猛发展，医疗行业正经历一场深刻的变革。人工智能不再仅限于辅助诊断或医学影像分析，而是逐步渗透到医疗运营的各个环节。医疗运营编程作为医院管理的核心，涵盖了从患者入院到出院的全过程管理，包括资源分配、工作流程优化、收入管理、供应链控制等…...
【心海资源】0U攻击工具｜一键模仿地址生成＋余额归集＋靓号生成系统
内容： 这是一款集合多种区块链辅助功能的0U攻击工具，无需部署环境、无需复杂配置，打开即可使用。主要功能包括： 0U攻击模块：模拟常见0U攻击场景，实现交易干扰与诱导。模仿地址生成：快速批量生成…...
Jenkins忘记admin密码后的恢复步骤
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么？二、使用步骤 1.引入库2.读入数据 总结 前言 提示：这里可以添加本文要记录的大概内容： 时间较长没有使用…...
基于深度学习的智能仓储异常检测系统设计与实现
一、项目场景 该设备主要应用于制造业、物流中心和仓储管理等场景。在制造业生产线上，该系统可用于实时监测产品的码垛状况，确保产品符合安全标准，避免因堆叠不当导致的产品损坏和生产停滞。在物流中心，系统能够监测卸货和入库过…...
安装篇--CentOS 7 虚拟机安装
CentOS 7 作为一个稳定且广泛使用的 Linux 发行版，是学习服务器管理和搭建各种服务（例如 Hadoop 集群）的理想平台。本次教程将教会大家如何在 VMware Workstation 虚拟机软件中一步步安装 CentOS 7 桌面环境。 准备工作： 确保您的…...
【Fifty Project - D23】
今日完成记录 TimePlan完成情况8：30 - 9：30《挪威的森林》√14：00 - 16：00修改大论文√16：00 - 17：30和老板讨论√ 早上在轰隆隆的火车声和时而从窗帘钻进的刺眼阳光中醒来，并没有意识到假期已…...
从零开始学java--集合类（2）
集合类 目录 集合类 Queue 队列的使用： 双端队列（Deque） Map和Set 概念： 模型： Map 常见方法说明： 注意： TreeMap和HashMap的区别： Set 常见方法说明： 注…...
在Star-CCM+中实现UDF并引用场数据和网格数据
在Star-CCM中实现UDF并引用场数据和网格数据 Star-CCM中的用户自定义函数(UDF)允许用户通过Java或C/C编程扩展软件功能。下面我将详细介绍如何实现UDF并引用模拟数据。 1. UDF基础实现方法 1.1 创建UDF的步骤 在Star-CCM中，右键点击"工具" → “用户函…...
WebRTC 服务器之SRS服务器性能优化配置
1.概述 SRS （Simple Realtime Server） 中提供的各种性能优化选项。这些选项允许您针对不同场景优化 SRS，从而在延迟、吞吐量和资源利用率之间取得平衡。有关常规配置的信息，请参阅配置。 1.1 性能提升目标 流媒体服务器的性能通常…...
n8n 中文系列教程_20. n8n高效开发秘诀：单步调试与测试用例实战指南
在n8n低代码开发中，你是否遇到过工作流运行时出错却难以定位问题？或者精心设计的流程在处理新数据时突然崩溃？单步调试和测试用例是解决这些痛点的关键！本文将带你掌握精准调试技巧和高效测试方法，确保你的自动化流程稳…...
手机携号转网查询，一键查看号码是否可转网！
在现代社会，手机已经成为人们生活不可或缺的一部分。随着通讯技术的不断发展，手机用户们也有了更多的选择权利，比如携号转网。那么，如何方便地查询一个手机号是否可以进行携号转网呢？今天，我们就来介绍一款…...
多线程网络编程：粘包问题、多线程/多进程服务器实战与常见问题解析
多线程网络编程：粘包问题、多线程/多进程服务器实战与常见问题解析 一、TCP粘包问题：成因、影响与解决方案 1. 粘包问题本质 TCP是面向流的协议，数据传输时没有明确的消息边界，导致多个消息可能被合并（粘包…...
【ArcGISPro】属性规则--属性联动
新建要素 直接点击【完成】 设置全局ID <...
五一感想：知识产权加速劳动价值！
今天是五一劳动节，祝各位网友劳动节快乐，昨天《中华人民共和国民营经济促进法》通过，普推知产老杨看到其中第三十三条专门就是针对知识产权的，加强对民营经济的原始创新保护。 一个普通的小物件白牌可能就卖1元钱，但是…...
ORACLE EBS 12.1 启用https 简单策略
Oracle EBS 启用https的官方文档是Document 376700.1, Enabling TLS in Oracle E-Business Suite Release 12.1，上面各种配置比较繁琐，我们参照Using Load-Balancers with Oracle E-Business Suite Release 12.0 and 12.1 (Doc ID 380489.1) 这个文档来利…...
Sublime PrettyJson 快捷键
一、进入快捷键编辑页 二、添加格式化、去掉格式化 快捷键 [ { "keys": ["ctrlcommandj"], "command": "pretty_json"}, { "keys": ["ctrlcommandm"], "command": "un_pretty_json"}…...
【计算机网络】TCP为什么可靠？解决了哪些问题？
TCP提供了： 1.可靠传输 2.流量控制 3.拥塞控制 4.连接管理 解决了数据在不可靠IP网络上的传输问题。 下面具体分析这4个方面。 1.可靠性传输： TCP确保数据包在网络传输过程中 不丢失、不重复，并且按顺序到达。 通过确认(ACK)、重传机制以…...
AI服务器的作用都有哪些?
根据网络环境的飞速发展，人工智能技术逐渐入驻到各个行业当中，其中AI服务器则是一种专门用来运行人工智能算法和模型的硬件设备，通常具备高性能计算、大容量存储和并行计算等多种功能，本文就来详细讲解一下AI服务器的作用…...
移动应用开发：自定义 View 处理大量数据的性能与交互优化方案
实现 1 万条数据下流畅滑动与灵敏交互的完美平衡。 一、数据渲染优化：从 1 万条到丝滑体验 （一）视图复用机制 视图复用是提升大量数据渲染性能的关键策略。以一个简单的自定义列表视图为例，我们可以构建如下的复用池管理机制&a…...
在 Ubuntu 下使用 ESP-IDF 通过串口烧录 ESP32
1. 准备工作 (1) 安装 ESP-IDF 环境 确保已完成 ESP-IDF 的安装和配置（参考官方文档）： bash 复制 下载 git clone --recursive https://github.com/espressif/esp-idf.git cd esp-idf ./install.sh . ./export.sh (2) 连接开发板 通过…...
探索SQLMesh中的Jinja宏：提升SQL查询的灵活性与复用性
在数据工程和数据分析领域，SQL是不可或缺的工具。随着项目复杂度的增加，如何高效地管理和复用SQL代码成为了一个重要课题。SQLMesh作为一款强大的工具，不仅支持标准的SQL语法，还引入了Jinja模板引擎的宏功能，极大地提升…...
【Linux】Linux中的调度和切换
一、引入基本概念 在任何的分时操作系统中，其调度都是较为公平的调度。在来回顾一下关于优先级为什么会被限制的问题： Linux为什么调整优先级是要受到限制的呢？？ 如果不加限制，将自己进程的优先级调整到非常高…...
.NET 通过回调函数执行 Shellcode启动进程
在红队活动往往需要考虑如何在实际环境中绕过防御机制，启动木马进程。今天，我们将深入探讨一种较少被提及但非常有趣的技术——利用 EnumPwrSchemes 函数回调来执行shellcode。 0x01 EnumPwrSchemes函数 EnumPwrSchemes 是 Windows 操作系统中的一个 API 函数，位于 C:\Win…...
快速体验 .NET9 提供的 HybridCache 混合缓存
.NET 9 引入了 HybridCache，这是一个新的高性能、分布式就绪的内存缓存实现，旨在为现代 Web 应用提供更高效的数据缓存机制。它结合了本地缓存（如 IMemoryCache）和分布式缓存（如 Redis、Garnet、SQL Server）…...
使用docker配置Mysql
Docker 命令 下面是一个常用的 Docker 命令，用于启动 MySQL 容器，并将数据挂载到本地目录： docker run -d \--name mysql-server \-e MYSQL_ROOT_PASSWORDyourpassword \-e MYSQL_DATABASEyourdb \-e MYSQL_USERyouruser \-e MYSQL_PASSWOR…...
stm32之输出比较OC和输入捕获IC
目录 1.输出比较OC1.1 简介1.2 PWM简介1.3 输出比较通道1.3.1 通用定时器1.3.2 高级定时器 1.4 PWM基本结构1.6 舵机1.7 直流电机1.7.1 引入：MX1508 芯片1.7.2 TB6612芯片 1.8 结构体和API1.8.1 结构体1.8.2 API1. TIM_OC1Init / TIM_OC2Init / TIM_OC3Init / TIM_O…...
为什么Transformer推理需要做KV缓存
一、我们先来回忆一下在transformer中KV在哪里出现过，都有什么作用？ α的计算过程： 这里引入三个向量： 图中的q为Query，用来匹配key值 图中的k为key,用来被Query匹配 图中的Value，是用来被进行加权平均的 由…...
Stream和Collections工具类
Stream流 Java 8 API添加了一个新的抽象称为流Stream，可以让你以一种声明的方式处理数据。Stream使用一种类似用SQL语句从数据库查询数据的直观方式来提供一种对Java集合运算和表达的高阶抽象。这种风格将要处理的元素集合看作一种流，流在管道中传输&am…...