js实现跳一跳小游戏

JS实现跳一跳小游戏，主要分为以下几个步骤：

1. HTML结构：在HTML中需要准备一个游戏容器div和一个小人的img标签。

<div id="game-container">
  <img src="little-man.png" id="little-man">
  <div id="score">0</div>
</div>

1. CSS样式：为游戏容器div和小人的img标签设置样式，并为小人设置绝对定位。

#game-container {
  position: relative;
  height: 500px;
  background-color: #f6f6f6;
}

#little-man {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  transition: transform 0.3s;
}

#score {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: #333;
}

1. JS逻辑：通过JS实现小人的跳跃动作，并计算分数。

首先，在JS中获取游戏容器、小人和分数标签。

const container = document.getElementById('game-container');
const man = document.getElementById('little-man');
const score = document.getElementById('score');

然后，为游戏容器添加点击事件，当点击容器时触发小人跳跃动作，同时计算得分。

let jumping = false; // 定义一个变量，防止动画未完成时重复触发事件

container.addEventListener('click', function() {
  if (!jumping) {
    jumping = true;
    man.style.transform = 'translateY(-200px)'; // 模拟小人跳跃
    setTimeout(function() { // 延迟0.5秒后执行下面的代码
      jumping = false;
      man.style.transform = 'translateY(0)';
      score.innerHTML = parseInt(score.innerHTML) + 1; // 计算得分
    }, 500);
  }
});

最后，JS实现全局变量score的初始化，并添加CSS动画。

let currentScore = 0; // 初始化得分

score.innerHTML = currentScore;

man.addEventListener('transitionend', function() { // 当动画完成后，移除跳跃样式
  man.classList.remove('jump');
});

示例一：当小人在较低的位置时，点击容器触发小人跳跃动作，小人跳跃至一定高度后落回原位。同时分数+1。

示例二：当小人在空中时，再次点击容器将不会触发跳跃动作，直到小人落地后才可以再次跳跃。

注意事项：
1. 在容器中添加点击事件时，要注意防止重复点击导致动画过多。
2. 在添加跳跃样式时，要设置合理的动画时间，以达到更佳的游戏体验。
3. 在计算得分时，需要将score.innerHTML转换为整数类型，以便完成加法运算。