基于上面一篇增加游戏难度-CSDN博客

本文链接：https://blog.csdn.net/soorou/article/details/144368828

调整游戏难度可以通过多种方式实现，例如增加障碍物的移动速度、增加障碍物的数量、限制玩家的反应时间等。下面是一个简单的示例，展示如何通过增加障碍物的移动速度来调整游戏难度。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Adjustable Difficulty Game</title>
<style>
  body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f7f7f7;
  }
  #gameArea {
    position: relative;
    width: 400px;
    height: 400px;
    border: 1px solid #000;
  }
  #player {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: blue;
    top: 175px;
    left: 175px;
  }
  #obstacle {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: red;
    top: 50px;
    left: 50px;
  }
</style>
</head>
<body>
<div id="gameArea">
  <div id="player"></div>
  <div id="obstacle"></div>
</div>

<script>
const gameArea = document.getElementById('gameArea');
const player = document.getElementById('player');
const obstacle = document.getElementById('obstacle');

let playerPosition = { x: 175, y: 175 };
let obstacleSpeed = 1; // 控制障碍物的速度

function movePlayer(event) {
  const step = 10;
  switch (event.keyCode) {
    case 37: // left
      playerPosition.x -= step;
      break;
    case 38: // up
      playerPosition.y -= step;
      break;
    case 39: // right
      playerPosition.x += step;
      break;
    case 40: // down
      playerPosition.y += step;
      break;
  }

  player.style.left = `${playerPosition.x}px`;
  player.style.top = `${playerPosition.y}px`;
}

function moveObstacle() {
  const gameAreaWidth = gameArea.clientWidth - obstacle.clientWidth;
  const gameAreaHeight = gameArea.clientHeight - obstacle.clientHeight;

  if (obstacle.offsetLeft > gameAreaWidth) {
    obstacle.style.left = '0px';
  } else {
    obstacle.style.left = `${obstacle.offsetLeft + obstacleSpeed}px`;
  }

  if (Math.abs(playerPosition.x - obstacle.offsetLeft) < 50 &&
      Math.abs(playerPosition.y - obstacle.offsetTop) < 50) {
    alert('Game Over!');
    window.location.reload();
  }
}

document.addEventListener('keydown', movePlayer);

// 控制障碍物的移动
setInterval(moveObstacle, 20); // 可以根据需要调整时间间隔来改变速度
</script>
</body>
</html>

在这个示例中，我们添加了一个obstacleSpeed变量来控制障碍物的移动速度。通过调整setInterval函数中的时间间隔（以毫秒为单位），可以改变障碍物的移动速度，从而调整游戏难度。时间间隔越小，障碍物移动得越快，游戏难度就越大。

你可以根据需要进一步调整这个变量和其他参数，以实现不同的游戏难度级别。例如，你可以添加一个按钮来动态调整难度级别，或者根据玩家的得分自动增加难度。