使用HTML5和JavaScript制作一个消防员拯救游戏

本文链接：https://blog.csdn.net/2301_77161129/article/details/132150751

1.样子：

2.代码：

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <title>消防员拯救游戏</title>
  <style>
    #game-board {
      width: 500px;
      height: 500px;
      background-color: #f8f8f8;
      position: relative;
      border: 1px solid #ccc;
    }
    .fireman {
      width: 50px;
      height: 50px;
      background-image: url("fireman.png");
      position: absolute;
      background-size: cover;
    }
    .fire {
      width: 50px;
      height: 50px;
      background-image: url("fire.png");
      position: absolute;
      background-size: cover;
    }
    #score {
      text-align: center;
      font-size: 24px;
      margin-bottom: 20px;
    }
    #game-over {
      text-align: center;
      font-size: 36px;
      font-weight: bold;
      display: none;
    }
  </style>
</head>
<body>
  <h1>消防员拯救游戏</h1>
  <div id="score">得分: 0</div>
  <div id="game-board"></div>
  <div id="game-over">游戏结束</div>

  <script src="game.js"></script>
</body>
</html>

JavaScript代码（game.js）：

// 定义消防员的初始位置
var firemanX = 0;
var firemanY = 0;
var score = 0;
var gameIsOver = false;

// 在指定位置生成火焰
function generateFire(x, y) {
  var fireElement = document.createElement('div');
  fireElement.className = 'fire';
  fireElement.style.left = x + 'px';
  fireElement.style.top = y + 'px';
  document.getElementById('game-board').appendChild(fireElement);
}

// 移动消防员
function moveFireman(event) {
  var keyCode = event.keyCode;
  var gameBoard = document.getElementById('game-board');
  
  // 向左移动
  if (keyCode === 37 && firemanX > 0) {
    firemanX -= 50;
  }
  // 向上移动
  else if (keyCode === 38 && firemanY > 0) {
    firemanY -= 50;
  }
  // 向右移动
  else if (keyCode === 39 && firemanX < (gameBoard.offsetWidth - 50)) {
    firemanX += 50;
  }
  // 向下移动
  else if (keyCode === 40 && firemanY < (gameBoard.offsetHeight - 50)) {
    firemanY += 50;
  }
  
  // 更新消防员的位置
  var firemanElement = document.getElementById('fireman');
  firemanElement.style.left = firemanX + 'px';
  firemanElement.style.top = firemanY + 'px';

  // 判断是否救出了火焰
  var fires = document.getElementsByClassName('fire');
  for (var i = 0; i < fires.length; i++) {
    var fire = fires[i];
    if (fire.offsetLeft === firemanX && fire.offsetTop === firemanY) {
      fire.parentNode.removeChild(fire);
      score++;
      document.getElementById('score').innerText = "得分: " + score;
    }
  }

  // 判断是否游戏结束
  if (fires.length === 0) {
    gameIsOver = true;
    document.getElementById('game-over').style.display = 'block';
  }
}

// 监听键盘事件
document.addEventListener('keydown', function(event) {
  if (!gameIsOver) {
    moveFireman(event);
  }
});

// 初始化游戏
(function initGame() {
  // 在指定位置生成消防员
  var firemanElement = document.createElement('div');
  firemanElement.id = 'fireman';
  firemanElement.className = 'fireman';
  firemanElement.style.left = firemanX + 'px';
  firemanElement.style.top = firemanY + 'px';
  document.getElementById('game-board').appendChild(firemanElement);
  
  // 随机生成火焰
  for (var i = 0; i < 10; i++) {
    var randomX = Math.floor(Math.random() * 10) * 50;
    var randomY = Math.floor(Math.random() * 10) * 50;
    generateFire(randomX, randomY);
  }
})();

完。