g15_n4.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" onLoad="set_size()" onResize="set_size()">

<BR>
<FORM onSubmit="return false">
<TABLE CELLSPACING=0><TR>
<TD>画像 URL: <INPUT TYPE=TEXT NAME="image" SIZE=40 onKeyPress="if(event.which == 13) open_image()">
    <INPUT TYPE=BUTTON VALUE="開く" onClick="open_image()"></TD>
<TD WIDTH=10></TD>
<TD><INPUT TYPE=BUTTON VALUE="ゲーム開始" onClick="start_game()"></TD>
<TD WIDTH=10></TD>
<TD><INPUT TYPE=CHECKBOX NAME="bno" CHECKED onClick="block_no(this)">駒番号を表示する</TD>
</TR></TABLE>
</FORM>

<LAYER NAME="base" LEFT=0>
<LAYER NAME="frame" LEFT=0 TOP=0 BGCOLOR=BLACK></LAYER>
<LAYER NAME="back" LEFT=1 TOP=1 BGCOLOR=GRAY></LAYER>

<LAYER NAME="c0" BGCOLOR=BLACK>
<LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER>
<LAYER BACKGROUND="images/g15_01.gif" WIDTH=23 HEIGHT=14></LAYER>
</LAYER>
<LAYER NAME="c1" BGCOLOR=BLACK>
<LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER>
<LAYER BACKGROUND="images/g15_02.gif" WIDTH=23 HEIGHT=14></LAYER>
</LAYER>
<LAYER NAME="c2" BGCOLOR=BLACK>
<LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER>
<LAYER BACKGROUND="images/g15_03.gif" WIDTH=23 HEIGHT=14></LAYER>
</LAYER>
<LAYER NAME="c3" BGCOLOR=BLACK>
<LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER>
<LAYER BACKGROUND="images/g15_04.gif" WIDTH=23 HEIGHT=14></LAYER>
</LAYER>
<LAYER NAME="c4" BGCOLOR=BLACK>
<LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER>
<LAYER BACKGROUND="images/g15_05.gif" WIDTH=23 HEIGHT=14></LAYER>
</LAYER>
<LAYER NAME="c5" BGCOLOR=BLACK>
<LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER>
<LAYER BACKGROUND="images/g15_06.gif" WIDTH=23 HEIGHT=14></LAYER>
</LAYER>
<LAYER NAME="c6" BGCOLOR=BLACK>
<LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER>
<LAYER BACKGROUND="images/g15_07.gif" WIDTH=23 HEIGHT=14></LAYER>
</LAYER>
<LAYER NAME="c7" BGCOLOR=BLACK>
<LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER>
<LAYER BACKGROUND="images/g15_08.gif" WIDTH=23 HEIGHT=14></LAYER>
</LAYER>
<LAYER NAME="c8" BGCOLOR=BLACK>
<LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER>
<LAYER BACKGROUND="images/g15_09.gif" WIDTH=23 HEIGHT=14></LAYER>
</LAYER>
<LAYER NAME="c9" BGCOLOR=BLACK>
<LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER>
<LAYER BACKGROUND="images/g15_10.gif" WIDTH=23 HEIGHT=14></LAYER>
</LAYER>
<LAYER NAME="c10" BGCOLOR=BLACK>
<LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER>
<LAYER BACKGROUND="images/g15_11.gif" WIDTH=23 HEIGHT=14></LAYER>
</LAYER>
<LAYER NAME="c11" BGCOLOR=BLACK>
<LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER>
<LAYER BACKGROUND="images/g15_12.gif" WIDTH=23 HEIGHT=14></LAYER>
</LAYER>
<LAYER NAME="c12" BGCOLOR=BLACK>
<LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER>
<LAYER BACKGROUND="images/g15_13.gif" WIDTH=23 HEIGHT=14></LAYER>
</LAYER>
<LAYER NAME="c13" BGCOLOR=BLACK>
<LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER>
<LAYER BACKGROUND="images/g15_14.gif" WIDTH=23 HEIGHT=14></LAYER>
</LAYER>
<LAYER NAME="c14" BGCOLOR=BLACK>
<LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER>
<LAYER BACKGROUND="images/g15_15.gif" WIDTH=23 HEIGHT=14></LAYER>
</LAYER>
<LAYER NAME="c15" BGCOLOR=BLACK>
<LAYER BGCOLOR=WHITE><LAYER></LAYER></LAYER>
</LAYER>

<LAYER NAME="mask" LEFT=1 TOP=1  CLIP="0,0,1,1" VISIBILITY="hide">
<A HREF="javascript:void(0)" onMouseDown="clicked(event)" onClick="return false">
<IMG SRC="images/dummy.gif" WIDTH=3000 HEIGHT=3000 BORDER=0 ALT=""></A>
</LAYER>

<LAYER NAME="loading" BGCOLOR=WHITE VISIBILITY="hide">
<BR>
<FONT COLOR=BLACK><B> 画像ロード中... <BR></B></FONT>
<BR>
</LAYER>

<LAYER NAME="cong" BGCOLOR=WHITE VISIBILITY="hide">
<BR>
<FONT SIZE=5 COLOR=RED><B> おめでとう! <BR></B></FONT>
<BR>
</LAYER>
</LAYER>

<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--

// 構成要素サイズ設定
function set_size() {
  var old_w_block = w_block;
  var old_h_block = h_block;
  w_block = (innerWidth - 1) >> 2;
  h_block = (innerHeight - 1 - document.base.top) >> 2;
  if(w_block < old_w_block || h_block < old_h_block) {
    // スクロール バーを消す
    resizeBy(1, 0);
    setTimeout("resizeBy(-1, 0); set_size2()", 0);
  }
  else {
    set_size2();
  }
}

function set_size2() {
  var w_block_4 = w_block << 2;
  var h_block_4 = h_block << 2;

  var base;
  with(document.base) {
    resizeTo(w_block_4 + 1, h_block_4 + 1);
    base = document;
  }
  base.frame.resizeTo(w_block_4 + 1, h_block_4 + 1);
  base.back.resizeTo(w_block_4 - 1, h_block_4 - 1);

  for(var y_ = 0; y_ < 4; y_++) {
    for(var x_ = 0; x_ < 4; x_++) {
      with(base.layers["c" + String(blocks[y_][x_])]) {
        moveTo(x_ * w_block, y_ * h_block);
        resizeTo(w_block + 1, h_block + 1);
        with(document.layers[0]) {
          moveTo(- x_ * w_block, - y_ * h_block);
          clip.left = x_ * w_block + 1;
          clip.top  = y_ * h_block + 1;
          resizeTo(w_block - 1, h_block - 1);
        }
      }
    }
  }

  for(var i = 0; i < 15; i++)
    base.layers["c" + String(i)].document.layers[1].moveTo((w_block - 23) >> 1, (h_block - 14) >> 1);  // 駒番号

  base.mask.resizeTo(w_block_4, h_block_4);

  with(base.cong) {
    moveTo((w_block_4 - clip.width) >> 1, (h_block_4 - clip.height) >> 1);
  }

  with(base.loading) {
    moveTo((w_block_4 - clip.width) >> 1, (h_block_4 - clip.height) >> 1);
  }

  // 駒移動量
  if(!(delta_x = w_block >> 3))
    delta_x = w_block;
  if(!(delta_y = h_block >> 3))
    delta_y = h_block;

  // リサイズすると何故か onMouseDown イベントが発生しなくなるので再登録
  base.mask.document.links[0].onMouseDown = "clicked(event)";
}

// 画像を開く
function open_image() {
  if(document.forms[0].image.value == "") {
    open_image4();
    return;
  }
  document.base.document.loading.visibility = "show";
  image = new Image();
  image.onload  = open_image2;
  image.onerror = open_image4;
  image.src = document.forms[0].image.value;
}

function open_image2() {
  for(var i = 0; i < 16; i++) {
    with(document.base.document.layers["c" + String(i)].document.layers[0].document.layers[0]) {
      resizeTo(image.width, image.height);
      background.src = image.src;  // 画像
      visibility = "hide";  // ロード直後,画像が表示されない場合があるので,
                            // 一旦非表示にして表示し直す.
    }
  }
  setTimeout("open_image3()", 0);
}

function open_image3() {
  for(var i = 0; i < 16; i++)
    document.base.document.layers["c" + String(i)].document.layers[0].document.layers[0].visibility = "inherit";
  document.base.document.loading.visibility = "hide";
}

function open_image4() {
  for(var i = 0; i < 16; i++)
    document.base.document.layers["c" + String(i)].document.layers[0].document.layers[0].background.src = null;
  document.base.document.loading.visibility = "hide";
}

// ゲーム開始
function start_game() {
  if(document.base.document.c15.visibility == "hide")  // プレイ中
    return;

  // シャッフル
  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;
      document.base.document.layers["c" + String(blocks[y_][x_])].moveTo(x_ * w_block, y_ * h_block);
    }
  }
  document.base.document.c15.visibility = "hide";
  document.base.document.mask.visibility = "show";
}

// 駒クリック
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.base.document.layers["c" + String(blocks[room_y][x_])].left = x_ * w_block + off;
    }
    else {                 // →
      for(; x_ > move_x; x_--)
        document.base.document.layers["c" + String(blocks[room_y][x_])].left = x_ * w_block - off;
    }
  }
  else {                  // Y 方向
    if((off -= delta_y) < 0)
      off = 0;
    var y_ = room_y;
    if(room_y < move_y) {  // ↑
      for(; y_ < move_y; y_++)
        document.base.document.layers["c" + String(blocks[y_][room_x])].top = y_ * h_block + off;
    }
    else {                 // ↓
      for(; y_ > move_y; y_--)
        document.base.document.layers["c" + String(blocks[y_][room_x])].top = y_ * h_block - off;
    }
  }

  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.base.document.mask.visibility = "hide";
  document.base.document.c15.visibility = "show";
  document.base.document.cong.visibility = "show";
  setTimeout("document.base.document.cong.visibility = 'hide'", 2000);
}

// 駒番号表示/非表示
function block_no(me) {
  for(var i = 0; i < 15; i++)
    document.base.document.layers["c" + String(i)].document.layers[1].visibility = (me.checked) ? "show" : "hide";
}

  blocks = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]];  // 駒配置

  in_clicked = false;
  w_block = h_block = 0;

  document.forms[0].bno.checked = true;  // CHECKED アトリビュートが効かない場合がある

//-->
</SCRIPT>

</BODY>

</HTML>