【WordPressなどで使えます】スライムが現れたけど触ったら逃げ出すソースコード！

使いたいとき、すぐ取り出せるようにと、
自分用に書き留めておくやつですが、
始めたばかりでブログ記事数が少ないので、一応記事っぽくアップしときます。

お気に召したら、ソースコードをコピペして使ってみて下さい。

ページのどこかに、スライムが蠢いています。捕まえて下さい。

スライムの画像と、画像のパス（HTMLコード内の、”人に教えちゃいけないとこ”のこと）は各々で設定してください。

一応、パソコン詳しくない人のために（自分もそんなにだけど）、少しだけ説明します。

• スライムの画像は、自分で作るか、誰かから貰うこと。
• 画像のパス（画像が置いてあるフォルダのこと）は、
  自分のWordPressの編集ページから、
  右上「丸いの３つ」ボタン押して、コードエディターを開いて、
  HTMLのソースコードを見て、他の写真のパスを確認してみれば分かります。
  下記のコードのような<img src=ってところに書いてあります。探してみて下さい。

HTML

<!-- スライム -->
<div class="slime-container">
  <div class="slime-image">
    <img src="https://人に教えちゃいけないとこ" alt="スライムの写真">
  </div>
  <span class="shadow"></span>
</div>
<!-- ----------- -->

CSS

/* スライム */
.slime-container{
    position: absolute;
    width: 200px;
    height: 200px;
    top: 38%;
    left: 70%;
    cursor: pointer;
    transition: all 0.5s 0s ease;
    z-index: 2;
}
.slime-image{
    width: 100%;
}
.slime-image img{
    width: 100%;
    animation: bound 2.5s ease-out infinite;
}
@keyframes bound{
    0%,100%{
        transform: scale(1);
    }
    30%{
        transform: scale(0.8, 1.2);
    }
    60%{
        transform: scale(1);
    }
    90%{
        transform: scale(1.3, 0.8);
    }
}
.shadow{
    position: absolute;
    top: 65%;
    left: 23%;
    /* margin: auto; */
    width: 110px;
    height: 8px;
    background-color: black;
    border-radius: 50%;
    filter: blur(6px);
    opacity: 0.8;
    z-index: 1;
    /* animation: shadow-animation 1.5s infinite; */
}
/* スライム------------ */

JavaScript

//スライム
const slime = document.querySelector(".slime-container");
slime.addEventListener("mouseover", () => {
    slime.style.top = Math.floor(Math.random() * 100) + "%";
    slime.style.left = Math.floor(Math.random() * 100) + "%";
});
slime.addEventListener("click", () => {
    const CATCH = confirm("捕獲しますか？");
    if(CATCH){
        alert("だっふんだ!!");
    }else{
        alert("おぼえてやがれ！");
    }
});
//-------------------------------------