JavaScript 打飞碟游戏：带分数、关卡、人物和武器
以下是一个使用 JavaScript 编写的简单打飞碟游戏示例。在 HTML 文件中添加以下代码，并将该文件保存为.html格式，然后在浏览器中打开即可运行试玩游戏。
<!DOCTYPE html>
<html>
<head>
<title>打飞碟游戏</title>
<style>
#game-container {
position: relative;
width: 800px;
height: 400px;
border: 1px solid black;
}
.disc {
position: absolute;
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
cursor: pointer;
}
</style>
</head>
<body>
<h1>打飞碟游戏</h1>
<p>得分: <span id="score">0</span></p>
<p>关卡: <span id="level">1</span></p>
<div id="game-container"></div>
<script>
var score = 0;
var level = 1;
var discCount = 5;
var discSpeed = 2;
var gameContainer = document.getElementById("game-container");
var scoreElement = document.getElementById("score");
var levelElement = document.getElementById("level");
gameContainer.addEventListener("click", function(event) {
if (event.target.classList.contains("disc")) {
event.target.style.display = "none";
score++;
scoreElement.textContent = score;
}
});
function createDisc() {
var disc = document.createElement("div");
disc.className = "disc";
disc.style.left = Math.random() * (gameContainer.offsetWidth - 50) + "px";
disc.style.top = Math.random() * (gameContainer.offsetHeight - 50) + "px";
gameContainer.appendChild(disc);
return disc;
}
function moveDiscs() {
var discs = document.getElementsByClassName("disc");
for (var i = 0; i < discs.length; i++) {
var disc = discs[i];
var currentLeft = parseFloat(disc.style.left);
var currentTop = parseFloat(disc.style.top);
var newLeft = currentLeft + discSpeed;
var newTop = currentTop + discSpeed;
if (newLeft > gameContainer.offsetWidth - 50 || newTop > gameContainer.offsetHeight - 50) {
disc.remove();
if (discs.length <= 1) {
level++;
levelElement.textContent = level;
discCount += 5;
discSpeed += 1;
startGame();
}
} else {
disc.style.left = newLeft + "px";
disc.style.top = newTop + "px";
}
}
}
function startGame() {
for (var i = 0; i < discCount; i++) {
createDisc();
}
setInterval(moveDiscs, 10);
}
startGame();
</script>
</body>
</html>
这个游戏有一个简单的界面，显示得分和关卡。玩家需要点击出现的飞碟来得分。每个飞碟都会以一定的速度从左上角飞到右下角，当飞碟超出边界时，会消失并生成新的飞碟。每次击中飞碟后，得分会增加，当所有飞碟都被击中时，游戏会进入下一关，飞碟数量和速度会增加。
这只是一个简单的示例，你可以根据自己的需求进行修改和扩展，添加更多的功能和元素。
原文地址: https://www.cveoy.top/t/topic/pM74 著作权归作者所有。请勿转载和采集!