末日设计1.00

2024-05-27 14:36
文章标签 设计 末日 1.00

本文主要是介绍末日设计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>


 

这篇关于末日设计1.00的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1007752。

相关文章

不懂推荐算法也能设计推荐系统

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例，告诉我们不懂推荐算法的产品，也能从产品侧出发， 设计出一款不错的推荐系统。 相信很多新手产品，看到算法二字，多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法（注：传统是指科班出身的产品都会接触过）。但对于推荐算法，多数产品对着网上搜到的资源，都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后，更是加大了理解的难度。 但，不了解推荐算法，就无法做推荐系
阅读更多...
怎么让1台电脑共享给7人同时流畅设计

怎么让1台电脑共享给7人同时流畅设计

在当今的创意设计与数字内容生产领域，图形工作站以其强大的计算能力、专业的图形处理能力和稳定的系统性能，成为了众多设计师、动画师、视频编辑师等创意工作者的必备工具。 设计团队面临资源有限，比如只有一台高性能电脑时，如何高效地让七人同时流畅地进行设计工作，便成为了一个亟待解决的问题。 一、硬件升级与配置 1.高性能处理器（CPU）：选择多核、高线程的处理器，例如Intel的至强系列或AMD的Ry
阅读更多...
基于51单片机的自动转向修复系统的设计与实现

基于51单片机的自动转向修复系统的设计与实现

文章目录 前言资料获取设计介绍功能介绍设计清单具体实现截图参考文献设计获取 前言 💗博主介绍：✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师，一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业的大学生，希望您们都共创辉煌！✌💗 👇🏻 精彩专栏 推荐订阅👇🏻 单片机
阅读更多...
SprinBoot+Vue网络商城海鲜市场的设计与实现

SprinBoot+Vue网络商城海鲜市场的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍：CSDN认证博客专家，CSDN平台Java领域优质创作者，全网30w+
阅读更多...
单片机毕业设计基于单片机的智能门禁系统的设计与实现

单片机毕业设计基于单片机的智能门禁系统的设计与实现

文章目录 前言资料获取设计介绍功能介绍程序代码部分参考 设计清单具体实现截图参考文献设计获取 前言 💗博主介绍：✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师，一名热衷于单片机技术探索与分享的博主、专注于 精通51/STM32/MSP430/AVR等单片机设计 主要对象是咱们电子相关专业的大学生，希望您们都共创辉煌！✌💗 👇🏻 精彩专栏 推荐订
阅读更多...
Spring的设计⽬标——《Spring技术内幕》

Spring的设计⽬标——《Spring技术内幕》

读《Spring技术内幕》第二版，计文柯著。 如果我们要简要地描述Spring的设计⽬标，可以这么说，Spring为开发者提供的是⼀个⼀站式的轻量级应⽤开发框架（平台）。 作为平台，Spring抽象了我们在 许多应⽤开发中遇到的共性问题；同时，作为⼀个轻量级的应⽤开发框架，Spring和传统的J2EE开发相⽐，有其⾃⾝的特点。 通过这些⾃⾝的特点，Spring充分体现了它的设计理念：在
阅读更多...
开题报告中的研究方法设计：AI能帮你做什么？

开题报告中的研究方法设计：AI能帮你做什么？

AIPaperGPT，论文写作神器~ https://www.aipapergpt.com/ 大家都准备开题报告了吗？研究方法部分是不是已经让你头疼到抓狂？ 别急，这可是大多数人都会遇到的难题！尤其是研究方法设计这一块，选定性还是定量，怎么搞才能符合老师的要求？ 每次到这儿，头脑一片空白。 好消息是，现在AI工具火得一塌糊涂，比如ChatGPT，居然能帮你在研究方法这块儿上出点主意。是不
阅读更多...
创业者该如何设计公司的股权架构

创业者该如何设计公司的股权架构

本文来自七八点联合IT橘子和车库咖啡的一系列关于设计公司股权结构的讲座。 主讲人何德文： 在公司发展的不同阶段，创业者都会面临公司股权架构设计问题： 1.合伙人合伙创业第一天，就会面临股权架构设计问题（合伙人股权设计）； 2.公司早期要引入天使资金，会面临股权架构设计问题（天使融资）； 3.公司有三五十号人，要激励中层管理与重要技术人员和公司长期走下去，会面临股权架构设计问题（员工股权激
阅读更多...
分布式文件系统设计

分布式文件系统设计

分布式文件系统是分布式领域的一个基础应用，其中最著名的毫无疑问是 HDFS/GFS。如今该领域已经趋向于成熟，但了解它的设计要点和思想，对我们将来面临类似场景 / 问题时，具有借鉴意义。并且，分布式文件系统并非只有 HDFS/GFS 这一种形态，在它之外，还有其他形态各异、各有千秋的产品形态，对它们的了解，也对扩展我们的视野有所俾益。本文试图分析和思考，在分布式文件系统领域，我们要解决哪些问题、有
阅读更多...
（入门篇）JavaScript 网页设计案例浅析-简单的交互式图片轮播

（入门篇）JavaScript 网页设计案例浅析-简单的交互式图片轮播

网页设计已经成为了每个前端开发者的必备技能，而 JavaScript 作为前端三大基础之一，更是为网页赋予了互动性和动态效果。本篇文章将通过一个简单的 JavaScript 案例，带你了解网页设计中的一些常见技巧和技术原理。今天就说一说一个常见的图片轮播效果。相信大家在各类电商网站、个人博客或者展示页面中，都看到过这种轮播图。它的核心功能是展示多张图片，并且用户可以通过点击按钮，左右切换图片。
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2