![]() |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML LANG="ja"> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS"> <TITLE>15 ゲーム</TITLE> </HEAD> <BODY BGCOLOR="#CCFFFF" onLoad="set_size()" onResize="set_size()"> <BR> <FORM onSubmit="return false"> <TABLE CELLSPACING=0><TR> <TD>画像 URL: <INPUT TYPE=TEXT NAME="image" SIZE=40 onKeyPress="if(event.which == 13) open_image()"> <INPUT TYPE=BUTTON VALUE="開く" onClick="open_image()"></TD> <TD WIDTH=10></TD> <TD><INPUT TYPE=BUTTON VALUE="ゲーム開始" onClick="start_game()"></TD> <TD WIDTH=10></TD> <TD><INPUT TYPE=CHECKBOX NAME="bno" CHECKED onClick="block_no(this)">駒番号を表示する</TD> </TR></TABLE> </FORM> <LAYER NAME="base" LEFT=0> <LAYER NAME="frame" LEFT=0 TOP=0 BGCOLOR=BLACK></LAYER> <LAYER NAME="back" LEFT=1 TOP=1 BGCOLOR=GRAY></LAYER> <LAYER NAME="c0" BGCOLOR=BLACK> <LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER> <LAYER BACKGROUND="images/g15_01.gif" WIDTH=23 HEIGHT=14></LAYER> </LAYER> <LAYER NAME="c1" BGCOLOR=BLACK> <LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER> <LAYER BACKGROUND="images/g15_02.gif" WIDTH=23 HEIGHT=14></LAYER> </LAYER> <LAYER NAME="c2" BGCOLOR=BLACK> <LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER> <LAYER BACKGROUND="images/g15_03.gif" WIDTH=23 HEIGHT=14></LAYER> </LAYER> <LAYER NAME="c3" BGCOLOR=BLACK> <LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER> <LAYER BACKGROUND="images/g15_04.gif" WIDTH=23 HEIGHT=14></LAYER> </LAYER> <LAYER NAME="c4" BGCOLOR=BLACK> <LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER> <LAYER BACKGROUND="images/g15_05.gif" WIDTH=23 HEIGHT=14></LAYER> </LAYER> <LAYER NAME="c5" BGCOLOR=BLACK> <LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER> <LAYER BACKGROUND="images/g15_06.gif" WIDTH=23 HEIGHT=14></LAYER> </LAYER> <LAYER NAME="c6" BGCOLOR=BLACK> <LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER> <LAYER BACKGROUND="images/g15_07.gif" WIDTH=23 HEIGHT=14></LAYER> </LAYER> <LAYER NAME="c7" BGCOLOR=BLACK> <LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER> <LAYER BACKGROUND="images/g15_08.gif" WIDTH=23 HEIGHT=14></LAYER> </LAYER> <LAYER NAME="c8" BGCOLOR=BLACK> <LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER> <LAYER BACKGROUND="images/g15_09.gif" WIDTH=23 HEIGHT=14></LAYER> </LAYER> <LAYER NAME="c9" BGCOLOR=BLACK> <LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER> <LAYER BACKGROUND="images/g15_10.gif" WIDTH=23 HEIGHT=14></LAYER> </LAYER> <LAYER NAME="c10" BGCOLOR=BLACK> <LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER> <LAYER BACKGROUND="images/g15_11.gif" WIDTH=23 HEIGHT=14></LAYER> </LAYER> <LAYER NAME="c11" BGCOLOR=BLACK> <LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER> <LAYER BACKGROUND="images/g15_12.gif" WIDTH=23 HEIGHT=14></LAYER> </LAYER> <LAYER NAME="c12" BGCOLOR=BLACK> <LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER> <LAYER BACKGROUND="images/g15_13.gif" WIDTH=23 HEIGHT=14></LAYER> </LAYER> <LAYER NAME="c13" BGCOLOR=BLACK> <LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER> <LAYER BACKGROUND="images/g15_14.gif" WIDTH=23 HEIGHT=14></LAYER> </LAYER> <LAYER NAME="c14" BGCOLOR=BLACK> <LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER> <LAYER BACKGROUND="images/g15_15.gif" WIDTH=23 HEIGHT=14></LAYER> </LAYER> <LAYER NAME="c15" BGCOLOR=BLACK> <LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER> </LAYER> <LAYER NAME="mask" LEFT=1 TOP=1 CLIP="0,0,1,1" VISIBILITY="hide"> <A HREF="javascript:void(0)" onMouseDown="clicked(event)" onClick="return false"> <IMG SRC="images/dummy.gif" WIDTH=3000 HEIGHT=3000 BORDER=0 ALT=""></A> </LAYER> <LAYER NAME="loading" BGCOLOR=WHITE VISIBILITY="hide"> <BR> <FONT COLOR=BLACK><B> 画像ロード中... <BR></B></FONT> <BR> </LAYER> <LAYER NAME="cong" BGCOLOR=WHITE VISIBILITY="hide"> <BR> <FONT SIZE=5 COLOR=RED><B> おめでとう! <BR></B></FONT> <BR> </LAYER> </LAYER> <SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript"> <!-- // 構成要素サイズ設定 function set_size() { var old_w_block = w_block; var old_h_block = h_block; w_block = (innerWidth - 1) >> 2; h_block = (innerHeight - 1 - document.base.top) >> 2; if(w_block < old_w_block || h_block < old_h_block) { // スクロール バーを消す resizeBy(1, 0); setTimeout("resizeBy(-1, 0); set_size2()", 0); } else { set_size2(); } } function set_size2() { var w_block_4 = w_block << 2; var h_block_4 = h_block << 2; var base; with(document.base) { resizeTo(w_block_4 + 1, h_block_4 + 1); base = document; } base.frame.resizeTo(w_block_4 + 1, h_block_4 + 1); base.back.resizeTo(w_block_4 - 1, h_block_4 - 1); for(var y_ = 0; y_ < 4; y_++) { for(var x_ = 0; x_ < 4; x_++) { with(base.layers["c" + String(blocks[y_][x_])]) { moveTo(x_ * w_block, y_ * h_block); resizeTo(w_block + 1, h_block + 1); with(document.layers[0]) { moveTo(- x_ * w_block, - y_ * h_block); clip.left = x_ * w_block + 1; clip.top = y_ * h_block + 1; resizeTo(w_block - 1, h_block - 1); } } } } for(var i = 0; i < 15; i++) base.layers["c" + String(i)].document.layers[1].moveTo((w_block - 23) >> 1, (h_block - 14) >> 1); // 駒番号 base.mask.resizeTo(w_block_4, h_block_4); with(base.cong) { moveTo((w_block_4 - clip.width) >> 1, (h_block_4 - clip.height) >> 1); } with(base.loading) { moveTo((w_block_4 - clip.width) >> 1, (h_block_4 - clip.height) >> 1); } // 駒移動量 if(!(delta_x = w_block >> 3)) delta_x = w_block; if(!(delta_y = h_block >> 3)) delta_y = h_block; // リサイズすると何故か onMouseDown イベントが発生しなくなるので再登録 base.mask.document.links[0].onMouseDown = "clicked(event)"; } // 画像を開く function open_image() { if(document.forms[0].image.value == "") { open_image4(); return; } document.base.document.loading.visibility = "show"; image = new Image(); image.onload = open_image2; image.onerror = open_image4; image.src = document.forms[0].image.value; } function open_image2() { for(var i = 0; i < 16; i++) { with(document.base.document.layers["c" + String(i)].document.layers[0].document.layers[0]) { resizeTo(image.width, image.height); background.src = image.src; // 画像 visibility = "hide"; // ロード直後,画像が表示されない場合があるので, // 一旦非表示にして表示し直す. } } setTimeout("open_image3()", 0); } function open_image3() { for(var i = 0; i < 16; i++) document.base.document.layers["c" + String(i)].document.layers[0].document.layers[0].visibility = "inherit"; document.base.document.loading.visibility = "hide"; } function open_image4() { for(var i = 0; i < 16; i++) document.base.document.layers["c" + String(i)].document.layers[0].document.layers[0].background.src = null; document.base.document.loading.visibility = "hide"; } // ゲーム開始 function start_game() { if(document.base.document.c15.visibility == "hide") // プレイ中 return; // シャッフル for(; ; ) { for(var n = 30; ; ) { var x1 = Math.floor(Math.random() * 4); var y1 = Math.floor(Math.random() * 4); var x2 = Math.floor(Math.random() * 4); var y2 = Math.floor(Math.random() * 4); var b1 = blocks[y1][x1]; var b2 = blocks[y2][x2]; if(b1 == 15 || b2 == 15 || b1 == b2) continue; blocks[y1][x1] = b2; blocks[y2][x2] = b1; if(!--n) break; } // 最初から並んでしまった場合はシャッフルやり直し for(var i = 0; i < 15; i++) { if(blocks[i >> 2][i & 0x3] != i) break; } if(i < 15) break; } room_x = room_y = 3; for(var y_ = 0; y_ < 4; y_++) { for(var x_ = 0; x_ < 4; x_++) { if(x_ == 3 && y_ == 3) continue; document.base.document.layers["c" + String(blocks[y_][x_])].moveTo(x_ * w_block, y_ * h_block); } } document.base.document.c15.visibility = "hide"; document.base.document.mask.visibility = "show"; } // 駒クリック function clicked(e) { if(in_clicked) return; move_x = Math.floor(e.layerX / w_block); move_y = Math.floor(e.layerY / h_block); if(move_x != room_x && move_y != room_y || move_x == room_x && move_y == room_y) // 動かせない return; if(move_x != room_x) { // X 方向 var x_ = room_x; if(room_x < move_x) { // ← for(; x_ < move_x; x_++) blocks[room_y][x_] = blocks[room_y][x_ + 1]; } else { // → for(; x_ > move_x; x_--) blocks[room_y][x_] = blocks[room_y][x_ - 1]; } off = w_block; } else { // Y 方向 var y_ = room_y; if(room_y < move_y) { // ↑ for(; y_ < move_y; y_++) blocks[y_][room_x] = blocks[y_ + 1][room_x]; } else { // ↓ for(; y_ > move_y; y_--) blocks[y_][room_x] = blocks[y_ - 1][room_x]; } off = h_block; } in_clicked = true; clicked2(); } function clicked2() { if(move_x != room_x) { // X 方向 if((off -= delta_x) < 0) off = 0; var x_ = room_x; if(room_x < move_x) { // ← for(; x_ < move_x; x_++) document.base.document.layers["c" + String(blocks[room_y][x_])].left = x_ * w_block + off; } else { // → for(; x_ > move_x; x_--) document.base.document.layers["c" + String(blocks[room_y][x_])].left = x_ * w_block - off; } } else { // Y 方向 if((off -= delta_y) < 0) off = 0; var y_ = room_y; if(room_y < move_y) { // ↑ for(; y_ < move_y; y_++) document.base.document.layers["c" + String(blocks[y_][room_x])].top = y_ * h_block + off; } else { // ↓ for(; y_ > move_y; y_--) document.base.document.layers["c" + String(blocks[y_][room_x])].top = y_ * h_block - off; } } if(off) { // 途中 setTimeout("clicked2()", 0); return; } in_clicked = false; room_x = move_x; room_y = move_y; blocks[room_y][room_x] = 15; // 終了判定 for(var i = 0; i < 15; i++) { if(blocks[i >> 2][i & 0x3] != i) return; } // 終了 document.base.document.mask.visibility = "hide"; document.base.document.c15.visibility = "show"; document.base.document.cong.visibility = "show"; setTimeout("document.base.document.cong.visibility = 'hide'", 2000); } // 駒番号表示/非表示 function block_no(me) { for(var i = 0; i < 15; i++) document.base.document.layers["c" + String(i)].document.layers[1].visibility = (me.checked) ? "show" : "hide"; } blocks = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]]; // 駒配置 in_clicked = false; w_block = h_block = 0; document.forms[0].bno.checked = true; // CHECKED アトリビュートが効かない場合がある //--> </SCRIPT> </BODY> </HTML> |