▼あなたのページにスライドパズルを配置する方法▼

カスタマイズします

以下のコードをbody内に配置します

📋クリックしてコピー

<div>
  <canvas id="ground"></canvas>
</div>
<p id="field"></p>

📋クリックしてコピー

<script type="text/javascript" charset="utf-8" src="https://hantomium.neocities.org/slidepuzzle.js"></script>
<script>
  const ground = {  // 設定オブジェクトを作成する.
    BLOCK_ZERO_FIX = false;  // true: 左上を空白マスに設定する.　　false: 左下を空白マスに設定する.
    BLOCK_EMPTY = false;     // true: 空白マスの背景を透明にする.　false: 空白マスの背景をCANVAS_COLORにする.
    BLOCK_NUMBER = 4;        // 画像を縦横で分割する数です.
    SHUFFLE_NUMBER = 1000;   // シャッフルで行う, 完成状態からの移動の回数です.
    CANVAS_SIZE = 100;       // キャンバスの表示サイズです.
    CANVAS_ID = ground;      // 上で設定したCanvas要素のIDにしてください.
    CANVAS_LINE = 1;         // キャンバスの枠線と区切り線の太さです.
    CANVAS_COLOR = "white";            // キャンバスの枠線と区切り線の色です.
    IMAGE_SOURCE = "neko_gemini.jpg";  // パズルに使用する画像です。
    GAME_CLEAR = () => {
      // クリア時の処理
      document.getElementById("field").innerHTML = "パズルをクリアしました！"
    }
  }
  ground.GAME_CREATE = createSlidePuzzle(ground); // ※重要！　設定オブジェクトをcreateSlidePuzzle関数に渡す.
</script>