top


総投稿数 本 
no_

スポンサーサイト

 --------
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
カテゴリ :スポンサー広告 トラックバック(-) コメント(-)
no_1082

15パズル:先日手にした懐かし15パズル。創ってみたくなったな。いいお手本見つけたぞ ・・・ 【パズル】

 2009-09-09
 先日ある方から、懐かし15パズルいただきました。
 そう。
 ・16分割になっているパズルで、
 ・ヒトコマずつ動かして全体をシャッフルしておき
 ・最初の形に戻してゆくやつ・・・ね。

 久しぶりにやって面白かった。


 そうだ。ここにも創ってみよう。

 で、とてもいいお手本見つけたので、
 まんまソース参考にさせていただき、完成。


 いつものように、左下に貼ってます。
 なんか懐かし15パズル - by 創ったmetaboy


 使い方
 ・デフォルトで100回分シャッフル
  してます。
 ・動かしたいコマをクリック
 ※娘のペットです。はは。


 ところで、
 また重くなっちゃいましたね。
 近日整理して軽くするよう努力します。

  追記に ▼


FC2ブログランキング にほんブログ村 IT技術ブログ Webサイト構築へ ブログ王ランキング 人気ブログランキング 人気ホームページランキングへ


more

************************************************
◎ 懐かし15パズル
************************************************


 仕組みは簡単、ですよね。
 要は、
  ・画像用意して
  ・16分割に分かれたテーブル
   (今回はテーブル利用)に
   分割配置して
   (当然、ひとつは空きセル)


  ・それぞれのセルにユニークIDを用意
  ・シャッフルして
   (実際に15パズルで動かすように
    空きセルの上下左右のセルを交換
    してゆく)


 さて、実現方法・・・ですが。
 JavaScriptがいいでしょうね。


 いろいろ試行錯誤しました。

 ■試行
  ・最初は、
   CSS の clipプロパティ利用して
   やろうとしました。
   > clip:スタイルシートリファレンス


   しかし、なんか重い。あまり良くないなぁ。

  ・それで
   「背景画像」の位置指定を利用、しようと。


 ■反則
  ・過去の先人の知恵を借りる


   探したら・・・

JavaScriptでスライドパズルを作った
JavaScriptでスライドパズルを作った 素晴らしい。
 非常に丁寧でわかり易く
 ウイットにも富んでて・・・



 ・・・まんま利用。ありがとうございました。

 ■画像
  ・近いうちに
   利用される方が好きな画像を組み込めるように
   するつもりですが・・・
   まずは、と。
   すみません、娘の愛玩ペット(名称:ぴー)
   を使うことに。
   「創るmetaboy」で検索


 ■機能
  ・最初にシャッフル回数だけは設定できるようにして
   ※デフォルトは100回くらい、かな。
  ・ギブアップボタンも用意しておこ。


 ■ソース
  ・上記参照サイトを見られるのが
   一番いいですけど
   一部記録。


  □テーブル部分


   動的に生成しているんだけど・・・
var outHTML="<table id ='table_15puzzle' border=0 cellspacing=0 cellpadding=0>\n";
for(iy=0;iy<c_numY;iy++){ outHTML +="<tr>\n";
for(ix=0;ix<c_numX;ix++){
temp_c_num=(iy*c_numX) + ix;
outHTML +="<td id=\"c_" + temp_c_num + "\" class=\"td_15puzzle\"";
outHTML +=" onclick=\"javascript:goCell(" + temp_c_num + ");\"";
outHTML +=" style=\"width:" + c_width + "px; height:" + c_height + "px;";
outHTML +=" background:#FFFFFF;\">\n";
outHTML +="<div id=\"csrc_" + temp_c_num + "\"></div></td>\n";
} outHTML +="</tr>\n";
} outHTML +="</table>\n";
var b_pazzle = document.getElementById('div_15puzzle');
b_pazzle.innerHTML = outHTML;

   ※ここで、セルのstyle設定してるけど
    ・単独頁だとうまくいったけど
    ・この「創るmetaboy」ブログに貼り付けたら
     最初これが効かなくて、セルの幅・高さが
     表示されない。

    で、セルに classを加えて用意。


    cssファイルで、
.td_15puzzle{
width: 38px;
height: 60px;
}
 と用意して一応解決。
    > でもこれは本意じゃないんだよね。
      できれば用意する写真に合わせて
      高さ変えたいのだ・・・(課題)

  □シャッフル部分


   まんま参照サイトの通りだけど
var dx=new Array(0,1,0,-1); var dy=new Array(1,0,-1,0);
for(i=0;i<cnt_shuffle;i++){
var empc_X = temp_empc_cnt%c_numX; var empc_Y = (temp_empc_cnt-empc_X)/c_numX;
var changec_cnt = Math.floor(Math.random()*4);
var changec_cnt_X = empc_X+dx[changec_cnt];
var changec_cnt_Y = empc_Y+dy[changec_cnt];
if(
(0<=changec_cnt_X)
&&(changec_cnt_X<c_numX)
&&(0<=changec_cnt_Y)
&&(changec_cnt_Y<c_numY)){
var tar_c = changec_cnt_X+changec_cnt_Y*c_numX;
c_sets[temp_empc_cnt]=c_sets[tar_c];
c_sets[tar_c]=empc_cnt;
temp_empc_cnt=tar_c;
}
}

  □表示部分


   これも、まんま参照サイト
function go_view(intType){
var b_pazzle = document.getElementById('div_15puzzle');
for(iy=0;iy<c_numY;iy++){ for(ix=0;ix<c_numX;ix++){
temp_c_num=(iy*c_numX) + ix;
var temp_c_id="c_" + temp_c_num;
var b_pazzle_cell = document.getElementById(temp_c_id);

if(intType==1){
if(nowstatus==9){
b_pazzle_cell.style.background="url("+img_puzzle+")";
b_pazzle_cell.style.background.width="152px";
}else{
if(c_sets[temp_c_num]==empc_cnt){
b_pazzle_cell.style.background="";

}else{
b_pazzle_cell.style.background="url("+img_puzzle+")";
b_pazzle_cell.style.background.width="152px";
}
}
}else{
b_pazzle_cell.style.background="url("+img_puzzle+")";
b_pazzle_cell.style.background.width="152px";
}
b_pazzle_cell.innerHTML="";
b_pazzle_cell.style.backgroundPosition=c_lefts[c_sets[temp_c_num]];
}}
}

 ■目標
  □利用者の方が
   自分の好きな画像で できること。
    (当然設定保存できる)
  □今回は
   ・背景画像 利用なので
    縮小ができず、左上から固定のサイズで
    切り出されている。
    画像全体を利用して縮小利用できるように
    (やはり、clipプロパティでずらす方法、かな?)
   ※そうすれば今回用意した
    私の画像で隠されている
    ・ピーのコスプレ画像も見られるのだ。はは。
   「創るmetaboy」で検索
  □カウントとって、
   記録できるようにするかな。
  □できればランキングも用意して・・・
  □ブログパーツで公開して・・・


  まぁ、利用される方がいればねぇ。

commentsコメント
はじめまして。JavaScriptで15パズルを作った主です。
私の作ったプログラムを紹介していただきありがとうございます。
引越しでプロバイダを解約したため元のサイトは閉鎖してしまいましたが、URLに当時の内容をコピーしてありますので、参考にどうぞ。
それでは、今後ともよろしくお願いいたします。
【2009/10/22 23:18】 | recyclebin5385 #Wr49/266 | [edit]
recyclebin5385さん、こんにちは。
コメントありがとうございます。
作者の方なんですね。どうもお世話になりました。
その後、ここに書いてるように着々と制作・・・
とは行っておりませんが、機会あれば
続けたいと思ってます。
【2009/10/23 11:10】 | metaboy #- | [edit]
comment_post












管理者にだけ表示を許可する
commentトラックバック
トラックバックURL:
http://metaboy.blog23.fc2.com/tb.php/1082-4b682fd1
ようこそ
Add to Google 創るmetaboy:RSSフィード
My Yahoo!に追加
最新記事のRSS | 問い合わせ

仕事検索、アルバイト検索、依頼仕事の検索ポータル - 仕事検索.COM - www.jobkensaku.com ツクルン

創るmetaboy - WEB創る、サイト創る、何創る - 創ったmetaboy

 

リンク集

 

最近の記事

 

ブロとも申請フォーム
Sponserd by

さくらのレンタルサーバ さくらのレンタルサーバ
大容量・高機能レンタルサーバー heteml 大容量・高機能レンタルサーバー heteml
XREA (ValueDomain)
お名前.com お名前.com
名づけてねっと名づけてねっと
ムームードメインムームードメイン

 

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。