写出一款超级马里奥的网页游戏的代码要求有游戏开始和结束功能人物角色用数字代替有怪物攻击需躲避怪物接触到怪物就游戏结束角色和怪物可以自由运动。
<!DOCTYPE html>
<html>
<head>
<title>超级马里奥网页游戏</title>
<style>
#game-board {
width: 600px;
height: 400px;
border: 2px solid black;
position: relative;
}
#player {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 350px;
left: 50px;
font-size: 30px;
color: white;
text-align: center;
line-height: 50px;
}
#monster {
width: 50px;
height: 50px;
background-color: green;
position: absolute;
top: 300px;
left: 500px;
font-size: 30px;
color: white;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<h1>超级马里奥网页游戏</h1>
<button onclick="start()">开始游戏</button>
<button onclick="end()">结束游戏</button>
<div id="game-board">
<div id="player">1</div>
<div id="monster">2</div>
</div>
<script>
var player = document.getElementById("player");
var monster = document.getElementById("monster");
var speed = 10;
var isGameOver = false;
<pre><code> function start() {
isGameOver = false;
moveMonster();
}
function end() {
isGameOver = true;
alert("游戏结束！");
}
function moveMonster() {
if (!isGameOver) {
var monsterPosition = parseInt(monster.style.left);
if (monsterPosition > 0) {
monster.style.left = (monsterPosition - speed) + "px";
} else {
monster.style.left = "600px";
}
checkCollision();
setTimeout(moveMonster, 100);
}
}
function checkCollision() {
var playerPosition = parseInt(player.style.left);
var monsterPosition = parseInt(monster.style.left);
if (monsterPosition - playerPosition <= 50 && monsterPosition - playerPosition >= 0) {
end();
}
}
document.addEventListener("keydown", function(event) {
if (!isGameOver) {
var playerPosition = parseInt(player.style.left);
if (event.key == "ArrowLeft" && playerPosition > 0) {
player.style.left = (playerPosition - speed) + "px";
}
if (event.key == "ArrowRight" && playerPosition < 550) {
player.style.left = (playerPosition + speed) + "px";
}
checkCollision();
}
});
</script>
</code></pre>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/biyg 著作权归作者所有。请勿转载和采集!