用html5写一个飞机大战
时间: 2023-05-12 11:05:49 浏览: 62
非常感谢您的提问!以下是一个简单的 HTML5 飞机大战游戏的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 飞机大战</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
var canvas = document.getElementById("gameCanvas");
var ctx = canvas.getContext("2d");
// 玩家飞机
var player = {
x: canvas.width/2,
y: canvas.height-50,
width: 50,
height: 50,
speed: 5,
image: new Image(),
bullets: []
};
player.image.src = "player.png";
// 敌机
var enemies = [];
// 子弹
var bulletImage = new Image();
bulletImage.src = "bullet.png";
// 绘制玩家飞机
function drawPlayer() {
ctx.drawImage(player.image, player.x, player.y, player.width, player.height);
}
// 移动玩家飞机
function movePlayer() {
if (keys[37] && player.x > 0) { // 左箭头
player.x -= player.speed;
}
if (keys[39] && player.x < canvas.width - player.width) { // 右箭头
player.x += player.speed;
}
if (keys[38] && player.y > 0) { // 上箭头
player.y -= player.speed;
}
if (keys[40] && player.y < canvas.height - player.height) { // 下箭头
player.y += player.speed;
}
}
// 绘制敌机
function drawEnemies() {
for (var i = 0; i < enemies.length; i++) {
ctx.fillStyle = "red";
ctx.fillRect(enemies[i].x, enemies[i].y, enemies[i].width, enemies[i].height);
}
}
// 移动敌机
function moveEnemies() {
for (var i = 0; i < enemies.length; i++) {
enemies[i].y += 3;
if (enemies[i].y > canvas.height) {
enemies.splice(i, 1);
}
}
}
// 绘制子弹
function drawBullets() {
for (var i = 0; i < player.bullets.length; i++) {
ctx.drawImage(bulletImage, player.bullets[i].x, player.bullets[i].y, 10, 20);
}
}
// 移动子弹
function moveBullets() {
for (var i = 0; i < player.bullets.length; i++) {
player.bullets[i].y -= 5;
if (player.bullets[i].y < 0) {
player.bullets.splice(i, 1);
}
}
}
// 碰撞检测
function checkCollisions() {
for (var i = 0; i < enemies.length; i++) {
if (player.x < enemies[i].x + enemies[i].width &&
player.x + player.width > enemies[i].x &&
player.y < enemies[i].y + enemies[i].height &&
player.y + player.height > enemies[i].y) {
alert("游戏结束!");
location.reload();
}
}
for (var i = 0; i < player.bullets.length; i++) {
for (var j = 0; j < enemies.length; j++) {
if (player.bullets[i].x < enemies[j].x + enemies[j].width &&
player.bullets[i].x + 10 > enemies[j].x &&
player.bullets[i].y < enemies[j].y + enemies[j].height &&
player.bullets[i].y + 20 > enemies[j].y) {
enemies.splice(j, 1);
player.bullets.splice(i, 1);
break;
}
}
}
}
// 游戏循环
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
movePlayer();
if (Math.random() < 0.02) {
enemies.push({
x: Math.random() * (canvas.width - 50),
y: -50,
width: 50,
height: 50
});
}
drawEnemies();
moveEnemies();
drawBullets();
moveBullets();
checkCollisions();
requestAnimationFrame(gameLoop);
}
// 键盘事件
var keys = {};
window.addEventListener("keydown", function(event) {
keys[event.keyCode] = true;
});
window.addEventListener("keyup", function(event) {
delete keys[event.keyCode];
});
gameLoop();
</script>
</body>
</html>
```
请注意,这只是一个简单的示例,您可以根据自己的需求进行修改和扩展。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![html](https://img-home.csdnimg.cn/images/20210720083451.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)