パネルをスライドさせてもとの配置に戻すゲームを作成してみよう。
記事を新しくしました。こちらを参照してください。
[実行例]
スタート画面
スタートボタンを押すとシャッフルされる。
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>
コメント