效果

HTML：

    <img class="bg" src="./assets/img/Animations/eat/eat_00.jpg"><img class="drink" src="./assets/img/Buttons/drink/drink.png"><img class="eat" src="./assets/img/Buttons/eat/eat.png"><img class="cymbal" src="./assets/img/Buttons/cymbal/cymbal.png"><img class="fart" src="./assets/img/Buttons/fart/fart.png"><img class="pie" src="./assets/img/Buttons/pie/pie.png"><img class="scratch" src="./assets/img/Buttons/scratch/scratch.png"><div class="footLeft"></div><div class="footRight"></div><div class="stomatch"></div><div class="knockout"></div><audio src="./assets/mp3/pi.wav" controls class="music"></audio>

css

* {padding: 0;margin: 0;
}
html,body {height: 100%;
}
.bg {width: 100%;height: 100%;
}
.drink,.eat,.cymbal,.fart,.pie,.scratch {position: absolute;width: 20%;height: 10%;
}
.drink {left: 10%;top: 50%;
}
.eat {right: 10%;top: 50%;
}
.cymbal {left: 10%;top: 60%;
}
.fart {right: 10%;top: 60%;
}
.pie {left: 10%;top: 70%;
}
.scratch {right: 10%;top: 70%;
}
.footLeft,.footRight,.knockout,.stomatch {position: absolute;width: 15%;height: 5%;background-color: #44B15A;opacity: 0;
}
.footLeft {top: 90%;right: 32%;
}
.footRight {top: 90%;left: 32%;
}
.knockout {width: 25%;height: 15%;top: 32%;left: 39%;
}
.stomatch {width: 20%;height: 15%;top: 71%;left: 40%;
}
audio {display: none;
}

JS

window.onload = function () {let $bg = document.querySelector('.bg')let $drink = document.querySelector('.drink')let $eat = document.querySelector('.eat')let $cymbal = document.querySelector('.cymbal')let $fart = document.querySelector('.fart')let $pie = document.querySelector('.pie')let $scratch = document.querySelector('.scratch')let $music = document.querySelector('.music')let $footLeft = document.querySelector('.footLeft')let $footRight = document.querySelector('.footRight')let $stomatch = document.querySelector('.stomatch')let $knockout = document.querySelector('.knockout')var timelet play = function clearTime(path, total, timing) {// 防止出现多个动作同时出现clearInterval(time)let num1 = 0let numtime = setInterval(() => {num1++if (num1>= 10) {num = num1} else {num = '0' + num1}$bg.src = `./assets/img/Animations/${path}/${path}_${num}.jpg`if (num1 >= total) {clearInterval(time)}}, timing)}let musicPlay = path => {$music.src = './assets/mp3/' + path$music.play()}$drink.onclick = () => play('drink', 80, 50)$eat.onclick = () => play('eat', 39, 50)// 鼓$cymbal.onclick = () => {play('cymbal', 12, 100)musicPlay('pia.mp3')}// 放屁$fart.onclick = () => {play('fart', 27, 100)musicPlay('pi.wav')}// 砸饼$pie.onclick = () => play('pie', 23, 100)// 抓屏幕$scratch.onclick = () => play('scratch', 55, 100)$footLeft.onclick = () => {play('footLeft', 29, 100)}$footRight.onclick = () => {play('footRight', 29, 100)}$stomatch.onclick = () => {play('stomach', 33, 100)musicPlay('tomaiyou.mp3')}$knockout.onclick = () => {play('knockout', 80, 100)}
}