当前位置：首页 > news >正文

DeepSeek飞机大战小游戏HTML5(附源码)

news 2025/7/6 9:17:12

用DeepSeek帮忙生成的飞机大战小游戏网页版，基于HTML5。
提示词prompt
帮我做一个网页版的飞机大战游戏 html5的
在这里插入图片描述

游戏功能说明

玩家控制：
使用键盘方向键或WASD移动飞机
空格键发射子弹
移动设备支持触摸控制
游戏机制：
敌机会从屏幕顶部随机位置出现
击中敌机获得10分
随着分数增加，敌机出现频率会提高
碰到敌机游戏结束
界面：
开始界面
游戏界面（显示当前分数）
结束界面（显示最终分数）
如有需要，可进一步改进游戏。
将上述代码保存为HTML文件，用浏览器打开即可开始游戏。
飞机大战小游戏源码如下：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>飞机大战</title><style>body {margin: 0;padding: 0;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #222;overflow: hidden;font-family: Arial, sans-serif;}#gameContainer {position: relative;width: 400px;height: 600px;background-color: #000;overflow: hidden;}#gameCanvas {background-color: #000;}#startScreen, #gameOverScreen {position: absolute;top: 0;left: 0;width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;color: white;background-color: rgba(0, 0, 0, 0.7);}#gameOverScreen {display: none;}h1 {color: #ffcc00;margin-bottom: 30px;text-shadow: 0 0 10px #ff6600;}button {padding: 10px 20px;font-size: 18px;background-color: #ff6600;color: white;border: none;border-radius: 5px;cursor: pointer;transition: all 0.3s;}button:hover {background-color: #ff9900;transform: scale(1.05);}#scoreDisplay {position: absolute;top: 10px;left: 10px;color: white;font-size: 20px;z-index: 100;}</style>
</head>
<body><div id="gameContainer"><canvas id="gameCanvas" width="400" height="600"></canvas><div id="scoreDisplay">分数: 0</div><div id="startScreen"><h1>飞机大战</h1><button id="startButton">开始游戏</button></div><div id="gameOverScreen"><h1>游戏结束</h1><p id="finalScore">最终分数: 0</p><button id="restartButton">重新开始</button></div></div><script>// 游戏变量const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');const startScreen = document.getElementById('startScreen');const gameOverScreen = document.getElementById('gameOverScreen');const startButton = document.getElementById('startButton');const restartButton = document.getElementById('restartButton');const scoreDisplay = document.getElementById('scoreDisplay');const finalScoreDisplay = document.getElementById('finalScore');let gameRunning = false;let score = 0;// 玩家飞机const player = {x: canvas.width / 2 - 25,y: canvas.height - 80,width: 50,height: 50,speed: 5,color: '#3498db',isMovingLeft: false,isMovingRight: false,isMovingUp: false,isMovingDown: false};// 子弹数组let bullets = [];const bulletSpeed = 7;const bulletSize = 5;// 敌机数组let enemies = [];const enemySpeed = 2;let enemySpawnRate = 60; // 帧数// 游戏循环变量let animationId;let frameCount = 0;// 初始化游戏function initGame() {score = 0;scoreDisplay.textContent = `分数: ${score}`;bullets = [];enemies = [];frameCount = 0;player.x = canvas.width / 2 - 25;player.y = canvas.height - 80;gameRunning = true;startScreen.style.display = 'none';gameOverScreen.style.display = 'none';gameLoop();}// 游戏主循环function gameLoop() {if (!gameRunning) return;update();render();animationId = requestAnimationFrame(gameLoop);}// 更新游戏状态function update() {// 移动玩家if (player.isMovingLeft && player.x > 0) {player.x -= player.speed;}if (player.isMovingRight && player.x < canvas.width - player.width) {player.x += player.speed;}if (player.isMovingUp && player.y > 0) {player.y -= player.speed;}if (player.isMovingDown && player.y < canvas.height - player.height) {player.y += player.speed;}// 移动子弹for (let i = bullets.length - 1; i >= 0; i--) {bullets[i].y -= bulletSpeed;// 移除超出屏幕的子弹if (bullets[i].y < 0) {bullets.splice(i, 1);}}// 生成敌机frameCount++;if (frameCount % enemySpawnRate === 0) {spawnEnemy();// 随着分数增加，敌机生成速度加快if (enemySpawnRate > 20) {enemySpawnRate = Math.max(20, 60 - Math.floor(score / 10));}}// 移动敌机for (let i = enemies.length - 1; i >= 0; i--) {enemies[i].y += enemies[i].speed;// 移除超出屏幕的敌机if (enemies[i].y > canvas.height) {enemies.splice(i, 1);}}// 检测碰撞：子弹和敌机for (let i = bullets.length - 1; i >= 0; i--) {for (let j = enemies.length - 1; j >= 0; j--) {if (checkCollision(bullets[i], enemies[j])) {// 移除子弹和敌机bullets.splice(i, 1);enemies.splice(j, 1);// 增加分数score += 10;scoreDisplay.textContent = `分数: ${score}`;break;}}}// 检测碰撞：玩家和敌机for (let i = enemies.length - 1; i >= 0; i--) {if (checkCollision(player, enemies[i])) {gameOver();break;}}}// 渲染游戏function render() {// 清空画布ctx.clearRect(0, 0, canvas.width, canvas.height);// 绘制背景ctx.fillStyle = '#000033';ctx.fillRect(0, 0, canvas.width, canvas.height);// 绘制星星背景drawStars();// 绘制玩家drawPlayer();// 绘制子弹drawBullets();// 绘制敌机drawEnemies();}// 绘制玩家飞机function drawPlayer() {ctx.fillStyle = player.color;// 机身ctx.beginPath();ctx.moveTo(player.x + player.width / 2, player.y);ctx.lineTo(player.x + player.width, player.y + player.height);ctx.lineTo(player.x, player.y + player.height);ctx.closePath();ctx.fill();// 机翼装饰ctx.fillStyle = '#2980b9';ctx.beginPath();ctx.moveTo(player.x + player.width / 2, player.y + 10);ctx.lineTo(player.x + player.width - 10, player.y + player.height - 10);ctx.lineTo(player.x + 10, player.y + player.height - 10);ctx.closePath();ctx.fill();}// 绘制子弹function drawBullets() {ctx.fillStyle = '#ffcc00';bullets.forEach(bullet => {ctx.beginPath();ctx.arc(bullet.x, bullet.y, bullet.size, 0, Math.PI * 2);ctx.fill();});}// 绘制敌机function drawEnemies() {enemies.forEach(enemy => {ctx.fillStyle = enemy.color;// 机身ctx.beginPath();ctx.moveTo(enemy.x, enemy.y);ctx.lineTo(enemy.x + enemy.width, enemy.y);ctx.lineTo(enemy.x + enemy.width / 2, enemy.y + enemy.height);ctx.closePath();ctx.fill();// 机翼装饰ctx.fillStyle = '#c0392b';ctx.beginPath();ctx.moveTo(enemy.x + 5, enemy.y + 5);ctx.lineTo(enemy.x + enemy.width - 5, enemy.y + 5);ctx.lineTo(enemy.x + enemy.width / 2, enemy.y + enemy.height - 5);ctx.closePath();ctx.fill();});}// 绘制星星背景function drawStars() {ctx.fillStyle = 'white';for (let i = 0; i < 100; i++) {const x = Math.random() * canvas.width;const y = (frameCount + i * 100) % canvas.height;const size = Math.random() * 2;ctx.beginPath();ctx.arc(x, y, size, 0, Math.PI * 2);ctx.fill();}}// 生成敌机function spawnEnemy() {const size = 30 + Math.random() * 20;const enemy = {x: Math.random() * (canvas.width - size),y: -size,width: size,height: size,speed: enemySpeed + Math.random() * 2,color: '#e74c3c'};enemies.push(enemy);}// 发射子弹function fireBullet() {if (!gameRunning) return;const bullet = {x: player.x + player.width / 2,y: player.y,size: bulletSize};bullets.push(bullet);}// 碰撞检测function checkCollision(obj1, obj2) {return obj1.x < obj2.x + obj2.width &&obj1.x + (obj1.width || obj1.size) > obj2.x &&obj1.y < obj2.y + obj2.height &&obj1.y + (obj1.height || obj1.size) > obj2.y;}// 游戏结束function gameOver() {gameRunning = false;cancelAnimationFrame(animationId);finalScoreDisplay.textContent = `最终分数: ${score}`;gameOverScreen.style.display = 'flex';}// 事件监听startButton.addEventListener('click', initGame);restartButton.addEventListener('click', initGame);// 键盘控制document.addEventListener('keydown', (e) => {if (!gameRunning) return;switch (e.key) {case 'ArrowLeft':case 'a':player.isMovingLeft = true;break;case 'ArrowRight':case 'd':player.isMovingRight = true;break;case 'ArrowUp':case 'w':player.isMovingUp = true;break;case 'ArrowDown':case 's':player.isMovingDown = true;break;case ' ':fireBullet();break;}});document.addEventListener('keyup', (e) => {switch (e.key) {case 'ArrowLeft':case 'a':player.isMovingLeft = false;break;case 'ArrowRight':case 'd':player.isMovingRight = false;break;case 'ArrowUp':case 'w':player.isMovingUp = false;break;case 'ArrowDown':case 's':player.isMovingDown = false;break;}});// 触摸控制（移动设备）let touchX = 0;canvas.addEventListener('touchstart', (e) => {if (!gameRunning) return;e.preventDefault();touchX = e.touches[0].clientX;// 触摸屏幕上半部分发射子弹if (e.touches[0].clientY < canvas.height / 2) {fireBullet();}});canvas.addEventListener('touchmove', (e) => {if (!gameRunning) return;e.preventDefault();const newTouchX = e.touches[0].clientX;const deltaX = newTouchX - touchX;player.x += deltaX;// 限制玩家不超出屏幕if (player.x < 0) player.x = 0;if (player.x > canvas.width - player.width) {player.x = canvas.width - player.width;}touchX = newTouchX;});// 点击屏幕发射子弹（移动设备）canvas.addEventListener('click', (e) => {if (!gameRunning) return;// 点击屏幕上半部分发射子弹if (e.clientY < canvas.height / 2) {fireBullet();}});</script>
</body>
</html>