请帮我用JavaScript写一个网页飞机大战
当然可以帮你写一个网页飞机大战游戏。下面是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<title>飞机大战</title>
<style>
#game-board {
background-color: black;
width: 600px;
height: 400px;
position: relative;
}
#player {
background-color: blue;
width: 50px;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
}
.enemy {
background-color: red;
width: 30px;
height: 30px;
position: absolute;
top: -30px;
}
</style>
</head>
<body>
<div id="game-board">
<div id="player"></div>
</div>
<script>
var player = document.getElementById("player");
var gameBoard = document.getElementById("game-board");
var enemies = [];
var score = 0;
function movePlayer(event) {
var x = event.clientX;
player.style.left = x + "px";
}
function createEnemy() {
var enemy = document.createElement("div");
enemy.className = "enemy";
enemy.style.left = Math.random() * 550 + "px";
gameBoard.appendChild(enemy);
enemies.push(enemy);
}
function moveEnemies() {
for (var i = 0; i < enemies.length; i++) {
var enemy = enemies[i];
var y = parseInt(enemy.style.top);
if (y >= 400) {
enemy.parentNode.removeChild(enemy);
enemies.splice(i, 1);
score++;
updateScore();
i--;
} else {
enemy.style.top = (y + 5) + "px";
}
}
}
function updateScore() {
document.getElementById("score").innerHTML = "Score: " + score;
}
function checkCollision() {
var playerRect = player.getBoundingClientRect();
for (var i = 0; i < enemies.length; i++) {
var enemyRect = enemies[i].getBoundingClientRect();
if (playerRect.top <= enemyRect.bottom &&
playerRect.right >= enemyRect.left &&
playerRect.left <= enemyRect.right) {
gameOver();
return;
}
}
requestAnimationFrame(checkCollision);
}
function startGame() {
document.addEventListener("mousemove", movePlayer);
setInterval(createEnemy, 1000);
setInterval(moveEnemies, 50);
requestAnimationFrame(checkCollision);
}
function gameOver() {
alert("Game Over! Your score is: " + score);
location.reload();
}
startGame();
</script>
</body>
</html>
这个游戏中，玩家飞机用蓝色方块表示，通过鼠标移动来控制其左右移动。敌人飞机用红色方块表示，每隔一段时间会自动从顶部下降，并在碰到玩家飞机时游戏结束。每次敌人飞机下降出屏幕时，玩家的得分会增加
原文地址: https://www.cveoy.top/t/topic/h7VJ 著作权归作者所有。请勿转载和采集!