JavaScript 神経衰弱を作ろう【前編】

2022年 06月 30日

タグ：

JavaScript

１枚の画像からトランプ52枚の画像を作る。

ネットで見つけたこの画像を使って、バラバラのトランプ52枚の写真を作ってみます。

トランプの画像

ロジックに関しては、トランプは1〜13までの数字を持つので、各トランプに0~51までの番号をつけた場合、13で割ったときの余りが便利に使えそうです。

見た目に関しては、トランプ１枚のサイズを縦150px 横100pxと決めて、その枠に合うようにbackgroundPositionを調整してみました。

その過程で変数を文字にすると便利なので、テンプレートリテラルを使っています。

``（バッククォート）で文字を囲み、その中で${}を使うと、この中では変数を表示することができます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .board {
      display: grid;
      grid-template-columns: repeat(13, 1fr);
      gap: 1px;
      width: 100vw;
      background-color: rgba(36, 186, 36, 0.541);
    }

    .board div {
      width: 100px;
      height: 150px;
      border-radius: 10px;
      border: 1px solid black;
      background-color: white;
      margin: 10px auto;
    }
  </style>

  <body>
    <div class="board"></div>
  </body>
  <script>
    const board = document.querySelector('.board');

    const makeTrump = (n) => {
      const div = document.createElement('div');
      div.style.backgroundImage = 'url(tramp.png)';
      // 色々微調整した結果
      div.style.backgroundSize = '1400%';
      // 何列目か
      const col = n % 13;
      // 何段目か
      const row = (n - col) / 13;

      // 背景画像をズラす大きさ（px)
      const x = -(8 + 107 * col);
      const y = -(8 + 156 * row);
      // テンプレートリテラルを使って、変数から文字列を作る
      div.style.backgroundPosition = `${x}px ${y}px`;

      // このdiv要素を挿入する
      board.append(div);
    };

    // とりあえず上から順に・・・・
    for (let i = 0; i < 52; i++) {
      makeTrump(i);
    }
  </script>
</html>

今回作ったmakeTrump(n)は0~51までの数字を渡すと、それに対応したトランプの背景画像を持ったdiv要素を作ってくれます。

(以降、0~51まで並べた数字をシャッフルして、makeTrump()に渡す内容の解説を後日書きます。)