用HTML写一个飞机大战游戏
以下是一个简单的用HTML和JavaScript编写的飞机大战游戏的示例：
<!DOCTYPE html>
<html>
<head>
<title>飞机大战游戏</title>
<style>
#game-container {
position: relative;
width: 800px;
height: 600px;
border: 1px solid black;
}
#player {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
}
.enemy {
position: absolute;
width: 50px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<h1>飞机大战游戏</h1>
<div id="game-container">
<div id="player"></div>
</div>
<script>
// 获取游戏容器和玩家飞机元素
var gameContainer = document.getElementById('game-container');
var player = document.getElementById('player');
// 初始化玩家飞机位置
var playerX = 375;
var playerY = 500;
player.style.left = playerX + 'px';
player.style.top = playerY + 'px';
// 监听键盘事件，移动玩家飞机
window.addEventListener('keydown', function(event) {
switch (event.keyCode) {
case 37: // 左箭头
playerX -= 10;
if (playerX < 0) playerX = 0;
break;
case 39: // 右箭头
playerX += 10;
if (playerX > 750) playerX = 750;
break;
}
player.style.left = playerX + 'px';
});
// 创建敌机
function createEnemy() {
var enemy = document.createElement('div');
enemy.className = 'enemy';
enemy.style.left = Math.random() * 750 + 'px';
enemy.style.top = '0px';
gameContainer.appendChild(enemy);
// 移动敌机
var interval = setInterval(function() {
var enemyY = parseInt(enemy.style.top) + 10;
if (enemyY > 550) {
clearInterval(interval);
gameContainer.removeChild(enemy);
} else {
enemy.style.top = enemyY + 'px';
}
// 检测碰撞
if (isColliding(player, enemy)) {
alert('游戏结束！');
clearInterval(interval);
location.reload();
}
}, 100);
}
// 检测碰撞
function isColliding(element1, element2) {
var rect1 = element1.getBoundingClientRect();
var rect2 = element2.getBoundingClientRect();
return !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom);
}
// 定时创建敌机
setInterval(createEnemy, 1000);
</script>
</body>
</html>
这个示例中，游戏容器使用一个固定大小的 <div> 元素表示，并包含了一个玩家飞机元素和敌机元素。玩家飞机可以通过键盘的左右箭头键来移动，敌机会不断地从顶部出现并向下移动。游戏会检测玩家飞机和敌机的碰撞，如果发生碰撞则游戏结束
原文地址: https://www.cveoy.top/t/topic/hF7x 著作权归作者所有。请勿转载和采集!