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

    <!-- 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();// 更新UIscoreElement.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>