故事背景:
在不遠的未來,世界陷入了末日危機。資源枯竭、社會秩序崩潰,幸存者們為了生存,不得不拿起武器爭奪每一寸土地和每一口食物。在這個混亂的世界中,你是一名傳奇狙擊手,憑借超凡的射擊技巧和生存智慧,成為了末日中的一道光。你的任務是保護自己的領地,擊退一波又一波的入侵者。每個命中的目標都是對生存的宣言,每一次成功的防御都是對希望的堅持。
玩法介紹:
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>
?