码上掘金实现电子木鱼

本文正在参加「金石计划 . 瓜分6万现金大奖」

前言

前几天在朋友圈看到“敲电子木鱼”的视频，敲一下木鱼就提示“功德 +1”，还带有敲击声和念经的声音，感觉挺有意思的。

心血来潮，捣鼓了一晚上，借助码上掘金实现了这个功能。

展示效果

码上掘金木鱼

素材

准备素材如下：

• 木鱼：网上找了一张木鱼的图片，用PS简单处理成黑白的图片。

• 敲木鱼音频、念经音频：网上找了素材，简单剪辑了一下。

素材存放在服务器上，方便码上掘金中引入。

代码块

首先，思考一下展示效果。我们点击木鱼，响起”咚”的一声，次数+1。同时，我们可以在木鱼的右上角添加”功德 +1″的文字闪现效果。

点击木鱼，我们需要做的事情有：

• 播放敲木鱼的声音
• 计数+1
• 添加交互效果（提示文字、木鱼动画等）

其中，计数很容易实现，就不赘述了。

在Vue3中，借助 audio 标签引入音频文件，调用.play()方法可以播放音频：

<audio controls ref="audio" class="aud">
  <source src="https://clemmensen.top/static/muyu.mp3" />
</audio>

<script setup>
const audio = ref(null)
function playMuyu() {
  audio.value.play()
}
</script>

提示文字的实现是，当敲击木鱼时，给文字加上tipsActive的类名，该类名带有动画效果，文字会向上移动并消失。

@keyframes textMove {
  from {
    top: 20%;
    opacity: 1;
  }
  to {
    top: 18%;
    opacity: 0;
  }
}

具体代码：

<div :class="['tips', { 'tips-active': tipsActive }]">
  {{tips}}
</div>

<script setup>
const tips = ref('功德 +1')
function clickMuyu() {
  count.value ++ // 计数+1
  tipsActive.value = true
  setTimeout(() => {
    tipsActive.value = false
  }, time.value)
}
</script>

相似的，给木鱼加上敲击效果，也就是点击会有缩放效果：

@keyframes muyuScale {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1);
  }
}

拓展

开始界面

刚开始是直接显示一个木鱼图片，这里我们考虑添加一个自定义的开始界面，包括“Start”按钮和上方的诗词“睡到僧廊响木鱼，庄周蝴蝶两蘧蘧。”。在点击按钮后才进入木鱼图片，并开始播放背景音乐。

背景音乐

点击”Start”时，开始播放背景音乐。背景音乐的播放方法和上面提到的播放音频的方法一致，这里就不赘述了。

提供多种提示文字

右边加上了文字选择功能，可以选择功能、抗疫或Bug，对应的提示文字会跟着改变。

后记

一个简单的小项目，其中需要了解的地方是如何在vue3中使用audio标签引入音频文件。