gsap实现一个吉他弹奏音乐音符小游戏代码-html代码-BFW代码库

gsap实现一个吉他弹奏音乐音符小游戏代码

代码语言：html

所属分类：游戏

代码描述：gsap实现一个吉他弹奏音乐音符小游戏代码，按键盘上的1到8数字键，当对应颜色的圆点快要落地时按下对应的数字键即可，这样你就能弹奏一曲了。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
        
        html, body, svg {
          width:100%;
          height:100%;
          margin:0;
          padding:0;
          background:#000;
          font-size:23px;
          font-family:'Montserrat', sans-serif;  
        }
        
        #modal {
          cursor:pointer;
        }
    </style>



</head>

<body>
    <svg id="stage" viewBox="0 0 450 600" style="opacity:0">

  <rect class="bar" opacity="0.5" fill="#333" width="450" height="80" />  
  
  <rect fill="#ddd" x="50" width="1" height="100%" />  
  <rect fill="#ddd" x="100" width="1" height="100%" />
  <rect fill="#ddd" x="150" width="1" height="100%" />
  <rect fill="#ddd" x="200" width="1" height="100%" />
  <rect fill="#ddd" x="250" width="1" height="100%" />
  <rect fill="#ddd" x="300" width="1" height="100%" />
  <rect fill="#ddd" x="350" width="1" height="100%" />
  <rect fill="#ddd" x="400" width="1" height="100%" />
  
  <g id="notes"></g>
  
  <g id="modal">
    <rect opacity="0.85" width="100%" height="102%" y="-1" />
    <text x="50%" y="45%" fill="#fff" text-anchor="middle">Tap the keys 1 - 8, when each</text>
    <text x="50%" y="51%" fill="#fff" text-anchor="middle">dot overlaps the bottom bar.</text>
    <rect id="btn" width="210" height="60" x="120" y="60%" rx="2" fill="#fff" />
    <text x="50%" y="66.2%" text-anchor="middle">PLAY NOW</text>
  </g>

</svg>

    <audio id="snd1" src="//repo.bfw.wiki/bfwrepo/sound/musicgutar/chime1.mp3"></audio>
    <audio id="snd2" src="//repo.bfw.wiki/bfwrepo/sound/musicgutar/chime2.mp3"></audio>
    <audio id="snd3" src="//repo.bfw.wiki/bfwrepo/sound/musicgutar/chime3.mp3"></audio>
    <audio id="snd4" src="//repo.bfw.wiki/bfwrepo/sound/musicgutar/chime4.mp3"></audio>
    <audio id="snd5" src="//repo.bfw.wiki/bfwrepo/sound/musicgutar/chime5.mp3"></audio>
    <audio id="snd6" src="//repo.bfw.wiki/bfwrepo/sound/musicgutar/chime6.mp3"></audio>
    <audio id="snd7" src=&q.........完整代码请登录后点击上方下载按钮下载查看