スクラッチ

2024年1月5日

あけましておめでとうございます。
ケミストのWeb担当みやのです。
今年もよろしくお願いします。

「Web」記事では、これまでに得たWebに関する知識を記録として残していきたいと思います。

今回は「銀色をこすると下から絵が現れる」スクラッチ的なものに挑戦してみました。

jQuery.eraser

参考：電脳世界｜jQueryプラグインjQuery.eraserでスクラッチくじ（銀はがし）を作ってみた

参考：GitHub｜jQuery.eraser

まずは上記GitHubからCode→Download ZIPでjquery.eraser.jsを入手します。

jQueryの後に読み込みます。

さらにスクリプトを追記しておきます。

<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<script src="js/jquery.eraser.js"></script>

<script>$("#img2").eraser({size: 30});</script>

最期の行のsizeの数値で、銀色を削る大きさを変えられるみたいです。

画像を2枚（こすると現れる画像と、上に被せる銀色の画像）用意します。

「黒龍爽」というフォントを使ってみました。うーんカッコイイ！
「真・黒龍爽」とか「黒滅龍爽」とかに進化しそう

銀色はもうちょっとスクラッチくじっぽい感じにしたかったのですが、どう見てもただの灰色です。本当に（ry

HTMLを以下のように記述します。

<div class="scratch-wrapper">
  <img src="img/dai-kichi.jpg" id="img1">
  <img src="img/silver.jpg" id="img2">
</div>

CSSを設定します。

.scratch-wrapper {
  position: relative;
  margin-bottom: 100%;
}

#img1 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  object-fit: cover;
  width: 100%;
  border-radius: 50%;
}

#img2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  object-fit: cover;
  width: 100%;
  border-radius: 50%;
}

なんとなく思いつきでborder-radius:50%で正円にしてみました。

ランダム画像

前の記事でやったランダム画像も併用してみましょう。

HTMLを以下のように書き替えます。

<div class="scratch-wrapper">
  <script type="text/javascript">
    var img = new Array();
    img[0] = '<img src="img/dai-kichi.jpg" alt="大吉" id="img1">';
    img[1] = '<img src="img/kichi.jpg" alt="吉" id="img1">';
    img[2] = '<img src="img/chu-kichi.jpg" alt="中吉" id="img1">';
    img[3] = '<img src="img/sho-kichi.jpg" alt="小吉" id="img1">';
    img[4] = '<img src="img/sue-kichi.jpg" alt="末吉" id="img1">';
    img[5] = '<img src="img/kyo.jpg" alt="凶" id="img1">';
    var no = Math.floor(Math.random() * img.length);
    document.write(img[no]);
  </script>

  <img src="img/silver.jpg" id="img2">
</div>

まとめ

Prism.js（コードの説明に使っている黒いやつ）より後に画像を設置すると、カーソルと削る場所がずれるという謎の現象がみられたので、しかたなく冒頭に設置しました。なんでかなあ。

今年もよろしくお願いします。