API tools faq
paste
Advertisement
Guest User

15puzzle

a guest
Apr 14th, 2019
254
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.91 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="ja">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>15パズル</title>
  8.   <style>
  9. *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; position: relative; }
  10.  
  11. .center, .misc, .puzzle { left: 0; right: 0; margin-left: auto; margin-right: auto; }
  12.  
  13. .misc { width: 100%; padding: 10px; max-width: 320px; }
  14.  
  15. .header { text-align: center; font-size: 30px; }
  16.  
  17. .puzzle { width: 100%; padding: 10px; max-width: 320px; }
  18.  
  19. .puzzle_container { border: 1px solid #000; width: 100%; padding-top: 100%; }
  20.  
  21. .puzzle_blank { position: absolute; width: 25%; padding-top: 25%; }
  22.  
  23. .puzzle_pannel { position: absolute; width: 25%; padding-top: 25%; cursor: pointer; }
  24.  
  25. .puzzle_pannel::before { content: ""; width: calc(100% - 10px); height: calc(100% - 10px); position: absolute; top: 5px; left: 5px; border: 1px solid #000; }
  26.  
  27. .puzzle_num { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; font-size: 30px; }
  28.  
  29. .shuffled .puzzle_pannel { transition: top 0.3s, left 0.3s; }
  30.   </style>
  31. </head>
  32. <body>
  33.  
  34. <header class="header">15パズル</header>
  35. <main class="main">
  36.   <div class="puzzle"></div>
  37.   <div class="misc">
  38.     <button class="reset">RESET</button>
  39.     <button class="shuffle">SHUFFLE</button>
  40.   </div>
  41. </main>
  42.  
  43. <script>
  44. (function(d){
  45.   // 1から15までのパネル及びブランク(null)の位置関係を調べるための配列
  46.   // 長さは4x4の16。座標(x,y)に位置する要素は、配列上ではpannels[x+y*4]に存在する
  47.   const pannels = [];
  48.  
  49.   let container = null; // パズル本体
  50.  
  51.   // パネルをスライドさせる処理
  52.   //　x, y はパネルの座標でそれぞれ0以上4未満の整数
  53.   function slide(elem, dx, dy) {
  54.     const x = Math.max(Math.min(3, parseInt(elem.dataset.x) + dx), 0);
  55.     const y = Math.max(Math.min(3, parseInt(elem.dataset.y) + dy), 0);
  56.     elem.style.left = x * 25 + "%";
  57.     elem.style.top = y * 25 + "%";
  58.     elem.dataset.x = x;
  59.     elem.dataset.y = y;
  60.   }
  61.  
  62.   //動かしたいパネルの上下左右にブランク(null)があるか判定し、もしブランクがあるなら
  63.   //パネルとブランクを入れ替えスライドさせる
  64.   function action(elem) {
  65.     const x = parseInt(elem.dataset.x);
  66.     const y = parseInt(elem.dataset.y);
  67.     const current = x + 4 * y; // 配列上のパネルのインデックス
  68.     const above = current - 4;
  69.     const bellow = current + 4;
  70.     const left = current - (x > 0 ? 1 : 0);
  71.     const right = current + (x > 2 ? 0 : 1);
  72.     if (pannels[above] === null) {
  73.       pannels[above] = pannels[current];
  74.       pannels[current] = null;
  75.       slide(elem, 0, -1);
  76.     } else if (pannels[bellow] === null) {
  77.       pannels[bellow] = pannels[current];
  78.       pannels[current] = null;
  79.       slide(elem, 0, 1);
  80.     } else if (pannels[left] === null) {
  81.       pannels[left] = pannels[current];
  82.       pannels[current] = null;
  83.       slide(elem, -1, 0);
  84.     } else if (pannels[right] === null) {
  85.       pannels[right] = pannels[current];
  86.       pannels[current] = null;
  87.       slide(elem, 1, 0);
  88.     }
  89.   }
  90.  
  91.   // パネルを作ってコンテナに追加する
  92.   function createPannel(num, x, y) {
  93.     if (num > 15) { // numが16ならブランク
  94.       return null;
  95.     }
  96.     const ret = d.createElement("div");
  97.     //パネルの現在座標はdata属性で保持
  98.     ret.dataset.x = x;
  99.     ret.dataset.y = y;
  100.     ret.style.top = y * 25 + "%";
  101.     ret.style.left = x * 25 + "%";
  102.  
  103.     const span = d.createElement("span");
  104.     span.classList.add("puzzle_num");
  105.     span.textContent = String(num);
  106.     ret.classList.add("puzzle_pannel");
  107.  
  108.     ret.addEventListener("click", function(){
  109.       action(this);
  110.     });
  111.     ret.appendChild(span);
  112.     container.appendChild(ret);
  113.     return ret;
  114.   }
  115.  
  116.   //パネルをシャッフル。
  117.   //ブランクの周囲のパネルを一つランダムに選択し動かすのを指定回数繰り返す
  118.   function shuffle(times) {
  119.     container.classList.remove("shuffled"); // CSSアニメーションを一旦停止
  120.  
  121.     while (times-- > 0) {
  122.       const offset = [-4, 4, -1, 1];
  123.       const blank = pannels.indexOf(null);
  124.       if (blank < 4) { // ブランクが一番上の行にある場合
  125.        offset[0] = 4;
  126.      }
  127.      if (blank > 11) { // ブランクが一番下の行にある場合
  128.         offset[1] = -4;
  129.       }
  130.       if (blank % 4 === 0) { // ブランクが一番左の列にある場合
  131.         offset[2] = 1;
  132.       }
  133.       if (blank % 4 === 3) { // ブランクが一番右の列にある場合
  134.         offset[3] = -1;
  135.       }
  136.       action(pannels[blank + offset[Math.random() * 4 | 0]]);
  137.     }
  138.  
  139.     container.classList.add("shuffled"); // CSSアニメーションを再度セット
  140.   }
  141.  
  142.   //パズルの初期化
  143.   //必要なエレメントを作ってDOMに追加する
  144.   function init() {
  145.     container = d.createElement("div");
  146.     container.classList.add("puzzle_container");
  147.     //15個のパネルをconatinerに追加
  148.     for (let y = 0; y < 4; ++y) {
  149.      for (let x = 0; x < 4; ++x) {
  150.        pannels.push(createPannel(y * 4 + x + 1, x, y));
  151.      }
  152.    }
  153.    d.querySelector(".puzzle").appendChild(container);
  154.    container.classList.add("shuffled");
  155.  }
  156.  
  157.  //パズルのリセット
  158.  //一旦パズルを全部破棄してもう一度初期化
  159.  function reset() {
  160.    while (pannels.length > 0) {
  161.       pannels.pop();
  162.     }
  163.     d.querySelector(".puzzle").removeChild(container);
  164.     container = null;
  165.     init();
  166.   }
  167.  
  168.   //ページ読み込み時の処理
  169.   init();
  170.   d.querySelector(".reset").addEventListener("click", reset);
  171.   d.querySelector(".shuffle").addEventListener("click", function(){
  172.     shuffle(1000);
  173.   });
  174. })(document);
  175. </script>
  176. </body>
  177. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!