<!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;
let i;
let w_block_4 = w_block << 2;
let 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;
}
let n_off_x = (w_block - 40) >> 1;
let n_off_y = (h_block - 24) >> 1;
for(i = 0; ; i++) {
let 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(let iy = 0; iy < 4; iy++) {
for(let 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(let n = 30; ; ) {
let x1 = Math.floor(Math.random() * 4);
let y1 = Math.floor(Math.random() * 4);
let x2 = Math.floor(Math.random() * 4);
let y2 = Math.floor(Math.random() * 4);
let b1 = blocks[y1][x1];
let b2 = blocks[y2][x2];
if(b1 == 15 || b2 == 15 || b1 == b2)
continue;
blocks[y1][x1] = b2;
blocks[y2][x2] = b1;
if(!--n)
break;
}
// 最初から並んでしまった場合はシャッフルやり直し
let 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(let iy = 0; iy < 4; iy++) {
for(let 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();
let by;
let i_anim = 0;
let from, to;
let i_str;
if(move_x != room_x) { // X 方向
by = (room_x < move_x) ? 1 : -1;
to = room_x * w_block;
for(let 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(let 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(let 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(let 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);
}
// 駒番号画像作成
{
let elem_work = document.createElement("CANVAS");
with(elem_work) {
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(let i = 0; i < 15; i++) {
clearRect(0, 0, 40, 24);
let 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"));
}
}
}
const elem_anim = [document.getElementById("anim0"), document.getElementById("anim1"), document.getElementById("anim2")];
elem_anim[0].addEventListener("endEvent", move_end, false);
const elem_start = document.getElementById("start");
const elem_src = document.getElementById("src");
const elem_base = document.getElementById("base");
const elem_mask = document.getElementById("mask");
const elem_cong = document.getElementById("cong");
with(elem_cong) {
style.marginLeft = "-" + String(clientWidth >> 1) + "px";
style.marginTop = "-" + String(clientHeight >> 1) + "px";
}
const blocks = [[0, 1, 2, 3], [4, 5, 6, 7], [8, 9, 10, 11], [12, 13, 14, 15]]; // 駒配置
let w_block, h_block;
let room_x, room_y;
let move_x, move_y;
// ページを再ロードしたときのため
document.forms[0].reset();
elem_src.src = "";
elem_src.src = "about:blank";
//-->
</SCRIPT>
</BODY>
</HTML>
|
