javascipt/H5飞机大战资源-CSDN文库

共1个文件

html：1个

需积分: 9 149 浏览量 2023-04-15 21:23:25 上传评论收藏 1KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

飞机大战.rar （1个子文件）

飞机大战.html 3KB

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>飞机大战</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="gameCanvas" width="400" height="600"></canvas> <script> // 获取画布和上下文 var canvas = document.getElementById("gameCanvas"); var ctx = canvas.getContext("2d"); // 定义游戏状态 var score = 0; var gameOver = false; // 定义玩家飞机 var player = { x: canvas.width / 2, y: canvas.height - 50, width: 50, height: 50, speed: 5, bullets: [] }; // 定义敌机 var enemies = []; // 定义键盘事件监听器 document.addEventListener("keydown", function(event) { if (event.key === "ArrowLeft") { player.x -= player.speed; } else if (event.key === "ArrowRight") { player.x += player.speed; } else if (event.key === " ") { player.bullets.push({ x: player.x + player.width / 2, y: player.y, width: 5, height: 10, speed: 10 }); } }); // 定义游戏循环 function gameLoop() { // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制玩家飞机 ctx.fillStyle = "blue"; ctx.fillRect(player.x, player.y, player.width, player.height); // 绘制玩家子弹 ctx.fillStyle = "red"; player.bullets.forEach(function(bullet) { ctx.fillRect(bullet.x, bullet.y, bullet.width, bullet.height); bullet.y -= bullet.speed; }); // 绘制敌机 ctx.fillStyle = "green"; enemies.forEach(function(enemy) { ctx.fillRect(enemy.x, enemy.y, enemy.width, enemy.height); enemy.y += enemy.speed; }); // 检测碰撞 player.bullets.forEach(function(bullet) { enemies.forEach(function(enemy, index) { 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) { player.bullets.splice(player.bullets.indexOf(bullet), 1); enemies.splice(index, 1); score += 10; } }); }); enemies.forEach(function(enemy) { if (enemy.x < player.x + player.width && enemy.x + enemy.width > player.x && enemy.y < player.y + player.height && enemy.y + enemy.height > player.y) { gameOver = true; } }); // 更新分数 ctx.fillStyle = "black"; ctx.font = "20px Arial"; ctx.fillText("Score: " + score, 10, 30); // 更新游戏状态 if (!gameOver) { window.requestAnimationFrame(gameLoop); } else { ctx.fillText("Game Over", canvas.width / 2 - 50, canvas.height / 2); } } // 初始化敌机 setInterval(function() { enemies.push({ x: Math.random() * (canvas.width - 50), y: -50, width: 50, height: 50, speed: Math.random() * 5 + 1 }); }, 1000); // 启动游戏循环 gameLoop(); </script> </body> </html>

评论收藏

内容反馈