01web-cracker.css

.cracker-outer{
  width: 100%;
  height: 90vh;
  user-select: none;
}

#cracker{
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

02web-cracker.html

<div class="cracker-outer">
  <img src="/img/cracker.png" alt="クラッカー" id="cracker">
</div>

03web-cracker.js

const cracker = document.getElementById('cracker');
const se = new Audio();
const bgm = new Audio();

//audio用無音ループ挿入
bgm.src = '/se/muon.mp3';
bgm.volume = 0;
bgm.loop = true;
//se
se.src = '/se/cracker1.mp3'
//アニメ設定
const keyframes = [
  {transform: 'rotateZ(0deg)'},
  {transform: 'rotateZ(-15deg)'},
  {transform: 'rotateZ(0deg)'},
  {transform: 'rotateZ(15deg)'},
  {transform: 'rotateZ(0deg)'}
];
const anime = cracker.animate(keyframes,100);
anime.cancel();

cracker.addEventListener('click',ring);
window.addEventListener('contextmenu',()=>{
  event.preventDefault();
});

function ring(){
  if(bgm.paused) bgm.play();
  se.pause();
  se.currentTime = 0;
  se.play();
  anime.cancel();
  anime.play();
}