添加难度选择后2D跑酷游戏Start按钮失效求助

游戏核心设定 #

• 包含无限循环刷新的障碍物
• 支持3种可选难度等级
• 初始分数为0
• 检测到玩家从障碍物上方通过时更新分数
• 玩家撞上障碍物时触发游戏结束

感谢用户kikon的帮助，我对其代码做了少量修改。

目前我的代码除了添加难度选择后Start按钮失效的问题外，可能还存在其他错误，恳请各位帮忙排查所有语法错误与逻辑漏洞。以下是完整代码：

JavaScript代码 #

const player = document.getElementById('player');
const obstacle = document.getElementById('obstacle');
const scoreValue = document.getElementById('score-value');
let score = 0;
let gameRunning = false;
let hasJumpedOver = false;

function updateScore() {
  score++;
  scoreValue.innerText = score;
}

function gameOver() {
  gameRunning = false;
  alert('Game Over! Your score is ' + score);
}

function moveObstacle() {
  if (!gameRunning) return;

  let obstaclePosition = parseInt(window.getComputedStyle(obstacle).getPropertyValue('right')) + speed;

  if (obstaclePosition < window.innerWidth) {
    obstacle.style.right = `${obstaclePosition + speed}px`;
  } else {
    obstacle.style.right = '0';
    hasJumpedOver = false; // Reset this flag when the obstacle resets
  }

  detectCollision();
}

function jump() {
  if (!player.classList.contains('jump')) {
    player.classList.add('jump');

    setTimeout(() => {
      player.classList.remove('jump');
    }, 500);
  }
}

function detectCollision() {
  let playerRect = player.getBoundingClientRect();
  let obstacleRect = obstacle.getBoundingClientRect();

  if (playerRect.left < obstacleRect.right &&
    playerRect.right > obstacleRect.left &&
    playerRect.top < obstacleRect.bottom &&
    playerRect.bottom > obstacleRect.top) {
    // Collision detected, end the game
    gameOver();
  } else if (playerRect.right < obstacleRect.left && !hasJumpedOver) {
    // Player has successfully jumped over the obstacle
    hasJumpedOver = true;
    updateScore();
  }
}

document.addEventListener('keydown', (event) => {
  if (event.code === 'Space') {
    jump();
  }
});

setInterval(moveObstacle, 20);

const difficultyButtons = document.querySelectorAll('#difficulty-buttons button');

difficultyButtons.forEach(button => {
  button.addEventListener('click', function() {
    // remove selected class from all buttons
    difficultyButtons.forEach(btn => {
      btn.classList.remove('button-selected');
    });

    // add the selected class to clicked button
    this.classList.add('button-selected');
  });
});


// misc code for fade in and out on same page

document.getElementById('start-button').addEventListener('click', function() {
  document.getElementById('game-container').classList.add('visible');
  document.getElementById('main-page').classList.add('fade-out-up');
  gameRunning = true; // game starts when start button gets clicked
});

CSS代码 #

body {
  margin: 0;
  overflow: hidden;
}

#main-page {
  z-index: 1;
}

#game-container {
  position: absolute;
  width: 100%;
  height: 100vh;
  opacity: 0;
  transition: opacity 2s ease-in-out;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  background-size: big;
  background-position: center center;
}

/*for game container fade in */
#game-container.visible {
  opacity: 1;
}

/*stuff for main elements of the game*/
#player {
  position: absolute;
  bottom: 0;
  left: 50px;
  width: 50px;
  height: 50px;
  background-color: pink;
}

#obstacle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: grey;
}

#score {
  position: relative;
  top: 15px;
  left: 10px;
  font-size: 25px;
  text-align: center;
  font-family: sans-serif;
  color: aliceblue;
}


/*for jump*/

.jump {
  transform: translateY(-100px);
}

/*for the main page div to fade out*/
.fade-out-up {
  animation: fadeOutUp 1s forwards;
}

@keyframes fadeOutUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(-20px);
  }
}

/*for difficulty selectors */
.button-selected {
  transform: scale(0.9);
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Endless Runner Game</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="w3.css">
</head>

<body>
  <div id="main-page" class="w3-container">
    <h1 class="">Cube Runner 2D</h1>
    <p>Cube Runner 2D is an endless 2D runner game in where the object of the game is to get your score as high as possible before you run into the obstacle (you die).
    </p>
    <p>The game has <span style="font-weight: bold;">Three Difficulty levels </span>you can choose from below,
      <span class="w3-text-green" style="font-weight: bold;">Easy, </span>
      <span class="w3-text-yellow" style="font-weight: bold;">Medium, </span>and
      <span class="w3-text-red" style="font-weight: bold;">Hard.</span></p>
    <div id="difficulty-buttons">
      <button onclick="setDifficulty('easy')" class="w3-green">Easy</button>
      <button onclick="setDifficulty('medium')" class="w3-yellow">Medium</button>
      <button onclick="setDifficulty('hard')" class="w3-red">Hard</button>
    </div>
    <button id="start-button" class="w3-display-middle">Start Game</button>
  </div>
  <div id="game-container">
    <div id="player"></div>
    <div id="obstacle"></div>
    <div id="score">Score: <span id="score-value">-1</span></div>
    <script src="script.js"></script>
  </div>
</body>

</html>

内容的提问来源于stack exchange，提问作者Brexton Appleseed