js写飞机大战小游戏
第一步,写一个html页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飞机大战</title> <style> body { margin: 0; } canvas { display: block; background-color: #000; } </style> </head> <body> <canvas id="gameCanvas" width="800" height="600"></canvas> <script src="game.js"></script> </body> </html>
第二步,就是JS文件了。js文件名字 game.js 代码如下
const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); let player = { x: canvas.width / 2, y: canvas.height - 30, width: 50, height: 30, speed: 5, dx: 0 }; let enemies = []; let bullets = []; let keys = {}; let gameRunning = true; function init() { document.addEventListener('keydown', keyDownHandler, false); document.addEventListener('keyup', keyUpHandler, false); setInterval(mainLoop, 1000 / 60); // 每秒60帧 setInterval(spawnEnemy, 1000); // 每秒生成一个敌人 } function mainLoop() { if (!gameRunning) return; clearCanvas(); movePlayer(); moveBullets(); moveEnemies(); drawPlayer(); drawBullets(); drawEnemies(); checkCollisions(); } function clearCanvas() { ctx.clearRect(0, 0, canvas.width, canvas.height); } function drawPlayer() { ctx.fillStyle = "red"; ctx.fillRect(player.x, player.y, player.width, player.height); } function movePlayer() { if (keys.right) { player.dx = player.speed; } else if (keys.left) { player.dx = -player.speed; } else { player.dx = 0; } player.x += player.dx; if (player.x < 0) { player.x = 0; } else if (player.x + player.width > canvas.width) { player.x = canvas.width - player.width; } } function spawnEnemy() { let enemy = { x: Math.random() * (canvas.width - 50), y: 0, width: 50, height: 30, speed: 2 }; enemies.push(enemy); } function moveEnemies() { for (let i = 0; i < enemies.length; i++) { enemies[i].y += enemies[i].speed; if (enemies[i].y > canvas.height) { enemies.splice(i, 1); i--; } } } function drawEnemies() { for (let enemy of enemies) { ctx.fillStyle = "blue"; ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height); } } function fireBullet() { let bullet = { x: player.x + player.width / 2 - 2, y: player.y, width: 4, height: 10, speed: 7 }; bullets.push(bullet); } function moveBullets() { for (let i = 0; i < bullets.length; i++) { bullets[i].y -= bullets[i].speed; if (bullets[i].y < 0) { bullets.splice(i, 1); i--; } } } function drawBullets() { for (let bullet of bullets) { ctx.fillStyle = "yellow"; ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height); } } function checkCollisions() { for (let i = 0; i < enemies.length; i++) { let enemy = enemies[i]; if (player.x < enemy.x + enemy.width && player.x + player.width > enemy.x && player.y < enemy.y + enemy.height && player.y + player.height > enemy.y) { gameRunning = false; alert("游戏结束!"); return; } for (let j = 0; j < bullets.length; j++) { let bullet = bullets[j]; if (bullet.x < enemy.x + enemy.width && bullet.x + bullet.width > enemy.x && bullet.y < enemy.y + enemy.height && bullet.y + bullet.height > enemy.y) { enemies.splice(i, 1); bullets.splice(j, 1); i--; j--; break; } } } } function keyDownHandler(e) { if (e.key === 'Right' || e.key === 'ArrowRight') { keys.right = true; } else if (e.key === 'Left' || e.key === 'ArrowLeft') { keys.left = true; } else if (e.key === ' ' || e.key === 'Space') { fireBullet(); } } function keyUpHandler(e) { if (e.key === 'Right' || e.key === 'ArrowRight') { keys.right = false; } else if (e.key === 'Left' || e.key === 'ArrowLeft') { keys.left = false; } } init();
将game.js 和 html文件放到同级目录,运行html文件,就可以玩了
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· 2 本地部署DeepSeek模型构建本地知识库+联网搜索详细步骤