js实现一个音乐按键跟随游戏效果代码
代码语言:html
所属分类:游戏
代码描述:js实现一个音乐按键跟随游戏效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Shrikhand&display=swap'); * { box-sizing: border-box; } html, body { height: 100%; } body { --text-color: hsl(0, 0%, 95%); --bg-color: hsl(0, 0%, 5%); --highlight-color: hsl(60, 100%, 50%); display: grid; place-items: center; font-family: 'Shrikhand', sans-serif; font-size: max(5vmin, 1.25rem); color: var(--text-color); background-color: var(--bg-color); perspective: 40rem; overflow: hidden; } .info-container { position: fixed; top: 2rem; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 1rem; transform: translateZ(0); } .info-container.active { -webkit-animation: bounce 500ms cubic-bezier(0.25, 1, 0.5, 1); animation: bounce 500ms cubic-bezier(0.25, 1, 0.5, 1); } @-webkit-keyframes bounce { 25% { transform: translateY(-10%) scale(1.1); } 50% { transform: translateY(5%) scale(0.95); } 70% { transform: translateY(-2%) scale(1.02); } 85% { transform: translateY(2%) scale(0.98); } 95% { transform: translateY(1%); } } @keyframes bounce { 25% { transform: translateY(-10%) scale(1.1); } 50% { transform: translateY(5%) scale(0.95); } 70% { transform: translateY(-2%) scale(1.02); } 85% { transform: translateY(2%) scale(0.98); } 95% { transform: translateY(1%); } } .pads-container { --pad-size: 45vmin; --shadow-color: hsla(0, 0%, 0%, 0.2); --shadow-y: 0; --ease: cubic-bezier(0.16, 1, 0.3, 1); --focus-color: hsla(0, 0%, 0%, 0.1); --focus-size: 2vmin; --game-rotation: translateZ(0); position: relative; display: grid; grid-gap: 4vmin; grid-template-columns: 1fr 1fr; padding: 1vmin; touch-action: manipulation; transform: scale(0.8); transition: transform var(--speed) var(--ease); } .pads-container.play { transform: var(--game-rotation); } .pads-container.play .pad { pointer-events: auto; } .cap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; margin: auto; padding: 2vmin; width: 50%; height: 50%; background-color: var(--bg-color); border-radius: 50%; box-shadow: hsla(0, 0%, 0%, 0.05) 0 0 0 1vmin, hsla(0, 0%, 0%, 0.1) 0 0 2vmin 3vmin; } .pad { position: relative; cursor: pointer; width: var(--pad-size); height: var(--pad-size); border: none; background-color: var(--color); border-radius: 5vmin; pointer-events: none; box-shadow: inset hsla(0, 0%, 10%, 0.25) 0 0 6vmin 1vmin, var(--shadow-color) 0 var(--shadow-y) 0, var(--color) 0 var(--shadow-y) 0; transform-origin: center bottom; transform: translateY(var(--push)); transition: 200ms var(--ease); transition-property: transform, box-shadow; } .pad::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: hsl(0, 0%, 0%, 0.5); border-radius: inherit; opacity: 0; transition: opacity var(--speed) var(--ease); } .pad:nth-of-type(1) { --focus-position: 100% 100%; border-top-left-radius: 100%; } .pad:nth-of-type(2) { --focus-position: 0 100%; border-top-right-radius: 100%; } .pad:nth-of-type(3) { --focus-position: 100% 0; border-bottom-left-radius: 100%; } .pad:nth-of-type(4) { --focus-position: 0 0; border-bottom-right-radius: 100%; } .pad:focus, .pad:focus-visible { outline: none; } .pad:focus-visible { background-image: repeating-radial-gradient( circle at var(--focus-position), var(--focus-color), var(--focus-color) var(--focus-size), transparent var(--focus-size), transparent calc(var(--focus-size) * 2) ) } .pad:active { background-image: none; } .pad:active::before, .pad.active::before { opacity: 1; transition-duration: calc(var(--speed) / 4); } .btn { color: white; background-color: transparent; border: 2px solid transparent; font-family: inherit; font-size: inherit; outline: none; text-align: center; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; z-index: 1; } .btn:focus-visible { border-color: var(--highlight-color); } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.1; pointer-events: none; } .btn.start-game { width: 100%; height: 100%; border-radius: 50%; font-size: max(7vmin, 0.75rem); } .btn.sound-control { position: fixed; top: 0.5rem; right: 0.5rem; font-size: 1rem; } .btn.sound-control svg { fill: currentcolor; width: 1.5rem; } .btn.sound-control .sound-off { display: none; } .btn.sound-control.mute .sound-on { display: none; } .btn.sound-control.mute .sound-off { display: block; } @media (min-width: 400px) { .pads-container { --pad-size: 35vmin; --offset: 1vmin; --shadow-y: var(--offset); } .pads-container.play { --game-rotation: translateY(-8vmin) rotateX(45deg) rotateZ(25deg); } .pad { --pad-size: 35vmin; } .pads-container.play .pad { --shadow-y: 1vmin; --push: calc(var(--offset) - var(--shadow-y)); } .pads-container.play .pad:active { --shadow-y: 0.5vmin; } .pads-container.play .pad:active, .pads-container.play .pad.active { --shadow-color: hsla(0, 0%, 0%, 0.5); } } </style> </head> <body > <div class="info-container">Start New Game</div> <div class="pads-container"> <button class="pad" data-pad="#1E00FF" data-sound="pad1" style="--color: #1E00FF" disabled="disabled"></button> <button class="pad" data-pad="#FF0061" data-sound="pad2" style="--color: #FF0061" d.........完整代码请登录后点击上方下载按钮下载查看
网友评论0