hyper152.htm

戻る

<!DOCTYPE HTML>
<HTML LANG="ja" STYLE="height:100%">

<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>ハイパー 15 ゲーム(SVG フィルタ版)</TITLE>
<svg height=0 style="height:0">
<filter id="filter" x="0%" y="0%" width="100%" height="100%">

<!-- 0 -->
<feFlood id="f0" flood-color="black" flood-opacity="1" x="0" y="0" width="0" height="0" result="f0"></feFlood>
<feOffset id="c0" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0" result="c0"></feOffset>
<feImage id="n0" href="" x="-100" y="0" width="40" height="24" result="n0"></feImage>
<feMerge>
<feMergeNode in="f0"></feMergeNode>
<feMergeNode in="c0"></feMergeNode>
<feMergeNode in="n0"></feMergeNode>
</feMerge>
<feOffset id="b0" width="100%" height="100%" dx="0" dy="0" result="b0"></feOffset>
<!-- 1 -->
<feFlood id="f1" flood-color="black" flood-opacity="1" x="0" y="0" width="0" height="0" result="f1"></feFlood>
<feOffset id="c1" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0" result="c1"></feOffset>
<feImage id="n1" href="" x="-100" y="0" width="40" height="24" result="n1"></feImage>
<feMerge>
<feMergeNode in="f1"></feMergeNode>
<feMergeNode in="c1"></feMergeNode>
<feMergeNode in="n1"></feMergeNode>
</feMerge>
<feOffset id="b1" width="100%" height="100%" result="b1"></feOffset>
<!-- 2 -->
<feFlood id="f2" flood-color="black" flood-opacity="1" x="0" y="0" width="0" height="0" result="f2"></feFlood>
<feOffset id="c2" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0" result="c2"></feOffset>
<feImage id="n2" href="" x="-100" y="0" width="40" height="24" result="n2"></feImage>
<feMerge>
<feMergeNode in="f2"></feMergeNode>
<feMergeNode in="c2"></feMergeNode>
<feMergeNode in="n2"></feMergeNode>
</feMerge>
<feOffset id="b2" width="100%" height="100%" dx="0" dy="0" result="b2"></feOffset>
<!-- 3 -->
<feFlood id="f3" flood-color="black" flood-opacity="1" x="0" y="0" width="0" height="0" result="f3"></feFlood>
<feOffset id="c3" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0" result="c3"></feOffset>
<feImage id="n3" href="" x="-100" y="0" width="40" height="24" result="n3"></feImage>
<feMerge>
<feMergeNode in="f3"></feMergeNode>
<feMergeNode in="c3"></feMergeNode>
<feMergeNode in="n3"></feMergeNode>
</feMerge>
<feOffset id="b3" width="100%" height="100%" dx="0" dy="0" result="b3"></feOffset>
<!-- 4 -->
<feFlood id="f4" flood-color="black" flood-opacity="1" x="0" y="0" width="0" height="0" result="f4"></feFlood>
<feOffset id="c4" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0" result="c4"></feOffset>
<feImage id="n4" href="" x="-100" y="0" width="40" height="24" result="n4"></feImage>
<feMerge>
<feMergeNode in="f4"></feMergeNode>
<feMergeNode in="c4"></feMergeNode>
<feMergeNode in="n4"></feMergeNode>
</feMerge>
<feOffset id="b4" width="100%" height="100%" dx="0" dy="0" result="b4"></feOffset>
<!-- 5 -->
<feFlood id="f5" flood-color="black" flood-opacity="1" x="0" y="0" width="0" height="0" result="f5"></feFlood>
<feOffset id="c5" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0" result="c5"></feOffset>
<feImage id="n5" href="" x="-100" y="0" width="40" height="24" result="n5"></feImage>
<feMerge>
<feMergeNode in="f5"></feMergeNode>
<feMergeNode in="c5"></feMergeNode>
<feMergeNode in="n5"></feMergeNode>
</feMerge>
<feOffset id="b5" width="100%" height="100%" dx="0" dy="0" result="b5"></feOffset>
<!-- 6 -->
<feFlood id="f6" flood-color="black" flood-opacity="1" x="0" y="0" width="0" height="0" result="f6"></feFlood>
<feOffset id="c6" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0" result="c6"></feOffset>
<feImage id="n6" href="" x="-100" y="0" width="40" height="24" result="n6"></feImage>
<feMerge>
<feMergeNode in="f6"></feMergeNode>
<feMergeNode in="c6"></feMergeNode>
<feMergeNode in="n6"></feMergeNode>
</feMerge>
<feOffset id="b6" width="100%" height="100%" dx="0" dy="0" result="b6"></feOffset>
<!-- 7 -->
<feFlood id="f7" flood-color="black" flood-opacity="1" x="0" y="0" width="0" height="0" result="f7"></feFlood>
<feOffset id="c7" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0" result="c7"></feOffset>
<feImage id="n7" href="" x="-100" y="0" width="40" height="24" result="n7"></feImage>
<feMerge>
<feMergeNode in="f7"></feMergeNode>
<feMergeNode in="c7"></feMergeNode>
<feMergeNode in="n7"></feMergeNode>
</feMerge>
<feOffset id="b7" width="100%" height="100%" dx="0" dy="0" result="b7"></feOffset>
<!-- 8 -->
<feFlood id="f8" flood-color="black" flood-opacity="1" x="0" y="0" width="0" height="0" result="f8"></feFlood>
<feOffset id="c8" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0" result="c8"></feOffset>
<feImage id="n8" href="" x="-100" y="0" width="40" height="24" result="n8"></feImage>
<feMerge>
<feMergeNode in="f8"></feMergeNode>
<feMergeNode in="c8"></feMergeNode>
<feMergeNode in="n8"></feMergeNode>
</feMerge>
<feOffset id="b8" width="100%" height="100%" dx="0" dy="0" result="b8"></feOffset>
<!-- 9 -->
<feFlood id="f9" flood-color="black" flood-opacity="1" x="0" y="0" width="0" height="0" result="f9"></feFlood>
<feOffset id="c9" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0" result="c9"></feOffset>
<feImage id="n9" href="" x="-100" y="0" width="40" height="24" result="n9"></feImage>
<feMerge>
<feMergeNode in="f9"></feMergeNode>
<feMergeNode in="c9"></feMergeNode>
<feMergeNode in="n9"></feMergeNode>
</feMerge>
<feOffset id="b9" width="100%" height="100%" dx="0" dy="0" result="b9"></feOffset>
<!-- 10 -->
<feFlood id="f10" flood-color="black" flood-opacity="1" x="0" y="0" width="0" height="0" result="f10"></feFlood>
<feOffset id="c10" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0" result="c10"></feOffset>
<feImage id="n10" href="" x="-100" y="0" width="40" height="24" result="n10"></feImage>
<feMerge>
<feMergeNode in="f10"></feMergeNode>
<feMergeNode in="c10"></feMergeNode>
<feMergeNode in="n10"></feMergeNode>
</feMerge>
<feOffset id="b10" width="100%" height="100%" dx="0" dy="0" result="b10"></feOffset>
<!-- 11 -->
<feFlood id="f11" flood-color="black" flood-opacity="1" x="0" y="0" width="0" height="0" result="f11"></feFlood>
<feOffset id="c11" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0" result="c11"></feOffset>
<feImage id="n11" href="" x="-100" y="0" width="40" height="24" result="n11"></feImage>
<feMerge>
<feMergeNode in="f11"></feMergeNode>
<feMergeNode in="c11"></feMergeNode>
<feMergeNode in="n11"></feMergeNode>
</feMerge>
<feOffset id="b11" width="100%" height="100%" dx="0" dy="0" result="b11"></feOffset>
<!-- 12 -->
<feFlood id="f12" flood-color="black" flood-opacity="1" x="0" y="0" width="0" height="0" result="f12"></feFlood>
<feOffset id="c12" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0" result="c12"></feOffset>
<feImage id="n12" href="" x="-100" y="0" width="40" height="24" result="n12"></feImage>
<feMerge>
<feMergeNode in="f12"></feMergeNode>
<feMergeNode in="c12"></feMergeNode>
<feMergeNode in="n12"></feMergeNode>
</feMerge>
<feOffset id="b12" width="100%" height="100%" dx="0" dy="0" result="b12"></feOffset>
<!-- 13 -->
<feFlood id="f13" flood-color="black" flood-opacity="1" x="0" y="0" width="0" height="0" result="f13"></feFlood>
<feOffset id="c13" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0" result="c13"></feOffset>
<feImage id="n13" href="" x="-100" y="0" width="40" height="24" result="n13"></feImage>
<feMerge>
<feMergeNode in="f13"></feMergeNode>
<feMergeNode in="c13"></feMergeNode>
<feMergeNode in="n13"></feMergeNode>
</feMerge>
<feOffset id="b13" width="100%" height="100%" dx="0" dy="0" result="b13"></feOffset>
<!-- 14 -->
<feFlood id="f14" flood-color="black" flood-opacity="1" x="0" y="0" width="0" height="0" result="f14"></feFlood>
<feOffset id="c14" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0" result="c14"></feOffset>
<feImage id="n14" href="" x="-100" y="0" width="40" height="24" result="n14"></feImage>
<feMerge>
<feMergeNode in="f14"></feMergeNode>
<feMergeNode in="c14"></feMergeNode>
<feMergeNode in="n14"></feMergeNode>
</feMerge>
<feOffset id="b14" width="100%" height="100%" dx="0" dy="0" result="b14"></feOffset>
<!-- 15 -->
<feFlood id="f15" flood-color="black" flood-opacity="1" x="0" y="0" width="0" height="0" result="f15"></feFlood>
<feOffset id="c15" in="SourceGraphic" x="1" y="1" width="0" height="0" dx="0" dy="0" result="c15"></feOffset>
<feMerge>
<feMergeNode in="f15"></feMergeNode>
<feMergeNode in="c15"></feMergeNode>
</feMerge>
<feOffset id="b15" width="100%" height="100%" dx="0" dy="0" result="b15"></feOffset>

<feMerge>
<feMergeNode in="b0"></feMergeNode>
<feMergeNode in="b1"></feMergeNode>
<feMergeNode in="b2"></feMergeNode>
<feMergeNode in="b3"></feMergeNode>
<feMergeNode in="b4"></feMergeNode>
<feMergeNode in="b5"></feMergeNode>
<feMergeNode in="b6"></feMergeNode>
<feMergeNode in="b7"></feMergeNode>
<feMergeNode in="b8"></feMergeNode>
<feMergeNode in="b9"></feMergeNode>
<feMergeNode in="b10"></feMergeNode>
<feMergeNode in="b11"></feMergeNode>
<feMergeNode in="b12"></feMergeNode>
<feMergeNode in="b13"></feMergeNode>
<feMergeNode in="b14"></feMergeNode>
<feMergeNode in="b15"></feMergeNode>
</feMerge>
</filter>
<animate id="anim0" href="" attributeName="" from="" to="" begin="indefinite" dur="0.1s" fill="remove"></animate>
<animate id="anim1" href="" attributeName="" from="" to="" begin="indefinite" dur="0.1s" fill="remove"></animate>
<animate id="anim2" href="" attributeName="" from="" to="" begin="indefinite" dur="0.1s" fill="remove"></animate>
</svg>
</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">
<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">
<DIV ID="back" STYLE="position:absolute; left:0; top:0; background-color:gray; border:solid 1px black"></DIV>
<IFRAME ID="src" SRC="about:blank" FRAMEBORDER=0 SCROLLING=NO SANDBOX="allow-scripts" STYLE="position:absolute; left:0; top:0; background-color:white; filter:url(#filter)"></IFRAME>

<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;
  }

  var n_off_x = (w_block - 40) >> 1;
  var n_off_y = (h_block - 24) >> 1;
  for(i = 0; ; i++) {
    var i_str = String(i);
    with(document.getElementById("f" + i_str)) {
      width.baseVal.value = w_block + 1;
      height.baseVal.value = h_block + 1;
    }
    with(document.getElementById("c" + i_str)) {
      width.baseVal.value = w_block - 1;
      height.baseVal.value = h_block - 1;
    }
    if(i == 15)
      break;
    with(document.getElementById("n" + i_str)) {
      x.baseVal.value = n_off_x;
      y.baseVal.value = n_off_y;
    }
  }

  for(var iy = 0; iy < 4; iy++) {
    for(var ix = 0; ix < 4; ix++) {
      with(document.getElementById("c" + String((iy << 2) | ix))) {
        dx.baseVal = - ix * w_block;
        dy.baseVal = - iy * h_block;
      }
      i = blocks[iy][ix];
      with(document.getElementById("b" + String(i))) {
        if(i == 15) {
          dx.baseVal = 3 * w_block;
          dy.baseVal = 3 * h_block;
        }
        else {
          dx.baseVal = ix * w_block;
          dy.baseVal = iy * h_block;
        }
      }
    }
  }
}

// ページを開く
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;
    }
    // 最初から並んでしまった場合はシャッフルやり直し
    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 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]))) {
          dx.baseVal = ix * w_block;
          dy.baseVal = iy * h_block;
        }
      }
    }
  }
  document.getElementById("b15").width.baseVal.valueInSpecifiedUnits = 0;
  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 i_anim = 0;
  var from, to;
  var i_str;
  if(move_x != room_x) {  // X 方向
    by = (room_x < move_x) ? 1 : -1;
    to = room_x * w_block;
    for(var x = room_x; x != move_x; x += by) {
      i_str = String(blocks[room_y][x] = blocks[room_y][x + by]);

      // アニメーション
      from = to + by * w_block;
      with(elem_anim[i_anim++]) {
        setAttribute("href", "#b" + i_str);
        setAttribute("attributeName", "dx");
        setAttribute("from", String(from));
        setAttribute("to", String(to));
        beginElement();
      }

      document.getElementById("b" + i_str).dx.baseVal = to;
      to = from;
    }
  }
  else {                  // Y 方向
    by = (room_y < move_y) ? 1 : -1;
    to = room_y * h_block;
    for(var y = room_y; y != move_y; y += by) {
      i_str = String(blocks[y][room_x] = blocks[y + by][room_x]);

      // アニメーション
      from = to + by * h_block;
      with(elem_anim[i_anim++]) {
        setAttribute("href", "#b" + i_str);
        setAttribute("attributeName", "dy");
        setAttribute("from", String(from));
        setAttribute("to", String(to));
        beginElement();
      }

      document.getElementById("b" + i_str).dy.baseVal = to;
      to = from;
    }
  }

  room_x = move_x;
  room_y = move_y;
  blocks[room_y][room_x] = 15;
}

function move_end() {
  // 終了判定
  for(var i = 0; i < 15; i++) {
    if(blocks[i >> 2][i & 0x3] != i) {
      click_enable();
      return;
    }
  }
  // 終了
  document.getElementById("b15").width.baseVal.valueInSpecifiedUnits = 100;
  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)).width.baseVal.value = (me.checked) ? 40 : 0;
}

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)).setAttribute("href", elem_work.toDataURL("image/png"));
    }
  }
  delete elem_work;

  elem_anim = [document.getElementById("anim0"), document.getElementById("anim1"), document.getElementById("anim2")];
  elem_anim[0].addEventListener("endEvent", move_end, false);

  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>