![]() |
<!DOCTYPE HTML> <HTML LANG="ja"> <HEAD> <META CHARSET="Shift_JIS"> <TITLE>ビデオ 15 ゲーム</TITLE> </HEAD> <BODY onLoad="init()" onResize="set_size()" STYLE="background-color:#CCFFFF; margin:0"> <DIV ALIGN=CENTER> <BR> <FORM> <TABLE CELLSPACING=0><TR> <TD><INPUT TYPE=BUTTON ID="start" VALUE="ゲーム開始" DISABLED onClick="start_game()"></TD> <TD WIDTH=10></TD> <TD><LABEL><INPUT TYPE=CHECKBOX CHECKED onClick="block_no(this)">駒番号を表示する</LABEL></TD> </TR></TABLE> </FORM> <BR> </DIV> <DIV ID="base" STYLE="position:relative"> <SPAN ID="frame" STYLE="position:absolute; left:0; top:0; background-color:black"></SPAN> <SPAN ID="back" STYLE="position:absolute; left:1px; top:1px; background-color:gray"></SPAN> <SPAN ID="c0" STYLE="position:absolute; background-color:black"> <DIV STYLE="position:absolute; left:1px; top:1px; overflow:hidden"> <DIV ID="d0" STYLE="position:relative; left:0; top:0; overflow:hidden"> <VIDEO ID="v0" STYLE="position:absolute"></VIDEO> <IMG ID="n0" SRC="images/g15_01.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute"> </DIV> </DIV> </SPAN> <SPAN ID="c1" STYLE="position:absolute; background-color:black"> <DIV STYLE="position:absolute; left:1px; top:1px; overflow:hidden"> <DIV ID="d1" STYLE="position:relative; left:0; top:0; overflow:hidden"> <VIDEO ID="v1" STYLE="position:absolute"></VIDEO> <IMG ID="n1" SRC="images/g15_02.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute"> </DIV> </DIV> </SPAN> <SPAN ID="c2" STYLE="position:absolute; background-color:black"> <DIV STYLE="position:absolute; left:1px; top:1px; overflow:hidden"> <DIV ID="d2" STYLE="position:relative; left:0; top:0; overflow:hidden"> <VIDEO ID="v2" STYLE="position:absolute"></VIDEO> <IMG ID="n2" SRC="images/g15_03.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute"> </DIV> </DIV> </SPAN> <SPAN ID="c3" STYLE="position:absolute; background-color:black"> <DIV STYLE="position:absolute; left:1px; top:1px; overflow:hidden"> <DIV ID="d3" STYLE="position:relative; left:0; top:0; overflow:hidden"> <VIDEO ID="v3" STYLE="position:absolute"></VIDEO> <IMG ID="n3" SRC="images/g15_04.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute"> </DIV> </DIV> </SPAN> <SPAN ID="c4" STYLE="position:absolute; background-color:black"> <DIV STYLE="position:absolute; left:1px; top:1px; overflow:hidden"> <DIV ID="d4" STYLE="position:relative; left:0; top:0; overflow:hidden"> <VIDEO ID="v4" STYLE="position:absolute"></VIDEO> <IMG ID="n4" SRC="images/g15_05.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute"> </DIV> </DIV> </SPAN> <SPAN ID="c5" STYLE="position:absolute; background-color:black"> <DIV STYLE="position:absolute; left:1px; top:1px; overflow:hidden"> <DIV ID="d5" STYLE="position:relative; left:0; top:0; overflow:hidden"> <VIDEO ID="v5" STYLE="position:absolute"></VIDEO> <IMG ID="n5" SRC="images/g15_06.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute"> </DIV> </DIV> </SPAN> <SPAN ID="c6" STYLE="position:absolute; background-color:black"> <DIV STYLE="position:absolute; left:1px; top:1px; overflow:hidden"> <DIV ID="d6" STYLE="position:relative; left:0; top:0; overflow:hidden"> <VIDEO ID="v6" STYLE="position:absolute"></VIDEO> <IMG ID="n6" SRC="images/g15_07.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute"> </DIV> </DIV> </SPAN> <SPAN ID="c7" STYLE="position:absolute; background-color:black"> <DIV STYLE="position:absolute; left:1px; top:1px; overflow:hidden"> <DIV ID="d7" STYLE="position:relative; left:0; top:0; overflow:hidden"> <VIDEO ID="v7" STYLE="position:absolute"></VIDEO> <IMG ID="n7" SRC="images/g15_08.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute"> </DIV> </DIV> </SPAN> <SPAN ID="c8" STYLE="position:absolute; background-color:black"> <DIV STYLE="position:absolute; left:1px; top:1px; overflow:hidden"> <DIV ID="d8" STYLE="position:relative; left:0; top:0; overflow:hidden"> <VIDEO ID="v8" STYLE="position:absolute"></VIDEO> <IMG ID="n8" SRC="images/g15_09.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute"> </DIV> </DIV> </SPAN> <SPAN ID="c9" STYLE="position:absolute; background-color:black"> <DIV STYLE="position:absolute; left:1px; top:1px; overflow:hidden"> <DIV ID="d9" STYLE="position:relative; left:0; top:0; overflow:hidden"> <VIDEO ID="v9" STYLE="position:absolute"></VIDEO> <IMG ID="n9" SRC="images/g15_10.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute"> </DIV> </DIV> </SPAN> <SPAN ID="c10" STYLE="position:absolute; background-color:black"> <DIV STYLE="position:absolute; left:1px; top:1px; overflow:hidden"> <DIV ID="d10" STYLE="position:relative; left:0; top:0; overflow:hidden"> <VIDEO ID="v10" STYLE="position:absolute"></VIDEO> <IMG ID="n10" SRC="images/g15_11.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute"> </DIV> </DIV> </SPAN> <SPAN ID="c11" STYLE="position:absolute; background-color:black"> <DIV STYLE="position:absolute; left:1px; top:1px; overflow:hidden"> <DIV ID="d11" STYLE="position:relative; left:0; top:0; overflow:hidden"> <VIDEO ID="v11" STYLE="position:absolute"></VIDEO> <IMG ID="n11" SRC="images/g15_12.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute"> </DIV> </DIV> </SPAN> <SPAN ID="c12" STYLE="position:absolute; background-color:black"> <DIV STYLE="position:absolute; left:1px; top:1px; overflow:hidden"> <DIV ID="d12" STYLE="position:relative; left:0; top:0; overflow:hidden"> <VIDEO ID="v12" STYLE="position:absolute"></VIDEO> <IMG ID="n12" SRC="images/g15_13.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute"> </DIV> </DIV> </SPAN> <SPAN ID="c13" STYLE="position:absolute; background-color:black"> <DIV STYLE="position:absolute; left:1px; top:1px; overflow:hidden"> <DIV ID="d13" STYLE="position:relative; left:0; top:0; overflow:hidden"> <VIDEO ID="v13" STYLE="position:absolute"></VIDEO> <IMG ID="n13" SRC="images/g15_14.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute"> </DIV> </DIV> </SPAN> <SPAN ID="c14" STYLE="position:absolute; background-color:black"> <DIV STYLE="position:absolute; left:1px; top:1px; overflow:hidden"> <DIV ID="d14" STYLE="position:relative; left:0; top:0; overflow:hidden"> <VIDEO ID="v14" STYLE="position:absolute"></VIDEO> <IMG ID="n14" SRC="images/g15_15.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute"> </DIV> </DIV> </SPAN> <SPAN ID="c15" STYLE="position:absolute; background-color:black"> <DIV STYLE="position:absolute; left:1px; top:1px; overflow:hidden"> <DIV ID="d15" STYLE="position:relative; left:0; top:0; overflow:hidden"> <VIDEO ID="v15" STYLE="position:absolute"></VIDEO> </DIV> </DIV> </SPAN> <SPAN ID="mask" STYLE="position:absolute; left:0; top:0"></SPAN> <SPAN ID="cong" STYLE="position:absolute; 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 init() { navigator.mozGetUserMedia({video:true, audio:false}, success, error); } function success(stream) { elem_video = document.createElement("VIDEO"); elem_video.autoplay = true; elem_video.addEventListener("canplay", wait, false); if(elem_video.mozSrcObject === undefined) elem_video.srcObject = stream; else elem_video.mozSrcObject = stream; elem_video.play(); } function error(err) { alert("カメラが使用できません"); } function wait() { if(elem_video.videoWidth) { video_width = elem_video.videoWidth; video_height = elem_video.videoHeight; set_size(); for(var i = 0; i < 16; i++) { with(document.getElementById("v" + String(i))) { if(elem_video.mozSrcObject === undefined) srcObject = elem_video.srcObject; else mozSrcObject = elem_video.mozSrcObject; play(); } } document.getElementById("start").disabled = false; elem_video = undefined; return; } setTimeout(wait, 50); } // 構成要素サイズ設定 function set_size() { w_block = (innerWidth - 1) >> 2; h_block = (innerHeight - 1 - document.getElementById("base").offsetTop) >> 2; var w_block_4 = w_block << 2; var h_block_4 = h_block << 2; with(document.getElementById("base").style) { width = String(w_block_4 + 1) + "px"; height = String(h_block_4 + 1) + "px"; } with(document.getElementById("frame").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"; } for(var iy = 0; iy < 4; iy++) { for(var ix = 0; ix < 4; ix++) { with(document.getElementById("c" + String(blocks[iy][ix])).style) { if(blocks[iy][ix] == 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("d" + String(blocks[iy][ix])).style) { width = String(w_block - 1) + "px"; height = String(h_block - 1) + "px"; } with(document.getElementById("v" + String(iy * 4 + ix)).style) { left = String(- ix * w_block) + "px"; top = String(- iy * h_block) + "px"; } } } var sx = String((w_block - 23) >> 1) + "px"; var sy = String((h_block - 14) >> 1) + "px"; for(var i = 0; i < 15; i++) { with(document.getElementById("n" + String(i)).style) { left = sx; top = sy; } } with(document.getElementById("mask").style) { width = String(w_block_4) + "px"; height = String(h_block_4) + "px"; } with(document.getElementById("cong")) { style.left = String((w_block_4 - offsetWidth) >> 1) + "px"; style.top = String((h_block_4 - offsetHeight) >> 1) + "px"; } // 駒移動量 if(!(delta_x = w_block >> 3)) delta_x = w_block; if(!(delta_y = h_block >> 3)) delta_y = h_block; // ビデオ サイズ if(w_block_4 * video_height > h_block_4 * video_width) { var h = w_block_4 * video_height / video_width; for(var i = 0; i < 16; i++) { with(document.getElementById("v" + String(i))) { height = h; width = w_block_4; } } } else { var w = h_block_4 * video_width / video_height; for(var i = 0; i < 16; i++) { with(document.getElementById("v" + String(i))) { width = w; height = h_block_4; } } } } // ゲーム開始 function start_game() { document.getElementById("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; } // 最初から並んでしまった場合はシャッフルやり直し 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 iy = 0; iy < 4; iy++) { for(var ix = 0; ix < 4; ix++) { if(ix == 3 && iy == 3) continue; with(document.getElementById("c" + String(blocks[iy][ix])).style) { left = String(ix * w_block) + "px"; top = String(iy * h_block) + "px"; } } } document.getElementById("c15").style.visibility = "hidden"; document.getElementById("mask").addEventListener("mousedown", clicked, false); } // 駒クリック function clicked(e) { if(e.button != 0) return; 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.getElementById("c" + String(blocks[room_y][x])).style.left = String(x * w_block + off) + "px"; } else { // → for(; x > move_x; x--) document.getElementById("c" + String(blocks[room_y][x])).style.left = String(x * w_block - off) + "px"; } } else { // Y 方向 if((off -= delta_y) < 0) off = 0; var y = room_y; if(room_y < move_y) { // ↑ for(; y < move_y; y++) document.getElementById("c" + String(blocks[y][room_x])).style.top = String(y * h_block + off) + "px"; } else { // ↓ for(; y > move_y; y--) document.getElementById("c" + String(blocks[y][room_x])).style.top = String(y * h_block - off) + "px"; } } if(off) { // 途中 setTimeout(clicked2, 10); 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.getElementById("mask").removeEventListener("mousedown", clicked, false); document.getElementById("c15").style.visibility = "visible"; document.getElementById("cong").style.visibility = "visible"; setTimeout("document.getElementById('cong').style.visibility = 'hidden'", 2000); document.getElementById("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"; } blocks = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]]; // 駒配置 in_clicked = false; // ページを再ロードしたときのため document.forms[0].reset(); document.getElementById("start").disabled = true; //--> </SCRIPT> </BODY) </HTML> |