射击小游戏

小球射击游戏 body { margin: 0; overflow: hidden; background: #1a1a1a; } #gameCanvas { background: #000; } #score { position: fixed; top: 20px; left: 20px; color: white; font-size: 24px; font-family: Arial; }

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const scoreElement = document.getElementById('score');

    // 设置画布尺寸
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight - 5;

    // 游戏对象
    const player = {
        x: canvas.width/2,
        y: canvas.height - 50,
        width: 60,
        height: 20,
        color: '#00ff00',
        speed: 8
    };

    let bullets = [];
    let enemies = [];
    let score = 0;
    let gameOver = false;

    // 事件监听
    document.addEventListener('mousemove', movePlayer);
    document.addEventListener('click', shoot);

    function movePlayer(e) {
        player.x = e.clientX - player.width/2;
    }

    function shoot() {
        bullets.push({
            x: player.x + player.width/2,
            y: player.y,
            radius: 5,
            color: '#ff0000',
            speed: 10
        });
    }

    function createEnemy() {
        if(Math.random() < 0.02) {
            enemies.push({
                x: Math.random() * (canvas.width - 30),
                y: 0,
                radius: 15,
                color: '#ffff00',
                speed: 3
            });
        }
    }

    function update() {
        if(gameOver) return;

        // 更新子弹
        bullets = bullets.filter(bullet => {
            bullet.y -= bullet.speed;
            return bullet.y > 0;
        });

        // 更新敌人
        enemies = enemies.filter(enemy => {
            enemy.y += enemy.speed;
            
            // 碰撞检测
            const hit = bullets.some(bullet => {
                const dx = bullet.x - enemy.x;
                const dy = bullet.y - enemy.y;
                return Math.sqrt(dx*dx + dy*dy) < bullet.radius + enemy.radius;
            });

            if(hit) score += 10;
            
            if(enemy.y > canvas.height) {
                gameOver = true;
                alert(`游戏结束！得分：${score}`);
            }

            return !hit && enemy.y < canvas.height;
        });

        createEnemy();
        draw();
        requestAnimationFrame(update);
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // 绘制玩家
        ctx.fillStyle = player.color;
        ctx.fillRect(player.x, player.y, player.width, player.height);

        // 绘制子弹
        bullets.forEach(bullet => {
            ctx.beginPath();
            ctx.arc(bullet.x, bullet.y, bullet.radius, 0, Math.PI*2);
            ctx.fillStyle = bullet.color;
            ctx.fill();
        });

        // 绘制敌人
        enemies.forEach(enemy => {
            ctx.beginPath();
            ctx.arc(enemy.x, enemy.y, enemy.radius, 0, Math.PI*2);
            ctx.fillStyle = enemy.color;
            ctx.fill();
        });

        // 更新得分
        scoreElement.textContent = `得分: ${score}`;
    }

    // 启动游戏
    update();
</script>

// 玩家控制： - 鼠标左右移动控制炮台 - 点击鼠标发射子弹

// 游戏机制：

• 随机生成黄色小球敌人（生成概率 2%）
• 子弹与敌人碰撞检测（圆形碰撞算法）
• 实时分数统计（每个敌人+10分）

// 失败条件：

• 当敌人到达画面底部时游戏结束

// 视觉效果：

• 黑色星空背景
• 绿色玩家炮台
• 红色子弹轨迹
• 黄色敌人小球