パネルをスライドさせてもとの配置に戻すゲームを作成してみよう。
[実行例]
スタート画面

スタートボタンを押すとシャッフルされる。

15パズルの要領で移動させていく、動かせるパネルをクリックすると移動する。

完成するとComplete!の文字が表示される。

[作例]

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8"/>
  <title>パネルパズル</title>
  <style>
  #table{
    margin:0 auto;
    background:#eee;
    padding:10px;
  }
  td{
    font-size:24px;
    text-align: center;
    width:60px;
    height:60px;
    line-height: 60px;
    border:2px solid #333;
    border-radius: 15px;
    background: #ddfeff;
  }
  td.empty{
    background-color:#eee;
    border-color:#eee;
  }
  td.ok{
    border-color:lightgreen;
  }
  #startBt{
    display:block;
    width:200px;
    margin:0px auto;
    height:50px;
    box-shadow:0 3px 0 5px #777;

  }
  #startBt:hover{
    cursor: pointer;
    opacity: 0.8;
  }
  #msgBox{
    width:200px;
    margin:10px auto;
    text-align: center;
    font-size:20px;
    height:30px;
    line-height: 30px;

  }
  </style>
</head>
<body>
<table id="table"></table>
<p id="msgBox"></p>
<button id="startBt">START</button>
<script>
'use strict';
window.onload=function(){
  var size=4;
  var shuffleCount;
  var panels;
  var isShuffled;
  var table=document.getElementById("table");
  var msgBox=document.getElementById("msgBox");
  var startBt=document.getElementById("startBt");

  function init(){
    shuffleCount=size*1000;
    isShuffled=false;
    panels=[];
    table.textContent=null;
    msgBox.textContent=null;
    createStage();
  }

  function createStage(){
    for(var i=0;i<size;i++){
      var tr=document.createElement("tr");
      for(var j=0;j<size;j++){
        var td=document.createElement("td");
        var index=i*size+j;
        td.posId=index;
        td.textContent=index==size*size-1 ? "":index+1;
        td.onclick=click;
        if(index==size*size-1){
          td.classList.add('empty');
        }
        panels.push(td);
        tr.appendChild(td);
      }
      table.appendChild(tr);
    }
  }
  startBt.addEventListener("click",function(){
    init();
    shuffle(shuffleCount);
  });

  function shuffle(shuffleCount){
    for(var i=0;i<shuffleCount;i++){
      click({target:{posId:Math.floor(Math.random()*size*size)}});
    }
    isShuffled=true;
  }
  function click(e){
    var pos=e.target.posId;
    if(pos-size>=0 && panels[pos-size].textContent==''){
      swap(pos,pos-size);
    }else if(pos+size <size*size && panels[pos+size].textContent==''){
      swap(pos,pos+size);
    }else if((pos+1) % size != 0 && panels[pos+1].textContent==''){
      swap(pos,pos+1);
    }else if(pos % size !=0 && panels[pos-1].textContent==''){
      swap(pos,pos-1);
    }
  }
  function swap(p1,p2){
    var temp=panels[p1].textContent;
    panels[p1].textContent=panels[p2].textContent;
    panels[p2].textContent=temp;

    panels[p1].classList.add('empty');
    panels[p2].classList.remove('empty');
    check();
  }
  function check(){
    var okCount=0;
    for(var i=0;i<panels.length;i++){
      if(panels[i].posId==parseInt(panels[i].textContent)-1){
        okCount++;
        panels[i].classList.add("ok");
      }else{
        panels[i].classList.remove("ok");
      }
    }
    if(isShuffled && okCount===size*size-1){
      msgBox.textContent="Complete!";
    }
  }

  init();
};
</script>
</body>
</html>