末日設計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.pswp.cn/bicheng/16936.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/16936.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/16936.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

研二學妹面試字節,竟倒在了ThreadLocal上,這是不要應屆生還是不要女生啊?

一、寫在開頭 今天和一個之前研二的學妹聊天&#xff0c;聊及她上周面試字節的情況&#xff0c;著實感受到了Java后端現在找工作的壓力啊&#xff0c;記得在18&#xff0c;19年的時候&#xff0c;研究生計算機專業的學生&#xff0c;背背八股文找個Java開發工作毫無問題&#x…

本地圖形客戶端查看git提交歷史 使用 TortoiseGit

要在本地查看提交記錄和修改歷史&#xff0c;可以使用 TortoiseGit 和 Git-SCM。這兩個工具都提供了強大的功能來管理和查看 Git 倉庫中的提交記錄和歷史修改。 使用 TortoiseGit 查看提交記錄和修改歷史 查看提交記錄&#xff08;Log&#xff09;&#xff1a; 右鍵點擊項目文…

抖音里賣什么最賺錢?4個冷門的高利潤商品,還有誰不知道!

哈嘍~我的電商月月 做抖音小店的新手朋友&#xff0c;一定很想知道&#xff0c;在抖音里賣什么最賺錢&#xff1f; 很多人都會推薦&#xff0c;日常百貨&#xff0c;小風扇&#xff0c;女裝&#xff0c;寵物用品等等&#xff0c;這些商品確實很好做&#xff0c;你們可以試試 …

Euraka詳解:實現微服務架構的關鍵組件

在當今互聯網時代&#xff0c;微服務架構已經成為許多企業構建和部署應用程序的首選方法之一。而要在微服務架構中實現高可用性和靈活性&#xff0c;服務發現和注冊是至關重要的一環。Eureka作為Netflix開源的服務發現組件&#xff0c;為實現這一目標提供了高效可靠的解決方案。…

備忘錄可以統計字數嗎?備忘錄里在哪查看字數?

在這個信息爆炸的時代&#xff0c;很多人喜歡使用備忘錄app來記錄生活中的點點滴滴。備忘錄不僅可以幫助我們記事、安排日程&#xff0c;還能提醒我們完成各種任務&#xff0c;是我們日常生活中不可或缺的小助手。 然而&#xff0c;在使用備忘錄時&#xff0c;有時我們會遇到需…

不用BookStack的企業都在用什么知識庫軟件

現如今&#xff0c;越來越多的企業使用知識庫軟件對企業內部知識進行管理。BookStack作為一款功能強大的開源知識庫軟件&#xff0c;成為很多企業的首選。但是還是有一部分人群認為BookStack不適合他們的企業那么他們都是在用什么別的知識庫軟件呢&#xff1f;LookLook同學今天…

《python本機環境多版本切換》-兩種方式以及具體使用--venv/pyenv+pycharm測試

阿丹&#xff1a; source myenv/bin/activate 在開發使用rasa的時候發現自己安裝的python環境是3.12的&#xff0c;和rasa不兼容&#xff0c;所以實踐一下更換多python環境。 使用虛擬環境 在Python中使用虛擬環境來切換Python版本是一個常見的做法&#xff0c;這可以幫助你…

Minikube部署單節點Kubernetes

1.1 Minikube部署單節點K8s Minikube是由Kubernetes社區維護的單機版的Kubernetes集群&#xff0c;支持macOS, Linux, andWindows等多種操作系統平臺&#xff0c;使用最新的官方stable版本&#xff0c;并支持Kubernetes的大部分功能&#xff0c;從基礎的容器編排管理&#xff0…

實用篇| huggingface網絡不通

之前文章《Transformer原理》中介紹過,Transformers 是由 Hugging Face 開發的一個包&#xff0c;支持加載目前絕大部分的預訓練模型。隨著 BERT、GPT 等大規模語言模型的興起&#xff0c;越來越多的公司和研究者采用 Transformers 庫來構建應用。 Hugging Face是一家美國公司…

Easy IP + DNAT(服務器NAT轉換)

第一章 Easy IP 1.1 一般家庭和企業使用的地址轉換方式 直接使用出接口的地址做轉換Easy IP適用于小規模居于網中的主機訪問Internet的場景如&#xff1a;家庭、小型網吧、小型辦公室中&#xff0c;這些地方內部主機不多&#xff0c;出接口可以通過撥號方式獲取一個臨時公網I…

2.Nginx上配置圖片訪問

在 Nginx 上配置圖片訪問涉及到在 Nginx 配置文件中添加相應的 location 塊來處理圖片請求。以下是一個基本的示例&#xff0c;演示如何配置 Nginx 以便在指定目錄中存儲和訪問圖片。 1.上傳圖片到服務器 首先&#xff0c;將你的圖片上傳到服務器的某個目錄&#xff0c;例如 …

視頻監控匯聚平臺LntonCVS通過GB/T28181國標協議實現視頻監控平臺的級聯方案

近年來&#xff0c;隨著網絡視頻監控應用范圍的拓展&#xff0c;越來越多的政府部門和跨區域行業單位對視頻監控的需求已經不局限于本地聯網監控。他們正在探索在原有的本地聯網監控基礎上&#xff0c;建設省級乃至全國范圍內的跨區域監控聯網&#xff0c;以全面打造數據共享平…

BUUCTF靶場[Reverse]內涵的文件、新年快樂

[reverse]內涵的文件 文件運行看一下 老規矩&#xff0c;拿到文件先用DIE查有沒有殼 沒有殼&#xff0c;且是一個32位的文件&#xff0c;用相對應的IDA打開 &#xff0c;有主函數&#xff08;mian&#xff09;&#xff0c;先點開 這里點開&#xff08;mian_0&#xff09;,發現…

Kotlin基礎之基本語法

Kotlin 簡介 Kotlin 是一種由 JetBrains 開發的靜態類型編程語言&#xff0c;設計用于與 Java 虛擬機 (JVM) 兼容&#xff0c;同時也可用于 Android、JavaScript&#xff08;通過 Kotlin/JS&#xff09;和原生&#xff08;通過 Kotlin/Native&#xff09;開發。Kotlin 旨在提供…

【詳細介紹WebKit的結構】

&#x1f3a5;博主&#xff1a;程序員不想YY啊 &#x1f4ab;CSDN優質創作者&#xff0c;CSDN實力新星&#xff0c;CSDN博客專家 &#x1f917;點贊&#x1f388;收藏?再看&#x1f4ab;養成習慣 ?希望本文對您有所裨益&#xff0c;如有不足之處&#xff0c;歡迎在評論區提出…

springboot + es7.12.3 elasticsearchRestTemplate使用記錄

private BoolQueryBuilder getQueryBuilder(QueryCollectWaterDataPageRequestVO requestVO) {BoolQueryBuilder queryBuilder QueryBuilders.boolQuery();if (!CollectionUtils.isEmpty(requestVO.getCompanyIds())) {//termsQuery 精確查找corpId字段為精確的多個值&#xf…

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 裝飾器模式 1.定義 Decorator Pattern 裝飾器模式是一種結構型設計模式&#xff0c;它允許在運行時給對象添加新的行為或職責&#xff0c;而無需修改對象的源代碼。這種模式通過創建一個包裝對象&#xff0c;也稱為裝飾器&#xff0c;來包裹原…

C 語言設計模式(行為型)

文章目錄 策略模式場景示例 迭代器模式場景示例 訪問者模式場景示例 觀察者模式場景示例 命令模式場景示例 模板方法模式場景示例 事件驅動模式場景示例 責任鏈模式場景示例 狀態模式場景示例 策略模式 策略模式&#xff08;Strategy Pattern&#xff09;是一種行為型設計模式…

銀行為什么要對網點開展神秘顧客檢測項目?

銀行業面臨的形勢復雜多變&#xff0c;包括技術創新、客戶行為變化、競爭加劇、監管環境變化、全球化與本地化平衡、經濟環境影響以及可持續發展和社會責任等多方面的挑戰和機遇。銀行需要通過種策略&#xff0c;積極應對這些變化&#xff0c;實現可持續發展。其中提升客戶服務…