hyper153.htm

戻る

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