末日设计1.00


故事背景:
在不远的未来，世界陷入了末日危机。资源枯竭、社会秩序崩溃，幸存者们为了生存，不得不拿起武器争夺每一寸土地和每一口食物。在这个混乱的世界中，你是一名传奇狙击手，凭借超凡的射击技巧和生存智慧，成为了末日中的一道光。你的任务是保护自己的领地，击退一波又一波的入侵者。每个命中的目标都是对生存的宣言，每一次成功的防御都是对希望的坚持。

玩法介绍:
1. 游戏开始前，玩家将经历一个3秒的倒计时，准备迎接挑战。
2. 游戏界面中，玩家需要操作鼠标点击移动的目标。每个成功击中的目标都会增加玩家的得分，同时命中目标的大小会逐渐减小，增加游戏难度。
3. 每次错过目标或未能在规定时间内击中目标，玩家的得分将会减少，剩余时间也会相应减少。
4. 游戏时间限定为30秒，在这段时间内，玩家需要尽可能多地击中目标，累积得分。
5. 当时间耗尽时，游戏结束，屏幕上会显示玩家的最终得分和评级。评级系统将根据玩家的表现给出相应的称号，从“继续练习！”到“传奇！”不等。
6. 游戏结束后，玩家可以点击“游戏结束！点击重新开始。”重新开始游戏，挑战更高分。

末日射击挑战1.00不仅是一场技巧和反应速度的比拼，也是玩家在末日背景下生存斗争的体验。每一次的射击，都是对未来的一份希望和坚持。


<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>末日射击挑战1.00</title><style>body {margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #3e3e3e; /* 暗色背景，符合战争设定 */font-family: 'Courier New', Courier, monospace; /* 使用等宽字体，增加机械感 */}canvas {border: 5px solid #555; /* 为画布添加更明显的边框 */cursor: url('sniper-cursor.png'), crosshair;background-color: rgba(0, 0, 0, 0.5); /* 让画布半透明，增加末日氛围 */}#score, #time, #gameOver, #rating, #countdown {position: absolute;left: 50%;font-size: 24px;color: #f0f0f0; /* 使用浅色字体，增加可读性 */transform: translateX(-50%);text-shadow: 0px 0px 8px rgba(255, 255, 255, 0.5); /* 文字阴影，增加立体感 */}#score {top: 20px;}#time {top: 50px;}#countdown {top: 80px;color: #ff4500; /* 使用更加鲜艳的红色，增加紧迫感 */font-size: 28px; /* 增大字体，突出倒计时 */}#gameOver, #rating {display: none;top: 100px;color: #ff6347; /* 使用番茄色，提升视觉冲击力 */font-size: 36px; /* 增大游戏结束和评级的字体，提升重要性 */}#rating {top: 150px;color: #32cd32; /* 使用鲜绿色，与游戏结束的红色形成对比 */}</style>
</head>
<body><div id="score">得分: 0 | 命中目标: 0</div><div id="time">剩余时间: 30秒</div><div id="countdown"></div><div id="gameOver">游戏结束！点击重新开始。</div><div id="rating"></div><canvas id="gameCanvas" width="800" height="600"></canvas><script>document.addEventListener('DOMContentLoaded', function() {const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');let score = 0;let targetsHit = 0;let targetSize = 25;let timeLeft = 30;let gameInterval;let currentTarget;function checkHit(x, y, target) {const distance = Math.sqrt((x - target.x) ** 2 + (y - target.y) ** 2);return distance < target.radius;}function updateScore(hit) {if (hit) {score += 10;targetsHit++;targetSize = Math.max(10, targetSize - 1);} else {score = Math.max(0, score - 5);timeLeft = Math.max(0, timeLeft - 1);}document.getElementById('score').innerText = `得分: ${score} | 命中目标: ${targetsHit}`;document.getElementById('time').innerText = `剩余时间: ${timeLeft}秒`;}function getRating(score) {if (score <= 100) return "继续练习！";if (score <= 200) return "还不错！";if (score <= 350) return "平均水平的射手";if (score <= 400) return "神枪手";if (score <= 500) return "狙击手";return "传奇！";}function drawTarget() {if(timeLeft <= 0 || document.getElementById('countdown').style.display !== 'none') return;ctx.clearRect(0, 0, canvas.width, canvas.height);// 修改靶子样式为复杂图形或图像const x = Math.random() * (canvas.width - targetSize * 2) + targetSize;const y = Math.random() * (canvas.height - targetSize * 2) + targetSize;// 绘制一个简单的靶子示例，可根据需要自定义ctx.beginPath();ctx.arc(x, y, targetSize, 0, Math.PI * 2, false); // 外圈ctx.fillStyle = 'red';ctx.fill();ctx.beginPath();ctx.arc(x, y, targetSize * 0.5, 0, Math.PI * 2, false); // 内圈ctx.fillStyle = 'white';ctx.fill();ctx.beginPath();ctx.arc(x, y, targetSize * 0.25, 0, Math.PI * 2, false); // 中心点ctx.fillStyle = 'red';ctx.fill();currentTarget = {x: x, y: y, radius: targetSize};}function startGame() {score = 0;targetsHit = 0;targetSize = 25;timeLeft = 30;document.getElementById('score').innerText = `得分: 0 | 命中目标: 0`;document.getElementById('time').innerText = `剩余时间: 30秒`;document.getElementById('gameOver').style.display = 'none';document.getElementById('rating').style.display = 'none';gameInterval = setInterval(updateTime, 1000);drawTarget();}function showGameOver() {clearInterval(gameInterval);ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.fillStyle = "rgba(0,0,0,0.75)";ctx.fillRect(0, 0, canvas.width, canvas.height);ctx.fillStyle = "#FFFFFF";ctx.font = "40px Arial";ctx.fillText("游戏结束！最终得分: " + score, 50, canvas.height / 2);document.getElementById('gameOver').style.display = 'block';document.getElementById('rating').innerText = getRating(score);document.getElementById('rating').style.display = 'block';}function updateTime() {if(timeLeft > 0) {timeLeft--;document.getElementById('time').innerText = `剩余时间: ${timeLeft}秒`;} else {showGameOver();}}canvas.addEventListener('click', function(event) {if(timeLeft <= 0 || document.getElementById('countdown').style.display !== 'none') return;const rect = canvas.getBoundingClientRect();const x = event.clientX - rect.left;const y = event.clientY - rect.top;const hit = checkHit(x, y, currentTarget);updateScore(hit);drawTarget();});document.getElementById('gameOver').addEventListener('click', startGame);function initiateCountdown() {let countdown = 3;const countdownDisplay = document.getElementById('countdown');countdownDisplay.innerText = `游戏在 ${countdown} 秒后开始`;countdownDisplay.style.display = 'block';let countdownTimer = setInterval(() => {countdown--;countdownDisplay.innerText = `游戏在 ${countdown} 秒后开始`;if (countdown <= 0) {clearInterval(countdownTimer);countdownDisplay.style.display = 'none';startGame();}}, 1000);}initiateCountdown();});</script></body>
</html>


 

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

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

相关文章

研二学妹面试字节，竟倒在了ThreadLocal上，这是不要应届生还是不要女生啊？

研二学妹面试字节，竟倒在了ThreadLocal上，这是不要应届生还是不要女生啊？

一、写在开头 今天和一个之前研二的学妹聊天&#xff0c;聊及她上周面试字节的情况&#xff0c;着实感受到了Java后端现在找工作的压力啊&#xff0c;记得在18&#xff0c;19年的时候&#xff0c;研究生计算机专业的学生&#xff0c;背背八股文找个Java开发工作毫无问题&#x…
阅读更多...
本地图形客户端查看git提交历史 使用 TortoiseGit

本地图形客户端查看git提交历史 使用 TortoiseGit

要在本地查看提交记录和修改历史&#xff0c;可以使用 TortoiseGit 和 Git-SCM。这两个工具都提供了强大的功能来管理和查看 Git 仓库中的提交记录和历史修改。 使用 TortoiseGit 查看提交记录和修改历史 查看提交记录&#xff08;Log&#xff09;&#xff1a; 右键点击项目文…
阅读更多...
抖音里卖什么最赚钱？4个冷门的高利润商品，还有谁不知道！

抖音里卖什么最赚钱？4个冷门的高利润商品，还有谁不知道！

哈喽~我的电商月月 做抖音小店的新手朋友&#xff0c;一定很想知道&#xff0c;在抖音里卖什么最赚钱&#xff1f; 很多人都会推荐&#xff0c;日常百货&#xff0c;小风扇&#xff0c;女装&#xff0c;宠物用品等等&#xff0c;这些商品确实很好做&#xff0c;你们可以试试 …
阅读更多...
Euraka详解：实现微服务架构的关键组件

Euraka详解：实现微服务架构的关键组件

在当今互联网时代&#xff0c;微服务架构已经成为许多企业构建和部署应用程序的首选方法之一。而要在微服务架构中实现高可用性和灵活性&#xff0c;服务发现和注册是至关重要的一环。Eureka作为Netflix开源的服务发现组件&#xff0c;为实现这一目标提供了高效可靠的解决方案。…
阅读更多...
备忘录可以统计字数吗？备忘录里在哪查看字数？

备忘录可以统计字数吗？备忘录里在哪查看字数？

在这个信息爆炸的时代&#xff0c;很多人喜欢使用备忘录app来记录生活中的点点滴滴。备忘录不仅可以帮助我们记事、安排日程&#xff0c;还能提醒我们完成各种任务&#xff0c;是我们日常生活中不可或缺的小助手。 然而&#xff0c;在使用备忘录时&#xff0c;有时我们会遇到需…
阅读更多...
不用BookStack的企业都在用什么知识库软件

不用BookStack的企业都在用什么知识库软件

现如今&#xff0c;越来越多的企业使用知识库软件对企业内部知识进行管理。BookStack作为一款功能强大的开源知识库软件&#xff0c;成为很多企业的首选。但是还是有一部分人群认为BookStack不适合他们的企业那么他们都是在用什么别的知识库软件呢&#xff1f;LookLook同学今天…
阅读更多...
《python本机环境多版本切换》-两种方式以及具体使用--venv/pyenv+pycharm测试

《python本机环境多版本切换》-两种方式以及具体使用--venv/pyenv+pycharm测试

阿丹&#xff1a; source myenv/bin/activate 在开发使用rasa的时候发现自己安装的python环境是3.12的&#xff0c;和rasa不兼容&#xff0c;所以实践一下更换多python环境。 使用虚拟环境 在Python中使用虚拟环境来切换Python版本是一个常见的做法&#xff0c;这可以帮助你…
阅读更多...
Minikube部署单节点Kubernetes

Minikube部署单节点Kubernetes

1.1 Minikube部署单节点K8s Minikube是由Kubernetes社区维护的单机版的Kubernetes集群&#xff0c;支持macOS, Linux, andWindows等多种操作系统平台&#xff0c;使用最新的官方stable版本&#xff0c;并支持Kubernetes的大部分功能&#xff0c;从基础的容器编排管理&#xff0…
阅读更多...
实用篇| huggingface网络不通

实用篇| huggingface网络不通

之前文章《Transformer原理》中介绍过,Transformers 是由 Hugging Face 开发的一个包&#xff0c;支持加载目前绝大部分的预训练模型。随着 BERT、GPT 等大规模语言模型的兴起&#xff0c;越来越多的公司和研究者采用 Transformers 库来构建应用。 Hugging Face是一家美国公司…
阅读更多...
Easy IP + DNAT（服务器NAT转换）

Easy IP + DNAT（服务器NAT转换）

第一章 Easy IP 1.1 一般家庭和企业使用的地址转换方式 直接使用出接口的地址做转换Easy IP适用于小规模居于网中的主机访问Internet的场景如&#xff1a;家庭、小型网吧、小型办公室中&#xff0c;这些地方内部主机不多&#xff0c;出接口可以通过拨号方式获取一个临时公网I…
阅读更多...
2.Nginx上配置图片访问

2.Nginx上配置图片访问

在 Nginx 上配置图片访问涉及到在 Nginx 配置文件中添加相应的 location 块来处理图片请求。以下是一个基本的示例&#xff0c;演示如何配置 Nginx 以便在指定目录中存储和访问图片。 1.上传图片到服务器 首先&#xff0c;将你的图片上传到服务器的某个目录&#xff0c;例如 …
阅读更多...
视频监控汇聚平台LntonCVS通过GB/T28181国标协议实现视频监控平台的级联方案

视频监控汇聚平台LntonCVS通过GB/T28181国标协议实现视频监控平台的级联方案

近年来&#xff0c;随着网络视频监控应用范围的拓展&#xff0c;越来越多的政府部门和跨区域行业单位对视频监控的需求已经不局限于本地联网监控。他们正在探索在原有的本地联网监控基础上&#xff0c;建设省级乃至全国范围内的跨区域监控联网&#xff0c;以全面打造数据共享平…
阅读更多...
BUUCTF靶场[Reverse]内涵的文件、新年快乐

BUUCTF靶场[Reverse]内涵的文件、新年快乐

[reverse]内涵的文件 文件运行看一下 老规矩&#xff0c;拿到文件先用DIE查有没有壳 没有壳&#xff0c;且是一个32位的文件&#xff0c;用相对应的IDA打开 &#xff0c;有主函数&#xff08;mian&#xff09;&#xff0c;先点开 这里点开&#xff08;mian_0&#xff09;,发现…
阅读更多...
Kotlin基础之基本语法

Kotlin基础之基本语法

Kotlin 简介 Kotlin 是一种由 JetBrains 开发的静态类型编程语言&#xff0c;设计用于与 Java 虚拟机 (JVM) 兼容&#xff0c;同时也可用于 Android、JavaScript&#xff08;通过 Kotlin/JS&#xff09;和原生&#xff08;通过 Kotlin/Native&#xff09;开发。Kotlin 旨在提供…
阅读更多...
【详细介绍WebKit的结构】

【详细介绍WebKit的结构】

&#x1f3a5;博主&#xff1a;程序员不想YY啊 &#x1f4ab;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f917;点赞&#x1f388;收藏⭐再看&#x1f4ab;养成习惯 ✨希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出…
阅读更多...
springboot + es7.12.3 elasticsearchRestTemplate使用记录

springboot + es7.12.3 elasticsearchRestTemplate使用记录

private BoolQueryBuilder getQueryBuilder(QueryCollectWaterDataPageRequestVO requestVO) {BoolQueryBuilder queryBuilder QueryBuilders.boolQuery();if (!CollectionUtils.isEmpty(requestVO.getCompanyIds())) {//termsQuery 精确查找corpId字段为精确的多个值&#xf…
阅读更多...
T-Sql 中断正在连接的数据库的客户端并移除数据库

T-Sql 中断正在连接的数据库的客户端并移除数据库

USE master;-- 查找连接到数据库 OGS_PlugPower 的会话ID&#xff08;SPID&#xff09; DECLARE SessionID INT;SELECT SessionID session_id FROM sys.dm_exec_sessions WHERE database_id DB_ID(OGS_PlugPower);-- 使用会话ID&#xff08;SPID&#xff09;中断连接 IF Sess…
阅读更多...
设计模式 15 Decorator Pattern 装饰器模式

设计模式 15 Decorator Pattern 装饰器模式

设计模式 15 Decorator Pattern 装饰器模式 1.定义 Decorator Pattern 装饰器模式是一种结构型设计模式&#xff0c;它允许在运行时给对象添加新的行为或职责&#xff0c;而无需修改对象的源代码。这种模式通过创建一个包装对象&#xff0c;也称为装饰器&#xff0c;来包裹原…
阅读更多...
C 语言设计模式（行为型）

C 语言设计模式（行为型）

文章目录 策略模式场景示例 迭代器模式场景示例 访问者模式场景示例 观察者模式场景示例 命令模式场景示例 模板方法模式场景示例 事件驱动模式场景示例 责任链模式场景示例 状态模式场景示例 策略模式 策略模式&#xff08;Strategy Pattern&#xff09;是一种行为型设计模式…
阅读更多...
银行为什么要对网点开展神秘顾客检测项目？

银行为什么要对网点开展神秘顾客检测项目？

银行业面临的形势复杂多变&#xff0c;包括技术创新、客户行为变化、竞争加剧、监管环境变化、全球化与本地化平衡、经济环境影响以及可持续发展和社会责任等多方面的挑战和机遇。银行需要通过种策略&#xff0c;积极应对这些变化&#xff0c;实现可持续发展。其中提升客户服务…
阅读更多...
最新文章

Copyright @ 2022~2023