video15.htm

戻る

<!DOCTYPE HTML>
<HTML LANG="ja">

<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>ビデオ 15 ゲーム</TITLE>
</HEAD>

<BODY onLoad="init()" onResize="set_size()" STYLE="background-color:#CCFFFF; margin:0">

<DIV ALIGN=CENTER>
<BR>
<FORM>
<TABLE CELLSPACING=0><TR>
<TD><INPUT TYPE=BUTTON ID="start" VALUE="ゲーム開始" DISABLED onClick="start_game()"></TD>
<TD WIDTH=10></TD>
<TD><LABEL><INPUT TYPE=CHECKBOX CHECKED onClick="block_no(this)">駒番号を表示する</LABEL></TD>
</TR></TABLE>
</FORM>
<BR>
</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">
<DIV ID="d0" STYLE="position:relative; left:0; top:0; overflow:hidden">
<VIDEO ID="v0" STYLE="position:absolute"></VIDEO>
<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">
<DIV ID="d1" STYLE="position:relative; left:0; top:0; overflow:hidden">
<VIDEO ID="v1" STYLE="position:absolute"></VIDEO>
<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">
<DIV ID="d2" STYLE="position:relative; left:0; top:0; overflow:hidden">
<VIDEO ID="v2" STYLE="position:absolute"></VIDEO>
<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">
<DIV ID="d3" STYLE="position:relative; left:0; top:0; overflow:hidden">
<VIDEO ID="v3" STYLE="position:absolute"></VIDEO>
<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">
<DIV ID="d4" STYLE="position:relative; left:0; top:0; overflow:hidden">
<VIDEO ID="v4" STYLE="position:absolute"></VIDEO>
<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">
<DIV ID="d5" STYLE="position:relative; left:0; top:0; overflow:hidden">
<VIDEO ID="v5" STYLE="position:absolute"></VIDEO>
<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">
<DIV ID="d6" STYLE="position:relative; left:0; top:0; overflow:hidden">
<VIDEO ID="v6" STYLE="position:absolute"></VIDEO>
<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">
<DIV ID="d7" STYLE="position:relative; left:0; top:0; overflow:hidden">
<VIDEO ID="v7" STYLE="position:absolute"></VIDEO>
<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">
<DIV ID="d8" STYLE="position:relative; left:0; top:0; overflow:hidden">
<VIDEO ID="v8" STYLE="position:absolute"></VIDEO>
<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">
<DIV ID="d9" STYLE="position:relative; left:0; top:0; overflow:hidden">
<VIDEO ID="v9" STYLE="position:absolute"></VIDEO>
<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">
<DIV ID="d10" STYLE="position:relative; left:0; top:0; overflow:hidden">
<VIDEO ID="v10" STYLE="position:absolute"></VIDEO>
<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">
<DIV ID="d11" STYLE="position:relative; left:0; top:0; overflow:hidden">
<VIDEO ID="v11" STYLE="position:absolute"></VIDEO>
<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">
<DIV ID="d12" STYLE="position:relative; left:0; top:0; overflow:hidden">
<VIDEO ID="v12" STYLE="position:absolute"></VIDEO>
<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">
<DIV ID="d13" STYLE="position:relative; left:0; top:0; overflow:hidden">
<VIDEO ID="v13" STYLE="position:absolute"></VIDEO>
<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">
<DIV ID="d14" STYLE="position:relative; left:0; top:0; overflow:hidden">
<VIDEO ID="v14" STYLE="position:absolute"></VIDEO>
<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">
<DIV ID="d15" STYLE="position:relative; left:0; top:0; overflow:hidden">
<VIDEO ID="v15" STYLE="position:absolute"></VIDEO>
</DIV>
</DIV>
</SPAN>

<SPAN ID="mask" STYLE="position:absolute; left:0; top:0"></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 TYPE="text/javascript">
<!--

function init() {
  navigator.mozGetUserMedia({video:true, audio:false}, success, error);
}

function success(stream) {
  elem_video = document.createElement("VIDEO");
  elem_video.autoplay = true;
  elem_video.addEventListener("canplay", wait, false);
  if(elem_video.mozSrcObject === undefined)
    elem_video.srcObject = stream;
  else
    elem_video.mozSrcObject = stream;
  elem_video.play();
}

function error(err) {
  alert("カメラが使用できません");
}

function wait() {
  if(elem_video.videoWidth) {
    video_width  = elem_video.videoWidth;
    video_height = elem_video.videoHeight;
    set_size();

    for(var i = 0; i < 16; i++) {
      with(document.getElementById("v" + String(i))) {
        if(elem_video.mozSrcObject === undefined)
          srcObject = elem_video.srcObject;
        else
          mozSrcObject = elem_video.mozSrcObject;
        play();
      }
    }

    document.getElementById("start").disabled = false;

    elem_video = undefined;
    return;
  }

  setTimeout(wait, 50);
}

// 構成要素サイズ設定
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 iy = 0; iy < 4; iy++) {
    for(var ix = 0; ix < 4; ix++) {
      with(document.getElementById("c" + String(blocks[iy][ix])).style) {
        if(blocks[iy][ix] == 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("d" + String(blocks[iy][ix])).style) {
        width  = String(w_block - 1) + "px";
        height = String(h_block - 1) + "px";
      }

      with(document.getElementById("v" + String(iy * 4 + ix)).style) {
        left = String(- ix * w_block) + "px";
        top  = String(- iy * h_block) + "px";
      }
    }
  }
  var sx = String((w_block - 23) >> 1) + "px";
  var sy = String((h_block - 14) >> 1) + "px";
  for(var i = 0; i < 15; i++) {
    with(document.getElementById("n" + String(i)).style) {
      left = sx;
      top  = sy;
    }
  }
  with(document.getElementById("mask").style) {
    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";
  }

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

  // ビデオ サイズ
  if(w_block_4 * video_height > h_block_4 * video_width) {
    var h = w_block_4 * video_height / video_width;
    for(var i = 0; i < 16; i++) {
      with(document.getElementById("v" + String(i))) {
        height = h;
        width = w_block_4;
      }
    }
  }
  else {
    var w = h_block_4 * video_width / video_height;
    for(var i = 0; i < 16; i++) {
      with(document.getElementById("v" + String(i))) {
        width = w;
        height = h_block_4;
      }
    }
  }
}

// ゲーム開始
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 iy = 0; iy < 4; iy++) {
    for(var ix = 0; ix < 4; ix++) {
      if(ix == 3 && iy == 3)
        continue;
      with(document.getElementById("c" + String(blocks[iy][ix])).style) {
        left = String(ix * w_block) + "px";
        top  = String(iy * h_block) + "px";
      }
    }
  }
  document.getElementById("c15").style.visibility = "hidden";
  document.getElementById("mask").addEventListener("mousedown", clicked, false);
}

// 駒クリック
function clicked(e) {
  if(e.button != 0)
    return;

  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, 10);
    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").removeEventListener("mousedown", clicked, false);
  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.forms[0].reset();
  document.getElementById("start").disabled = true;

//-->
</SCRIPT>

</BODY)

</HTML>