Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
.cracker-outer{
width: 100%;
height: 90vh;
user-select: none;
}
#cracker{
width: 100%;
height: 100%;
object-fit: contain;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
<div class="cracker-outer">
<img src="/img/cracker.png" alt="クラッカー" id="cracker">
</div>
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();
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment