<!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 STYLE="margin:0; overflow:hidden" onLoad="set_size()" onResize="set_size()">
<DIV ALIGN=CENTER STYLE="position:relative; z-index:3">
<BR>
<FORM onSubmit="return false">
<TABLE CELLSPACING=0><TR>
<TD>URL: <INPUT TYPE=TEXT ID="page" SIZE=60 onKeyPress="if(event.which == 13) open_page()">
<INPUT TYPE=BUTTON VALUE="開く" onClick="open_page()"></TD>
<TD WIDTH=10></TD>
<TD><INPUT TYPE=BUTTON ID="start" VALUE="ゲーム開始" onClick="start_game()"></TD>
<TD WIDTH=10></TD>
<TD><INPUT TYPE=CHECKBOX ID="bno" CHECKED onClick="block_no(this)">駒番号を表示する</TD>
</TR></TABLE>
</FORM>
</DIV>
<DIV ID="base" STYLE="position:relative; z-index:0">
<SPAN ID="frame" STYLE="position:absolute; left:0; top:0; background-color:black"></SPAN>
<SPAN ID="b0" STYLE="position:absolute; background-color:gray"></SPAN>
<SPAN ID="b1" STYLE="position:absolute; background-color:gray"></SPAN>
<SPAN ID="b2" STYLE="position:absolute; background-color:gray"></SPAN>
<SPAN ID="b3" STYLE="position:absolute; background-color:gray"></SPAN>
<SPAN ID="b4" STYLE="position:absolute; background-color:gray"></SPAN>
<SPAN ID="b5" STYLE="position:absolute; background-color:gray"></SPAN>
<SPAN ID="b6" STYLE="position:absolute; background-color:gray"></SPAN>
<SPAN ID="b7" STYLE="position:absolute; background-color:gray"></SPAN>
<SPAN ID="b8" STYLE="position:absolute; background-color:gray"></SPAN>
<SPAN ID="b9" STYLE="position:absolute; background-color:gray"></SPAN>
<SPAN ID="b10" STYLE="position:absolute; background-color:gray"></SPAN>
<SPAN ID="b11" STYLE="position:absolute; background-color:gray"></SPAN>
<SPAN ID="b12" STYLE="position:absolute; background-color:gray"></SPAN>
<SPAN ID="b13" STYLE="position:absolute; background-color:gray"></SPAN>
<SPAN ID="b14" STYLE="position:absolute; background-color:gray"></SPAN>
<SPAN ID="b15" STYLE="position:absolute; background-color:gray"></SPAN>
<SPAN ID="c0" STYLE="position:absolute; overflow:hidden">
<IFRAME ID="f0" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO MARGINWIDTH=0 MARGINHEIGHT=0 STYLE="position:absolute"></IFRAME>
<IMG ID="n0" SRC="images/g15_01.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute">
</SPAN>
<SPAN ID="c1" STYLE="position:absolute; overflow:hidden">
<IFRAME ID="f1" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO MARGINWIDTH=0 MARGINHEIGHT=0 STYLE="position:absolute"></IFRAME>
<IMG ID="n1" SRC="images/g15_02.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute">
</SPAN>
<SPAN ID="c2" STYLE="position:absolute; overflow:hidden">
<IFRAME ID="f2" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO MARGINWIDTH=0 MARGINHEIGHT=0 STYLE="position:absolute"></IFRAME>
<IMG ID="n2" SRC="images/g15_03.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute">
</SPAN>
<SPAN ID="c3" STYLE="position:absolute; overflow:hidden">
<IFRAME ID="f3" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO MARGINWIDTH=0 MARGINHEIGHT=0 STYLE="position:absolute"></IFRAME>
<IMG ID="n3" SRC="images/g15_04.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute">
</SPAN>
<SPAN ID="c4" STYLE="position:absolute; overflow:hidden">
<IFRAME ID="f4" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO MARGINWIDTH=0 MARGINHEIGHT=0 STYLE="position:absolute"></IFRAME>
<IMG ID="n4" SRC="images/g15_05.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute">
</SPAN>
<SPAN ID="c5" STYLE="position:absolute; overflow:hidden">
<IFRAME ID="f5" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO MARGINWIDTH=0 MARGINHEIGHT=0 STYLE="position:absolute"></IFRAME>
<IMG ID="n5" SRC="images/g15_06.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute">
</SPAN>
<SPAN ID="c6" STYLE="position:absolute; overflow:hidden">
<IFRAME ID="f6" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO MARGINWIDTH=0 MARGINHEIGHT=0 STYLE="position:absolute"></IFRAME>
<IMG ID="n6" SRC="images/g15_07.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute">
</SPAN>
<SPAN ID="c7" STYLE="position:absolute; overflow:hidden">
<IFRAME ID="f7" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO MARGINWIDTH=0 MARGINHEIGHT=0 STYLE="position:absolute"></IFRAME>
<IMG ID="n7" SRC="images/g15_08.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute">
</SPAN>
<SPAN ID="c8" STYLE="position:absolute; overflow:hidden">
<IFRAME ID="f8" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO MARGINWIDTH=0 MARGINHEIGHT=0 STYLE="position:absolute"></IFRAME>
<IMG ID="n8" SRC="images/g15_09.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute">
</SPAN>
<SPAN ID="c9" STYLE="position:absolute; overflow:hidden">
<IFRAME ID="f9" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO MARGINWIDTH=0 MARGINHEIGHT=0 STYLE="position:absolute"></IFRAME>
<IMG ID="n9" SRC="images/g15_10.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute">
</SPAN>
<SPAN ID="c10" STYLE="position:absolute; overflow:hidden">
<IFRAME ID="f10" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO MARGINWIDTH=0 MARGINHEIGHT=0 STYLE="position:absolute"></IFRAME>
<IMG ID="n10" SRC="images/g15_11.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute">
</SPAN>
<SPAN ID="c11" STYLE="position:absolute; overflow:hidden">
<IFRAME ID="f11" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO MARGINWIDTH=0 MARGINHEIGHT=0 STYLE="position:absolute"></IFRAME>
<IMG ID="n11" SRC="images/g15_12.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute">
</SPAN>
<SPAN ID="c12" STYLE="position:absolute; overflow:hidden">
<IFRAME ID="f12" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO MARGINWIDTH=0 MARGINHEIGHT=0 STYLE="position:absolute"></IFRAME>
<IMG ID="n12" SRC="images/g15_13.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute">
</SPAN>
<SPAN ID="c13" STYLE="position:absolute; overflow:hidden">
<IFRAME ID="f13" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO MARGINWIDTH=0 MARGINHEIGHT=0 STYLE="position:absolute"></IFRAME>
<IMG ID="n13" SRC="images/g15_14.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute">
</SPAN>
<SPAN ID="c14" STYLE="position:absolute; overflow:hidden">
<IFRAME ID="f14" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO MARGINWIDTH=0 MARGINHEIGHT=0 STYLE="position:absolute"></IFRAME>
<IMG ID="n14" SRC="images/g15_15.gif" WIDTH=23 HEIGHT=14 STYLE="position:absolute">
</SPAN>
<SPAN ID="c15" STYLE="position:absolute; overflow:hidden">
<IFRAME ID="f15" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO MARGINWIDTH=0 MARGINHEIGHT=0 STYLE="position:absolute"></IFRAME>
</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>
<SPAN ID="mask1" STYLE="position:absolute; left:0; top:0; z-index:1"></SPAN>
<A ID="mask2" HREF="javascript:void(0)" STYLE="position:absolute; visibility:hidden; z-index:2" onMouseDown="clicked(event)" onFocus="this.blur()"></A>
<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--
// 構成要素サイズ設定
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";
}
for(var i = 0; i < 16; i++) {
with(document.getElementById("b" + String(i)).style) {
left = String((i & 0x3) * w_block + 1) + "px";
top = String((i >> 2) * h_block + 1) + "px";
width = String(w_block - 1) + "px";
height = String(h_block - 1) + "px";
}
}
for(var y = 0; y < 4; y++) {
for(var x = 0; x < 4; x++) {
with(document.getElementById("c" + String(blocks[y][x])).style) {
if(blocks[y][x] == 15) {
left = String(3 * w_block + 1) + "px";
top = String(3 * h_block + 1) + "px";
}
else {
left = String(x * w_block + 1) + "px";
top = String(y * h_block + 1) + "px";
}
width = String(w_block - 1) + "px";
height = String(h_block - 1) + "px";
}
with(document.getElementById("f" + String(y * 4 + x)).style) {
left = String(- x * w_block) + "px";
top = String(- y * h_block) + "px";
width = String(w_block_4 - 1) + "px";
height = String(h_block_4 - 1) + "px";
}
}
}
for(var i = 0; i < 15; i++) {
with(document.getElementById("n" + String(i)).style) {
left = String((w_block - 23) >> 1) + "px";
top = String((h_block - 14) >> 1) + "px";
}
}
// クリップした領域の外でもリンク等が生きているので，マスクは画面全体に対して行う必要がある．
with(document.getElementById("mask1").style) {
width = String(innerWidth) + "px";
height = String(innerHeight) + "px";
}
with(document.getElementById("mask2").style) {
with(document.getElementById("base")) {
left = String(offsetLeft + 1) + "px";
top = String(offsetTop + 1) + "px";
}
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";
}
}
// ページを開く
function open_page() {
for(var i = 0; i < 16; i++)
document.getElementById("f" + String(i)).src = document.getElementById("page").value;
}
// ゲーム開始
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;
}
// 最初から並んでしまった場合はシャッフルやり直し
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 y = 0; y < 4; y++) {
for(var x = 0; x < 4; x++) {
if(x == 3 && y == 3)
continue;
with(document.getElementById("c" + String(blocks[y][x])).style) {
left = String(x * w_block + 1) + "px";
top = String(y * h_block + 1) + "px";
}
}
}
document.getElementById("c15").style.visibility = "hidden";
document.getElementById("mask2").style.visibility = "visible";
}
// 駒クリック
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;
// 移動するとき周りの画像（IFRAME の領域）も一緒に移動してしまい，ちらつくので，
// 一旦完全に表示領域外に出すことによって，画像がスクロールしないようにする．
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];
document.getElementById("c" + String(blocks[room_y][x])).style.left = "10000px";
}
}
else { // →
for(; x > move_x; x--) {
blocks[room_y][x] = blocks[room_y][x - 1];
document.getElementById("c" + String(blocks[room_y][x])).style.left = "10000px";
}
}
}
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];
document.getElementById("c" + String(blocks[y][room_x])).style.top = "10000px";
}
}
else { // ↓
for(; y > move_y; y--) {
blocks[y][room_x] = blocks[y - 1][room_x];
document.getElementById("c" + String(blocks[y][room_x])).style.top = "10000px";
}
}
}
in_clicked = true;
setTimeout("clicked2()", 0);
}
function clicked2() {
in_clicked = false;
if(move_x != room_x) { // X 方向
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 + 1) + "px";
}
else { // →
for(; x > move_x; x--)
document.getElementById("c" + String(blocks[room_y][x])).style.left = String(x * w_block + 1) + "px";
}
}
else { // Y 方向
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 + 1) + "px";
}
else { // ↓
for(; y > move_y; y--)
document.getElementById("c" + String(blocks[y][room_x])).style.top = String(y * h_block + 1) + "px";
}
}
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("mask2").style.visibility = "hidden";
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";
}
for(var i = 0; i < 16; i++)
document.getElementById("f" + String(i)).style.backgroundColor = document.bgColor;
document.bgColor = "CCFFFF";
blocks = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]]; // 駒配置
in_clicked = false;
document.getElementById("bno").checked = true; // CHECKED アトリビュートが効かない場合がある
//-->
</SCRIPT>
</BODY>
</HTML>
|
