![]() |
<!DOCTYPE HTML> <HTML LANG="ja" STYLE="height:100%"> <HEAD> <META CHARSET="Shift_JIS"> <TITLE>ハイパー 15 ゲーム(element() 版)</TITLE> </HEAD> <BODY onLoad="set_size()" onResize="set_size()" STYLE="height:100%; margin:0; overflow:hidden; background-color:#CCFFFF"> <DIV STYLE="text-align:center; white-space:nowrap"> <BR> <FORM onSubmit="open_page(); return false"> URL: <INPUT TYPE=TEXT ID="page" SIZE=60> <INPUT TYPE=SUBMIT VALUE="開く"> <INPUT TYPE=BUTTON ID="start" VALUE="ゲーム開始" onClick="start_game()" STYLE="margin-left:1em"> <LABEL><INPUT TYPE=CHECKBOX ID="bno" CHECKED onClick="block_no(this)" STYLE="vertical-align:middle; margin-left:1em">駒番号を表示する</LABEL> </FORM> </DIV> <BR> <DIV ID="base" STYLE="position:relative"> <IFRAME ID="src" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO SANDBOX="allow-scripts" STYLE="position:absolute; left:0; top:0; background-color:white"></IFRAME> <DIV ID="back" STYLE="position:absolute; left:0; top:0; background-color:gray; border:solid 1px black"></DIV> <DIV ID="b0" STYLE="position:absolute; background-color:black; transition-property:none; transition-duration:0.1s"> <DIV STYLE="position:relative; left:1px; top:1px; overflow:hidden"> <DIV ID="c0" STYLE="position:relative; background-image:-moz-element(#src)"></DIV> <IMG ID="n0" WIDTH=40 HEIGHT=24 STYLE="position:absolute; -moz-user-select:none"> </DIV> </DIV> <DIV ID="b1" STYLE="position:absolute; background-color:black; transition-property:none transition-duration:0.1s"> <DIV STYLE="position:relative; left:1px; top:1px; overflow:hidden"> <DIV ID="c1" STYLE="position:relative; background-image:-moz-element(#src)"></DIV> <IMG ID="n1" WIDTH=40 HEIGHT=24 STYLE="position:absolute; -moz-user-select:none"> </DIV> </DIV> <DIV ID="b2" STYLE="position:absolute; background-color:black; transition-property:none; transition-duration:0.1s"> <DIV STYLE="position:relative; left:1px; top:1px; overflow:hidden"> <DIV ID="c2" STYLE="position:relative; background-image:-moz-element(#src)"></DIV> <IMG ID="n2" WIDTH=40 HEIGHT=24 STYLE="position:absolute; -moz-user-select:none"> </DIV> </DIV> <DIV ID="b3" STYLE="position:absolute; background-color:black; transition-property:none; transition-duration:0.1s"> <DIV STYLE="position:relative; left:1px; top:1px; overflow:hidden"> <DIV ID="c3" STYLE="position:relative; background-image:-moz-element(#src)"></DIV> <IMG ID="n3" WIDTH=40 HEIGHT=24 STYLE="position:absolute; -moz-user-select:none"> </DIV> </DIV> <DIV ID="b4" STYLE="position:absolute; background-color:black; transition-property:none; transition-duration:0.1s"> <DIV STYLE="position:relative; left:1px; top:1px; overflow:hidden"> <DIV ID="c4" STYLE="position:relative; background-image:-moz-element(#src)"></DIV> <IMG ID="n4" WIDTH=40 HEIGHT=24 STYLE="position:absolute; -moz-user-select:none"> </DIV> </DIV> <DIV ID="b5" STYLE="position:absolute; background-color:black; transition-property:none; transition-duration:0.1s"> <DIV STYLE="position:relative; left:1px; top:1px; overflow:hidden"> <DIV ID="c5" STYLE="position:relative; background-image:-moz-element(#src)"></DIV> <IMG ID="n5" WIDTH=40 HEIGHT=24 STYLE="position:absolute; -moz-user-select:none"> </DIV> </DIV> <DIV ID="b6" STYLE="position:absolute; background-color:black; transition-property:none; transition-duration:0.1s"> <DIV STYLE="position:relative; left:1px; top:1px; overflow:hidden"> <DIV ID="c6" STYLE="position:relative; background-image:-moz-element(#src)"></DIV> <IMG ID="n6" WIDTH=40 HEIGHT=24 STYLE="position:absolute; -moz-user-select:none"> </DIV> </DIV> <DIV ID="b7" STYLE="position:absolute; background-color:black; transition-property:none; transition-duration:0.1s"> <DIV STYLE="position:relative; left:1px; top:1px; overflow:hidden"> <DIV ID="c7" STYLE="position:relative; background-image:-moz-element(#src)"></DIV> <IMG ID="n7" WIDTH=40 HEIGHT=24 STYLE="position:absolute; -moz-user-select:none"> </DIV> </DIV> <DIV ID="b8" STYLE="position:absolute; background-color:black; transition-property:none; transition-duration:0.1s"> <DIV STYLE="position:relative; left:1px; top:1px; overflow:hidden"> <DIV ID="c8" STYLE="position:relative; background-image:-moz-element(#src)"></DIV> <IMG ID="n8" WIDTH=40 HEIGHT=24 STYLE="position:absolute; -moz-user-select:none"> </DIV> </DIV> <DIV ID="b9" STYLE="position:absolute; background-color:black; transition-property:none; transition-duration:0.1s"> <DIV STYLE="position:relative; left:1px; top:1px; overflow:hidden"> <DIV ID="c9" STYLE="position:relative; background-image:-moz-element(#src)"></DIV> <IMG ID="n9" WIDTH=40 HEIGHT=24 STYLE="position:absolute; -moz-user-select:none"> </DIV> </DIV> <DIV ID="b10" STYLE="position:absolute; background-color:black; transition-property:none; transition-duration:0.1s"> <DIV STYLE="position:relative; left:1px; top:1px; overflow:hidden"> <DIV ID="c10" STYLE="position:relative; background-image:-moz-element(#src)"></DIV> <IMG ID="n10" WIDTH=40 HEIGHT=24 STYLE="position:absolute; -moz-user-select:none"> </DIV> </DIV> <DIV ID="b11" STYLE="position:absolute; background-color:black; transition-property:none; transition-duration:0.1s"> <DIV STYLE="position:relative; left:1px; top:1px; overflow:hidden"> <DIV ID="c11" STYLE="position:relative; background-image:-moz-element(#src)"></DIV> <IMG ID="n11" WIDTH=40 HEIGHT=24 STYLE="position:absolute; -moz-user-select:none"> </DIV> </DIV> <DIV ID="b12" STYLE="position:absolute; background-color:black; transition-property:none; transition-duration:0.1s"> <DIV STYLE="position:relative; left:1px; top:1px; overflow:hidden"> <DIV ID="c12" STYLE="position:relative; background-image:-moz-element(#src)"></DIV> <IMG ID="n12" WIDTH=40 HEIGHT=24 STYLE="position:absolute; -moz-user-select:none"> </DIV> </DIV> <DIV ID="b13" STYLE="position:absolute; background-color:black; transition-property:none; transition-duration:0.1s"> <DIV STYLE="position:relative; left:1px; top:1px; overflow:hidden"> <DIV ID="c13" STYLE="position:relative; background-image:-moz-element(#src)"></DIV> <IMG ID="n13" WIDTH=40 HEIGHT=24 STYLE="position:absolute; -moz-user-select:none"> </DIV> </DIV> <DIV ID="b14" STYLE="position:absolute; background-color:black; transition-property:none; transition-duration:0.1s"> <DIV STYLE="position:relative; left:1px; top:1px; overflow:hidden"> <DIV ID="c14" STYLE="position:relative; background-image:-moz-element(#src)"></DIV> <IMG ID="n14" WIDTH=40 HEIGHT=24 STYLE="position:absolute; -moz-user-select:none"> </DIV> </DIV> <DIV ID="b15" STYLE="position:absolute; background-color:black; transition-property:none; transition-duration:0.1s"> <DIV STYLE="position:relative; left:1px; top:1px; overflow:hidden"> <DIV ID="c15" STYLE="position:relative; background-image:-moz-element(#src)"></DIV> </DIV> </DIV> <DIV ID="mask" STYLE="position:absolute; left:0; top:0; width:100%; height:100%"></DIV> <SPAN ID="cong" STYLE="position:absolute; left:50%; top:50%; font-size:xx-large; font-weight:bold; letter-spacing:2px; padding:4px 16px; color:red; background-color:white; visibility:hidden">おめでとう!</SPAN> </DIV> <SCRIPT TYPE="text/javascript"> <!-- // 構成要素サイズ設定 function set_size() { w_block = (document.body.clientWidth - 1) >> 2; h_block = (document.body.clientHeight - elem_base.offsetTop - 1) >> 2; var i; var w_block_4 = w_block << 2; var h_block_4 = h_block << 2; with(elem_base.style) { width = String(w_block_4 + 1) + "px"; height = String(h_block_4 + 1) + "px"; } with(document.getElementById("back").style) { width = String(w_block_4 - 1) + "px"; height = String(h_block_4 - 1) + "px"; } with(elem_src) { width = w_block_4; height = h_block_4; } for(var iy = 0; iy < 4; iy++) { for(var ix = 0; ix < 4; ix++) { i = blocks[iy][ix]; with(document.getElementById("b" + String(i)).style) { if(i == 15) { left = String(3 * w_block) + "px"; top = String(3 * h_block) + "px"; } else { left = String(ix * w_block) + "px"; top = String(iy * h_block) + "px"; } width = String(w_block + 1) + "px"; height = String(h_block + 1) + "px"; } with(document.getElementById("c" + String(iy * 4 + ix)).style) { left = String(- ix * w_block - 1) + "px"; top = String(- iy * h_block - 1) + "px"; width = String((ix + 1) * w_block) + "px"; height = String((iy + 1) * h_block) + "px"; } } } var sx = String(((w_block - 40) >> 1) - 1) + "px"; var sy = String(((h_block - 24) >> 1) - 1) + "px"; for(i = 0; i < 15; i++) { with(document.getElementById("n" + String(i)).style) { left = sx; top = sy; } } } // ページを開く function open_page() { elem_src.src = document.getElementById("page").value; } // ゲーム開始 function start_game() { elem_start.disabled = true; // シャッフル 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; } // 最初から並んでしまった場合はシャッフルやり直し var i; for(i = 0; i < 15; i++) { if(blocks[i >> 2][i & 0x3] != i) break; } if(i < 15) break; } room_x = room_y = 3; for(var iy = 0; iy < 4; iy++) { for(var ix = 0; ix < 4; ix++) { if(ix < 3 || iy < 3) { with(document.getElementById("b" + String(blocks[iy][ix])).style) { left = String(ix * w_block) + "px"; top = String(iy * h_block) + "px"; } } } } document.getElementById("b15").style.visibility = "hidden"; click_enable(); } // 駒クリック function clicked(e) { if(e.button != 0) 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; click_disable(); var by; var to; var i; if(move_x != room_x) { // X 方向 by = (room_x < move_x) ? 1 : -1; to = room_x * w_block; n_move = (room_x < move_x) ? move_x - room_x : room_x - move_x; for(var x = room_x; x != move_x; x += by) { i = blocks[room_y][x] = blocks[room_y][x + by]; with(document.getElementById("b" + String(i)).style) { transitionProperty = "left"; // ときどき transition が開始しない場合がある(バグ?)が,duration を再セットすると // その現象は発生しないので,そのためのおまじない transitionDuration = "0.1s"; left = String(to) + "px"; } to += by * w_block; } } else { // Y 方向 by = (room_y < move_y) ? 1 : -1; to = room_y * h_block; n_move = (room_y < move_y) ? move_y - room_y : room_y - move_y; for(var y = room_y; y != move_y; y += by) { i = blocks[y][room_x] = blocks[y + by][room_x]; with(document.getElementById("b" + String(i)).style) { transitionProperty = "top"; // ときどき transition が開始しない場合がある(バグ?)が,duration を再セットすると // その現象は発生しないので,そのためのおまじない transitionDuration = "0.1s"; top = String(to) + "px"; } to += by * h_block; } } room_x = move_x; room_y = move_y; blocks[room_y][room_x] = 15; } function move_end(e) { e.target.style.transitionProperty = "none"; if(!--n_move) { // 終了判定 for(var i = 0; i < 15; i++) { if(blocks[i >> 2][i & 0x3] != i) { click_enable(); return; } } // 終了 document.getElementById("b15").style.visibility = "visible"; elem_cong.style.visibility = "visible"; setTimeout("elem_cong.style.visibility = 'hidden'", 2000); elem_start.disabled = false; } } // 駒番号表示/非表示 function block_no(me) { for(var i = 0; i < 15; i++) document.getElementById("n" + String(i)).style.visibility = (me.checked) ? "visible" : "hidden"; } function click_enable() { elem_mask.addEventListener("mousedown", clicked, false); } function click_disable() { elem_mask.removeEventListener("mousedown", clicked, false); } // 駒番号画像作成 with(elem_work = document.createElement("CANVAS")) { width = 40; height = 24; } with(elem_work.getContext("2d")) { font = "bold 18px arial black,arial,sans-serif"; textAlign = "center"; textBaseline = "middle"; strokeStyle = "white"; lineWidth = 4; lineJoin = "round"; fillStyle = "black"; for(i = 0; i < 15; i++) { clearRect(0, 0, 40, 24); n_str = String(i + 1); strokeText(n_str, 20, 12); fillText(n_str, 20, 12); document.getElementById("n" + String(i)).src = elem_work.toDataURL("image/png"); } } delete elem_work; for(i = 0; i < 15; i++) document.getElementById("b" + String(i)).addEventListener("transitionend", move_end, false); n_move = 0; elem_start = document.getElementById("start"); elem_src = document.getElementById("src"); elem_base = document.getElementById("base"); elem_mask = document.getElementById("mask"); elem_cong = document.getElementById("cong"); with(elem_cong) { style.marginLeft = "-" + String(clientWidth >> 1) + "px"; style.marginTop = "-" + String(clientHeight >> 1) + "px"; } blocks = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]]; // 駒配置 // ページを再ロードしたときのため document.forms[0].reset(); elem_src.src = ""; elem_src.src = "about:blank"; //--> </SCRIPT> </BODY> </HTML> |