![]() |
<!DOCTYPE HTML> <HTML LANG="ja" STYLE="height:100%"> <HEAD> <META CHARSET="Shift_JIS"> <TITLE>ハイパー 15 ゲーム(SVG フィルタ版)</TITLE> <svg height=0 style="height:0"> <filter id="filter" x="0%" y="0%" width="100%" height="100%"> <feFlood id="fr" flood-color="black" flood-opacity="1" x="0" y="0" width="0" height="0" result="f"></feFlood> <!-- 0 --> <feImage id="n0" href="" x="-100" y="0" width="40" height="24" result="n"></feImage> <feOffset id="c0" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0"></feOffset> <feMerge> <feMergeNode in="f"></feMergeNode> <feMergeNode></feMergeNode> <feMergeNode in="n"></feMergeNode> </feMerge> <feOffset id="b0" width="100%" height="100%" dx="0" dy="0" result="b0"></feOffset> <!-- 1 --> <feImage id="n1" href="" x="-100" y="0" width="40" height="24" result="n"></feImage> <feOffset id="c1" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0"></feOffset> <feMerge> <feMergeNode in="f"></feMergeNode> <feMergeNode></feMergeNode> <feMergeNode in="n"></feMergeNode> </feMerge> <feOffset id="b1" width="100%" height="100%" dx="0" dy="0" result="b1"></feOffset> <!-- 2 --> <feImage id="n2" href="" x="-100" y="0" width="40" height="24" result="n"></feImage> <feOffset id="c2" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0"></feOffset> <feMerge> <feMergeNode in="f"></feMergeNode> <feMergeNode></feMergeNode> <feMergeNode in="n"></feMergeNode> </feMerge> <feOffset id="b2" width="100%" height="100%" dx="0" dy="0" result="b2"></feOffset> <!-- 3 --> <feImage id="n3" href="" x="-100" y="0" width="40" height="24" result="n"></feImage> <feOffset id="c3" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0"></feOffset> <feMerge> <feMergeNode in="f"></feMergeNode> <feMergeNode></feMergeNode> <feMergeNode in="n"></feMergeNode> </feMerge> <feOffset id="b3" width="100%" height="100%" dx="0" dy="0" result="b3"></feOffset> <!-- 4 --> <feImage id="n4" href="" x="-100" y="0" width="40" height="24" result="n"></feImage> <feOffset id="c4" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0"></feOffset> <feMerge> <feMergeNode in="f"></feMergeNode> <feMergeNode></feMergeNode> <feMergeNode in="n"></feMergeNode> </feMerge> <feOffset id="b4" width="100%" height="100%" dx="0" dy="0" result="b4"></feOffset> <!-- 5 --> <feImage id="n5" href="" x="-100" y="0" width="40" height="24" result="n"></feImage> <feOffset id="c5" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0"></feOffset> <feMerge> <feMergeNode in="f"></feMergeNode> <feMergeNode></feMergeNode> <feMergeNode in="n"></feMergeNode> </feMerge> <feOffset id="b5" width="100%" height="100%" dx="0" dy="0" result="b5"></feOffset> <!-- 6 --> <feImage id="n6" href="" x="-100" y="0" width="40" height="24" result="n"></feImage> <feOffset id="c6" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0"></feOffset> <feMerge> <feMergeNode in="f"></feMergeNode> <feMergeNode></feMergeNode> <feMergeNode in="n"></feMergeNode> </feMerge> <feOffset id="b6" width="100%" height="100%" dx="0" dy="0" result="b6"></feOffset> <!-- 7 --> <feImage id="n7" href="" x="-100" y="0" width="40" height="24" result="n"></feImage> <feOffset id="c7" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0"></feOffset> <feMerge> <feMergeNode in="f"></feMergeNode> <feMergeNode></feMergeNode> <feMergeNode in="n"></feMergeNode> </feMerge> <feOffset id="b7" width="100%" height="100%" dx="0" dy="0" result="b7"></feOffset> <!-- 8 --> <feImage id="n8" href="" x="-100" y="0" width="40" height="24" result="n"></feImage> <feOffset id="c8" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0"></feOffset> <feMerge> <feMergeNode in="f"></feMergeNode> <feMergeNode></feMergeNode> <feMergeNode in="n"></feMergeNode> </feMerge> <feOffset id="b8" width="100%" height="100%" dx="0" dy="0" result="b8"></feOffset> <!-- 9 --> <feImage id="n9" href="" x="-100" y="0" width="40" height="24" result="n"></feImage> <feOffset id="c9" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0"></feOffset> <feMerge> <feMergeNode in="f"></feMergeNode> <feMergeNode></feMergeNode> <feMergeNode in="n"></feMergeNode> </feMerge> <feOffset id="b9" width="100%" height="100%" dx="0" dy="0" result="b9"></feOffset> <!-- 10 --> <feImage id="n10" href="" x="-100" y="0" width="40" height="24" result="n"></feImage> <feOffset id="c10" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0" result="c10"></feOffset> <feMerge> <feMergeNode in="f"></feMergeNode> <feMergeNode></feMergeNode> <feMergeNode in="n"></feMergeNode> </feMerge> <feOffset id="b10" width="100%" height="100%" dx="0" dy="0" result="b10"></feOffset> <!-- 11 --> <feImage id="n11" href="" x="-100" y="0" width="40" height="24" result="n"></feImage> <feOffset id="c11" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0"></feOffset> <feMerge> <feMergeNode in="f"></feMergeNode> <feMergeNode></feMergeNode> <feMergeNode in="n"></feMergeNode> </feMerge> <feOffset id="b11" width="100%" height="100%" dx="0" dy="0" result="b11"></feOffset> <!-- 12 --> <feImage id="n12" href="" x="-100" y="0" width="40" height="24" result="n"></feImage> <feOffset id="c12" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0"></feOffset> <feMerge> <feMergeNode in="f"></feMergeNode> <feMergeNode></feMergeNode> <feMergeNode in="n"></feMergeNode> </feMerge> <feOffset id="b12" width="100%" height="100%" dx="0" dy="0" result="b12"></feOffset> <!-- 13 --> <feImage id="n13" href="" x="-100" y="0" width="40" height="24" result="n"></feImage> <feOffset id="c13" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0"></feOffset> <feMerge> <feMergeNode in="f"></feMergeNode> <feMergeNode></feMergeNode> <feMergeNode in="n"></feMergeNode> </feMerge> <feOffset id="b13" width="100%" height="100%" dx="0" dy="0" result="b13"></feOffset> <!-- 14 --> <feImage id="n14" href="" x="-100" y="0" width="40" height="24" result="n"></feImage> <feOffset id="c14" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0"></feOffset> <feMerge> <feMergeNode in="f"></feMergeNode> <feMergeNode></feMergeNode> <feMergeNode in="n"></feMergeNode> </feMerge> <feOffset id="b14" width="100%" height="100%" dx="0" dy="0" result="b14"></feOffset> <!-- 15 --> <feOffset id="c15" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0"></feOffset> <feOffset id="b15" width="100%" height="100%" dx="0" dy="0" result="b15"></feOffset> <feMerge> <feMergeNode in="b0"></feMergeNode> <feMergeNode in="b1"></feMergeNode> <feMergeNode in="b2"></feMergeNode> <feMergeNode in="b3"></feMergeNode> <feMergeNode in="b4"></feMergeNode> <feMergeNode in="b5"></feMergeNode> <feMergeNode in="b6"></feMergeNode> <feMergeNode in="b7"></feMergeNode> <feMergeNode in="b8"></feMergeNode> <feMergeNode in="b9"></feMergeNode> <feMergeNode in="b10"></feMergeNode> <feMergeNode in="b11"></feMergeNode> <feMergeNode in="b12"></feMergeNode> <feMergeNode in="b13"></feMergeNode> <feMergeNode in="b14"></feMergeNode> <feMergeNode in="b15"></feMergeNode> </feMerge> </filter> <animate id="anim0" href="" attributeName="" from="" to="" begin="indefinite" dur="0.1s" fill="remove"></animate> <animate id="anim1" href="" attributeName="" from="" to="" begin="indefinite" dur="0.1s" fill="remove"></animate> <animate id="anim2" href="" attributeName="" from="" to="" begin="indefinite" dur="0.1s" fill="remove"></animate> </svg> </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"> <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"> <DIV ID="back" STYLE="position:absolute; left:0; top:0; background-color:gray; border:solid 1px black"></DIV> <IFRAME ID="src" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO SANDBOX="allow-scripts" STYLE="position:absolute; left:0; top:0; background-color:white; filter:url(#filter)"></IFRAME> <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; let i; let w_block_4 = w_block << 2; let 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; } with(document.getElementById("fr")) { width.baseVal.value = w_block + 1; height.baseVal.value = h_block + 1; } let n_off_x = (w_block - 40) >> 1; let n_off_y = (h_block - 24) >> 1; for(i = 0; ; i++) { let i_str = String(i); with(document.getElementById("c" + i_str)) { width.baseVal.value = w_block - 1; height.baseVal.value = h_block - 1; } if(i == 15) break; with(document.getElementById("n" + i_str)) { x.baseVal.value = n_off_x; y.baseVal.value = n_off_y; } } for(let iy = 0; iy < 4; iy++) { for(let ix = 0; ix < 4; ix++) { with(document.getElementById("c" + String((iy << 2) | ix))) { dx.baseVal = - ix * w_block; dy.baseVal = - iy * h_block; } i = blocks[iy][ix]; with(document.getElementById("b" + String(i))) { if(i == 15) { dx.baseVal = 3 * w_block; dy.baseVal = 3 * h_block; } else { dx.baseVal = ix * w_block; dy.baseVal = iy * h_block; } } } } } // ページを開く function open_page() { elem_src.src = document.getElementById("page").value; } // ゲーム開始 function start_game() { elem_start.disabled = true; // シャッフル for(; ; ) { for(let n = 30; ; ) { let x1 = Math.floor(Math.random() * 4); let y1 = Math.floor(Math.random() * 4); let x2 = Math.floor(Math.random() * 4); let y2 = Math.floor(Math.random() * 4); let b1 = blocks[y1][x1]; let b2 = blocks[y2][x2]; if(b1 == 15 || b2 == 15 || b1 == b2) continue; blocks[y1][x1] = b2; blocks[y2][x2] = b1; if(!--n) break; } // 最初から並んでしまった場合はシャッフルやり直し let 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(let iy = 0; iy < 4; iy++) { for(let ix = 0; ix < 4; ix++) { if(ix < 3 || iy < 3) { with(document.getElementById("b" + String(blocks[iy][ix]))) { dx.baseVal = ix * w_block; dy.baseVal = iy * h_block; } } } } document.getElementById("b15").width.baseVal.valueInSpecifiedUnits = 0; 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(); let by; let i_anim = 0; let from, to; let i_str; if(move_x != room_x) { // X 方向 by = (room_x < move_x) ? 1 : -1; to = room_x * w_block; for(let x = room_x; x != move_x; x += by) { i_str = String(blocks[room_y][x] = blocks[room_y][x + by]); // アニメーション from = to + by * w_block; with(elem_anim[i_anim++]) { setAttribute("href", "#b" + i_str); setAttribute("attributeName", "dx"); setAttribute("from", String(from)); setAttribute("to", String(to)); beginElement(); } document.getElementById("b" + i_str).dx.baseVal = to; to = from; } } else { // Y 方向 by = (room_y < move_y) ? 1 : -1; to = room_y * h_block; for(let y = room_y; y != move_y; y += by) { i_str = String(blocks[y][room_x] = blocks[y + by][room_x]); // アニメーション from = to + by * h_block; with(elem_anim[i_anim++]) { setAttribute("href", "#b" + i_str); setAttribute("attributeName", "dy"); setAttribute("from", String(from)); setAttribute("to", String(to)); beginElement(); } document.getElementById("b" + i_str).dy.baseVal = to; to = from; } } room_x = move_x; room_y = move_y; blocks[room_y][room_x] = 15; } function move_end() { // 終了判定 for(let i = 0; i < 15; i++) { if(blocks[i >> 2][i & 0x3] != i) { click_enable(); return; } } // 終了 document.getElementById("b15").width.baseVal.valueInSpecifiedUnits = 100; elem_cong.style.visibility = "visible"; setTimeout("elem_cong.style.visibility = 'hidden'", 2000); elem_start.disabled = false; } // 駒番号表示/非表示 function block_no(me) { for(let i = 0; i < 15; i++) document.getElementById("n" + String(i)).width.baseVal.value = (me.checked) ? 40 : 0; } function click_enable() { elem_mask.addEventListener("mousedown", clicked, false); } function click_disable() { elem_mask.removeEventListener("mousedown", clicked, false); } // 駒番号画像作成 { let elem_work = document.createElement("CANVAS"); with(elem_work) { 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(let i = 0; i < 15; i++) { clearRect(0, 0, 40, 24); let n_str = String(i + 1); strokeText(n_str, 20, 12); fillText(n_str, 20, 12); document.getElementById("n" + String(i)).setAttribute("href", elem_work.toDataURL("image/png")); } } } const elem_anim = [document.getElementById("anim0"), document.getElementById("anim1"), document.getElementById("anim2")]; elem_anim[0].addEventListener("endEvent", move_end, false); const elem_start = document.getElementById("start"); const elem_src = document.getElementById("src"); const elem_base = document.getElementById("base"); const elem_mask = document.getElementById("mask"); const elem_cong = document.getElementById("cong"); with(elem_cong) { style.marginLeft = "-" + String(clientWidth >> 1) + "px"; style.marginTop = "-" + String(clientHeight >> 1) + "px"; } const blocks = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]]; // 駒配置 let w_block, h_block; let room_x, room_y; let move_x, move_y; // ページを再ロードしたときのため document.forms[0].reset(); elem_src.src = ""; elem_src.src = "about:blank"; //--> </SCRIPT> </BODY> </HTML> |