g15_n6.htm

戻る

<!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 BGCOLOR="#CCFFFF" STYLE="margin:0; overflow:hidden" onLoad="set_size()" onResize="set_size()">

<DIV ALIGN=CENTER>
<BR>
<FORM onSubmit="return false">
<TABLE CELLSPACING=0><TR>
<TD>画像 URL: <INPUT TYPE=TEXT ID="image" SIZE=60 onKeyPress="if(event.which == 13) open_image()">
    <INPUT TYPE=BUTTON VALUE="開く" onClick="open_image()"></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">
<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; background-color:white">
<DIV ID="d0" STYLE="position:relative; left:0; top:0; overflow:hidden">
<IMG ID="i0" STYLE="position:absolute; visibility:hidden">
<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; background-color:white">
<DIV ID="d1" STYLE="position:relative; left:0; top:0; overflow:hidden">
<IMG ID="i1" STYLE="position:absolute; visibility:hidden">
<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; background-color:white">
<DIV ID="d2" STYLE="position:relative; left:0; top:0; overflow:hidden">
<IMG ID="i2" STYLE="position:absolute; visibility:hidden">
<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; background-color:white">
<DIV ID="d3" STYLE="position:relative; left:0; top:0; overflow:hidden">
<IMG ID="i3" STYLE="position:absolute; visibility:hidden">
<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; background-color:white">
<DIV ID="d4" STYLE="position:relative; left:0; top:0; overflow:hidden">
<IMG ID="i4" STYLE="position:absolute; visibility:hidden">
<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; background-color:white">
<DIV ID="d5" STYLE="position:relative; left:0; top:0; overflow:hidden">
<IMG ID="i5" STYLE="position:absolute; visibility:hidden">
<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; background-color:white">
<DIV ID="d6" STYLE="position:relative; left:0; top:0; overflow:hidden">
<IMG ID="i6" STYLE="position:absolute; visibility:hidden">
<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; background-color:white">
<DIV ID="d7" STYLE="position:relative; left:0; top:0; overflow:hidden">
<IMG ID="i7" STYLE="position:absolute; visibility:hidden">
<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; background-color:white">
<DIV ID="d8" STYLE="position:relative; left:0; top:0; overflow:hidden">
<IMG ID="i8" STYLE="position:absolute; visibility:hidden">
<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; background-color:white">
<DIV ID="d9" STYLE="position:relative; left:0; top:0; overflow:hidden">
<IMG ID="i9" STYLE="position:absolute; visibility:hidden">
<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; background-color:white">
<DIV ID="d10" STYLE="position:relative; left:0; top:0; overflow:hidden">
<IMG ID="i10" STYLE="position:absolute; visibility:hidden">
<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; background-color:white">
<DIV ID="d11" STYLE="position:relative; left:0; top:0; overflow:hidden">
<IMG ID="i11" STYLE="position:absolute; visibility:hidden">
<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; background-color:white">
<DIV ID="d12" STYLE="position:relative; left:0; top:0; overflow:hidden">
<IMG ID="i12" STYLE="position:absolute; visibility:hidden">
<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; background-color:white">
<DIV ID="d13" STYLE="position:relative; left:0; top:0; overflow:hidden">
<IMG ID="i13" STYLE="position:absolute; visibility:hidden">
<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; background-color:white">
<DIV ID="d14" STYLE="position:relative; left:0; top:0; overflow:hidden">
<IMG ID="i14" STYLE="position:absolute; visibility:hidden">
<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; background-color:white">
<DIV ID="d15" STYLE="position:relative; left:0; top:0; overflow:hidden">
<IMG ID="i15" STYLE="position:absolute; visibility:hidden">
</DIV>
</DIV>
</SPAN>

<A ID="mask" HREF="javascript:void(0)" STYLE="position:absolute; left:1px; top:1px; visibility:hidden" onMouseDown="clicked(event)" onClick="return false" onFocus="this.blur()"></A>

<SPAN ID="loading" STYLE="position:absolute; font-weight:bold; letter-spacing:2px; padding:4px 16px; color:black; background-color:white; visibility:hidden">画像ロード中...</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 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";
  }
  with(document.getElementById("back").style) {
    width  = String(w_block_4 - 1) + "px";
    height = String(h_block_4 - 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) + "px";
          top  = String(3 * h_block) + "px";
        }
        else {
          left = String(x * w_block) + "px";
          top  = String(y * h_block) + "px";
        }
        width  = String(w_block + 1) + "px";
        height = String(h_block + 1) + "px";
      }
      with(document.getElementById("d" + String(blocks[y][x])).style) {
        width  = String(w_block - 1) + "px";
        height = String(h_block - 1) + "px";
      }
      with(document.getElementById("i" + String(y * 4 + x)).style) {
        left = String(- x * w_block) + "px";
        top  = String(- y * h_block) + "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("mask").style) {
    width  = String(w_block_4) + "px";
    height = String(h_block_4) + "px";
  }
  with(document.getElementById("loading")) {
    style.left = String((w_block_4 - offsetWidth)  >> 1) + "px";
    style.top  = String((h_block_4 - offsetHeight) >> 1) + "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;
}

// 画像を開く
function open_image() {
  if(document.getElementById("image").value == "") {
    open_image4();
    return;
  }
  document.getElementById("loading").style.visibility = "visible";
  image = new Image();          // 何故かイベントが最初の 1 回しか発生しないので,
  image.onload  = open_image2;  // 毎回オブジェクトを作り直す
  image.onerror = open_image4;
  image.src = document.getElementById("image").value;
}

function open_image2() {
  for(var i = 0; i < 16; i++) {
    with(document.getElementById("i" + String(i))) {
//    width  = image.width;
      width  = image.width - 1;  // ロード直後,画像が表示されない駒があるので,
                                 // width を変更して表示を確実にする.
      height = image.height;
      src = image.src;
      style.visibility = "inherit";
    }
  }
  setTimeout("open_image3()", 1000);  // 画像の onLoad でやればよさそうなものだが,
                                      // 何故かイベントが最初の 1 回しか発生しない
}

function open_image3() {
  for(var i = 0; i < 16; i++)
    document.getElementById("i" + String(i)).width = image.width;
  document.getElementById("loading").style.visibility = "hidden";
}

function open_image4() {
  for(var i = 0; i < 16; i++)
    document.getElementById("i" + String(i)).style.visibility = "hidden";
  document.getElementById("loading").style.visibility = "hidden";
}

// ゲーム開始
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 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) + "px";
        top  = String(y * h_block) + "px";
      }
    }
  }
  document.getElementById("c15").style.visibility = "hidden";
  document.getElementById("mask").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;

  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()", 0);
    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").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";
}

  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>