HTML 网页版超级马里奥游戏：代码实现，随机怪物，得分系统
<!DOCTYPE html>
<html>
<head>
<title>超级马里奥游戏 - 网页版</title>
<style>
body {
background-color: #000;
color: #fff;
font-size: 24px;
text-align: center;
}
#game-board {
margin: 0 auto;
width: 480px;
height: 320px;
background-color: #8BC34A;
position: relative;
}
#game-over {
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: #fff;
border: 5px solid #000;
border-radius: 10px;
}
</style>
</head>
<body>
<h1>超级马里奥游戏</h1>
<p>得分：<span id='score'>0</span></p>
<div id='game-board'>
<!-- 游戏区域 -->
</div>
<div id='game-over'>
<h2>游戏结束</h2>
<p>得分：<span id='final-score'>0</span></p>
<button id='restart'>重新开始</button>
</div>
<script>
// 游戏状态
var gameState = {
score: 0,
gameOver: false
};
<pre><code> // 初始化游戏区域
var gameBoard = document.getElementById('game-board');
var boardWidth = gameBoard.offsetWidth;
var boardHeight = gameBoard.offsetHeight;
var cellSize = 32;
var numCellsX = Math.floor(boardWidth / cellSize);
var numCellsY = Math.floor(boardHeight / cellSize);
for (var i = 0; i < numCellsY; i++) {
for (var j = 0; j < numCellsX; j++) {
var cell = document.createElement('div');
cell.className = 'cell';
cell.style.width = cellSize + 'px';
cell.style.height = cellSize + 'px';
cell.style.position = 'absolute';
cell.style.top = (i * cellSize) + 'px';
cell.style.left = (j * cellSize) + 'px';
gameBoard.appendChild(cell);
}
}
// 初始化角色和怪物
var player = {
x: Math.floor(numCellsX / 2),
y: numCellsY - 2
};
var monsters = [];
var numMonsters = Math.floor(Math.random() * 5) + 1;
for (var i = 0; i < numMonsters; i++) {
var monster = {
x: Math.floor(Math.random() * numCellsX),
y: Math.floor(Math.random() * (numCellsY - 3))
};
monsters.push(monster);
}
// 渲染角色和怪物
function render() {
// 渲染游戏区域
var cells = document.getElementsByClassName('cell');
for (var i = 0; i < cells.length; i++) {
cells[i].innerHTML = '';
}
cells[player.y * numCellsX + player.x].innerHTML = '0';
for (var i = 0; i < monsters.length; i++) {
var monster = monsters[i];
cells[monster.y * numCellsX + monster.x].innerHTML = '1';
}
// 更新得分
document.getElementById('score').innerHTML = gameState.score;
// 游戏结束判断
if (monsters.length === 0) {
gameState.gameOver = true;
document.getElementById('final-score').innerHTML = gameState.score;
document.getElementById('game-over').style.display = 'block';
}
}
// 处理键盘事件
document.addEventListener('keydown', function(event) {
if (gameState.gameOver) {
return;
}
switch (event.key) {
case 'ArrowUp':
if (player.y > 0) {
player.y--;
}
break;
case 'ArrowDown':
if (player.y < numCellsY - 2) {
player.y++;
}
break;
case 'ArrowLeft':
if (player.x > 0) {
player.x--;
}
break;
case 'ArrowRight':
if (player.x < numCellsX - 1) {
player.x++;
}
break;
}
for (var i = 0; i < monsters.length; i++) {
var monster = monsters[i];
if (monster.x === player.x && monster.y === player.y) {
monsters.splice(i, 1);
gameState.score++;
}
}
render();
});
// 重新开始游戏
document.getElementById('restart').addEventListener('click', function(event) {
gameState.score = 0;
gameState.gameOver = false;
player.x = Math.floor(numCellsX / 2);
player.y = numCellsY - 2;
monsters = [];
var numMonsters = Math.floor(Math.random() * 5) + 1;
for (var i = 0; i < numMonsters; i++) {
var monster = {
x: Math.floor(Math.random() * numCellsX),
y: Math.floor(Math.random() * (numCellsY - 3))
};
monsters.push(monster);
}
document.getElementById('game-over').style.display = 'none';
render();
});
// 初始化游戏
render();
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/mKBS 著作权归作者所有。请勿转载和采集!