末日设计1.00 - 技术栈

故事背景:

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

玩法介绍:

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

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

html 复制代码

<!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>