HTML无尽射击小游戏包含源码，纯HTML+CSS+JS

1.HTML无尽射击小游戏包含源码，纯HTML+CSS+JS。

2.游戏画面；

3.下面是纯HTML代码，直接复制粘贴。

无尽射击小游戏

    <!-- UI元素 -->
    <div id="ui">
        <div>得分: <span id="score">0</span></div>
        <div>生命值: <span id="health">3</span></div>
    </div>
    
    <!-- 开始屏幕 -->
    <div id="start-screen">
        <h1>无尽射击小游戏</h1>
        <p>使用左右箭头键或A/D键移动，空格键或点击屏幕射击</p>
        <button id="start-btn" class="btn">开始游戏</button>
    </div>
    
    <!-- 游戏结束屏幕 -->
    <div id="game-over-screen">
        <h1>游戏结束</h1>
        <p>你的得分: <span id="final-score">0</span></p>
        <button id="restart-btn" class="btn">重新开始</button>
    </div>
</div>

<script>
    // 游戏状态
    const game = {
        isRunning: false,
        score: 0,
        health: 3,
        playerSpeed: 8,
        bulletSpeed: 10,
        enemySpeed: 3,
        enemySpawnRate: 1500, // 毫秒
        lastEnemySpawn: 0,
        keys: {},
        bullets: [],
        enemies: [],
        lastFrameTime: 0,
        difficulty: 1
    };

    // DOM元素
    const player = document.getElementById('player');
    const gameContainer = document.getElementById('game-container');
    const scoreElement = document.getElementById('score');
    const healthElement = document.getElementById('health');
    const startScreen = document.getElementById('start-screen');
    const gameOverScreen = document.getElementById('game-over-screen');
    const startBtn = document.getElementById('start-btn');
    const restartBtn = document.getElementById('restart-btn');
    const finalScoreElement = document.getElementById('final-score');

    // 玩家位置
    let playerPos = {
        x: window.innerWidth / 2 - 25,
        y: window.innerHeight - 150
    };

    // 初始化游戏
    function init() {
        // 重置游戏状态
        game.isRunning = true;
        game.score = 0;
        game.health = 3;
        game.bullets = [];
        game.enemies = [];
        game.difficulty = 1;
        
        // 重置玩家位置
        playerPos = {
            x: window.innerWidth / 2 - 25,
            y: window.innerHeight - 150
        };
        updatePlayerPosition();
        
        // 更新UI
        scoreElement.textContent = game.score;
        healthElement.textContent = game.health;
        
        // 隐藏开始屏幕
        startScreen.style.display = 'none';
        gameOverScreen.style.display = 'none';
        
        // 开始游戏循环
        requestAnimationFrame(gameLoop);
    }

    // 游戏主循环
    function gameLoop(timestamp) {
        if (!game.isRunning) return;
        
        // 计算帧间隔时间
        const deltaTime = timestamp - game.lastFrameTime;
        game.lastFrameTime = timestamp;
        
        // 处理玩家移动
        handlePlayerMovement();
        
        // 生成敌人
        if (timestamp - game.lastEnemySpawn > game.enemySpawnRate / game.difficulty) {
            spawnEnemy();
            game.lastEnemySpawn = timestamp;
        }
        
        // 更新子弹位置
        updateBullets();
        
        // 更新敌人位置
        updateEnemies();
        
        // 检测碰撞
        checkCollisions();
        
        // 增加难度
        increaseDifficulty(timestamp);
        
        // 继续游戏循环
        requestAnimationFrame(gameLoop);
    }

    // 处理玩家移动
    function handlePlayerMovement() {
        // 左右移动
        if ((game.keys['ArrowLeft'] || game.keys['a'] || game.keys['A']) && playerPos.x > 0) {
            playerPos.x -= game.playerSpeed;
        }
        if ((game.keys['ArrowRight'] || game.keys['d'] || game.keys['D']) && playerPos.x < window.innerWidth - 50) {
            playerPos.x += game.playerSpeed;
        }
        
        // 更新玩家位置
        updatePlayerPosition();
    }

    // 更新玩家位置
    function updatePlayerPosition() {
        player.style.left = playerPos.x + 'px';
        player.style.top = playerPos.y + 'px';
    }

    // 射击
    function shoot() {
        if (!game.isRunning) return;
        
        // 创建子弹元素
        const bullet = document.createElement('div');
        bullet.className = 'bullet';
        bullet.style.left = (playerPos.x + 20) + 'px'; // 子弹从玩家中心发射
        bullet.style.top = (playerPos.y - 20) + 'px'; // 从玩家顶部发射
        gameContainer.appendChild(bullet);
        
        // 添加到子弹数组
        game.bullets.push({
            element: bullet,
            x: playerPos.x + 20,
            y: playerPos.y - 20
        });
    }

    // 更新子弹位置
    function updateBullets() {
        for (let i = game.bullets.length - 1; i >= 0; i--) {
            const bullet = game.bullets[i];
            
            // 更新子弹位置
            bullet.y -= game.bulletSpeed;
            bullet.element.style.top = bullet.y + 'px';
            
            // 如果子弹超出屏幕，移除它
            if (bullet.y < -20) {
                gameContainer.removeChild(bullet.element);
                game.bullets.splice(i, 1);
            }
        }
    }

    // 生成敌人
    function spawnEnemy() {
        // 创建敌人元素
        const enemy = document.createElement('div');
        enemy.className = 'enemy';
        
        // 随机位置
        const x = Math.random() * (window.innerWidth - 40);
        
        enemy.style.left = x + 'px';
        enemy.style.top = '-40px'; // 从屏幕顶部生成
        gameContainer.appendChild(enemy);
        
        // 添加到敌人数组
        game.enemies.push({
            element: enemy,
            x: x,
            y: -40
        });
    }

    // 更新敌人位置
    function updateEnemies() {
        for (let i = game.enemies.length - 1; i >= 0; i--) {
            const enemy = game.enemies[i];
            
            // 更新敌人位置
            enemy.y += game.enemySpeed * game.difficulty;
            enemy.element.style.top = enemy.y + 'px';
            
            // 如果敌人超出屏幕底部，移除它并减少生命值
            if (enemy.y > window.innerHeight) {
                gameContainer.removeChild(enemy.element);
                game.enemies.splice(i, 1);
                game.health--;
                healthElement.textContent = game.health;
                
                // 检查游戏是否结束
                if (game.health <= 0) {
                    endGame();
                }
            }
        }
    }

    // 检测碰撞
    function checkCollisions() {
        // 子弹和敌人的碰撞检测
        for (let i = game.bullets.length - 1; i >= 0; i--) {
            const bullet = game.bullets[i];
            
            for (let j = game.enemies.length - 1; j >= 0; j--) {
                const enemy = game.enemies[j];
                
                // 简单的矩形碰撞检测
                if (
                    bullet.x < enemy.x + 40 &&
                    bullet.x + 10 > enemy.x &&
                    bullet.y < enemy.y + 40 &&
                    bullet.y + 20 > enemy.y
                ) {
                    // 创建爆炸效果
                    createExplosion(enemy.x, enemy.y);
                    
                    // 移除子弹和敌人
                    gameContainer.removeChild(bullet.element);
                    game.bullets.splice(i, 1);
                    
                    gameContainer.removeChild(enemy.element);
                    game.enemies.splice(j, 1);
                    
                    // 增加得分
                    game.score += 10;
                    scoreElement.textContent = game.score;
                    
                    // 由于已经移除了子弹和敌人，跳出内层循环
                    break;
                }
            }
        }
        
        // 玩家和敌人的碰撞检测
        for (let i = game.enemies.length - 1; i >= 0; i--) {
            const enemy = game.enemies[i];
            
            if (
                playerPos.x < enemy.x + 40 &&
                playerPos.x + 50 > enemy.x &&
                playerPos.y < enemy.y + 40 &&
                playerPos.y + 50 > enemy.y
            ) {
                // 创建爆炸效果
                createExplosion(enemy.x, enemy.y);
                
                // 移除敌人
                gameContainer.removeChild(enemy.element);
                game.enemies.splice(i, 1);
                
                // 减少生命值
                game.health--;
                healthElement.textContent = game.health;
                
                // 检查游戏是否结束
                if (game.health <= 0) {
                    endGame();
                }
            }
        }
    }

    // 创建爆炸效果
    function createExplosion(x, y) {
        const explosion = document.createElement('div');
        explosion.className = 'explosion';
        explosion.style.left = (x + 20 - 30) + 'px'; // 居中爆炸效果
        explosion.style.top = (y + 20 - 30) + 'px';
        gameContainer.appendChild(explosion);
        
        // 爆炸动画结束后移除元素
        setTimeout(() => {
            if (explosion.parentNode) {
                gameContainer.removeChild(explosion);
            }
        }, 500);
    }

    // 增加游戏难度
    function increaseDifficulty(timestamp) {
        // 每30秒增加一次难度
        if (timestamp % 30000 < 16) { // 大约每30秒一次
            game.difficulty += 0.1;
            
            // 调整敌人生成速率
            game.enemySpawnRate = Math.max(500, 1500 - (game.difficulty - 1) * 200);
        }
    }

    // 结束游戏
    function endGame() {
        game.isRunning = false;
        
        // 显示游戏结束屏幕
        finalScoreElement.textContent = game.score;
        gameOverScreen.style.display = 'flex';
    }

    // 事件监听器
    function setupEventListeners() {
        // 键盘按下事件
        window.addEventListener('keydown', (e) => {
            game.keys[e.key] = true;
            
            // 空格键射击
            if (e.key === ' ' && game.isRunning) {
                shoot();
            }
        });
        
        // 键盘释放事件
        window.addEventListener('keyup', (e) => {
            game.keys[e.key] = false;
        });
        
        // 鼠标点击事件（射击）
        gameContainer.addEventListener('click', () => {
            if (game.isRunning) {
                shoot();
            }
        });
        
        // 开始按钮
        startBtn.addEventListener('click', init);
        
        // 重新开始按钮
        restartBtn.addEventListener('click', init);
        
        // 窗口大小改变事件
        window.addEventListener('resize', () => {
            // 确保玩家不会移出屏幕
            if (playerPos.x > window.innerWidth - 50) {
                playerPos.x = window.innerWidth - 50;
                updatePlayerPosition();
            }
        });
    }

    // 初始化事件监听器
    setupEventListeners();
</script>