<!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>
|
