当前位置：首页 > JavaScript

js实现敲木鱼

2026-02-03 06:15:11JavaScript

实现敲木鱼效果

使用JavaScript实现敲木鱼效果可以通过HTML5的Audio API和简单的动画效果结合。以下是具体实现方法：

HTML结构

创建一个包含木鱼图像和点击区域的HTML结构：

js实现敲木鱼

<div id="wooden-fish">
  <img src="wooden-fish.png" alt="木鱼">
  <div class="hit-area"></div>
</div>
<audio id="fish-sound" src="wooden-fish-sound.mp3"></audio>

CSS样式

添加基本样式和动画效果：

#wooden-fish {
  position: relative;
  width: 200px;
  cursor: pointer;
}

.hit-area {
  position: absolute;
  top: 30%;
  left: 40%;
  width: 20%;
  height: 20%;
  border-radius: 50%;
}

#wooden-fish:active img {
  transform: translateY(5px);
  transition: transform 0.1s;
}

JavaScript代码

实现点击音效和动画：

js实现敲木鱼

const woodenFish = document.getElementById('wooden-fish');
const sound = document.getElementById('fish-sound');

woodenFish.addEventListener('click', () => {
  sound.currentTime = 0;
  sound.play();

  const hitEffect = document.createElement('div');
  hitEffect.className = 'hit-effect';
  woodenFish.appendChild(hitEffect);

  setTimeout(() => {
    woodenFish.removeChild(hitEffect);
  }, 500);
});

添加敲击效果

在CSS中添加敲击视觉效果：

.hit-effect {
  position: absolute;
  top: 30%;
  left: 40%;
  width: 20%;
  height: 20%;
  background-color: rgba(255, 255, 0, 0.5);
  border-radius: 50%;
  animation: ripple 0.5s linear;
}

@keyframes ripple {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(3); opacity: 0; }
}

自动敲击功能

实现自动敲击木鱼的功能：

let autoInterval;
function startAutoHit(interval = 1000) {
  autoInterval = setInterval(() => {
    woodenFish.click();
  }, interval);
}

function stopAutoHit() {
  clearInterval(autoInterval);
}