<!DOCTYPE HTML>
<HTML LANG="ja">
<HEAD>
<META CHARSET="Shift_JIS">
<TITLE>スタイルシート シューティング ゲーム</TITLE>
<STYLE TYPE="text/css">
<!--
/* 標的移動 */
@keyframes target {
from {
--target-x:-380;
--target-dir:1;
}
49% {
--target-dir:1;
}
50% {
--target-x:620;
}
51% {
--target-dir:-1;
}
to {
--target-x:-380;
--target-dir:-1;
}
}
/* 弾移動 */
@keyframes shot {
from {
top:285px;
}
to {
top:-16px;
}
}
/* 弾命中処理用 */
@keyframes hit {
from, to {
z-index:calc(0 - var(--hit));
}
}
/* 標的命中処理用 */
@keyframes destroyed1 {
from, to {
--destroyed1:var(--hit1);
}
}
@keyframes destroyed2 {
from, to {
--destroyed2:var(--hit2);
}
}
@keyframes destroyed3 {
from, to {
--destroyed3:var(--hit3);
}
}
@keyframes destroyed4 {
from, to {
--destroyed4:var(--hit4);
}
}
@keyframes destroyed5 {
from, to {
--destroyed5:var(--hit5);
}
}
@keyframes destroyed6 {
from, to {
--destroyed6:var(--hit6);
}
}
@keyframes destroyed7 {
from, to {
--destroyed7:var(--hit7);
}
}
@keyframes destroyed8 {
from, to {
--destroyed8:var(--hit8);
}
}
@keyframes destroyed9 {
from, to {
--destroyed9:var(--hit9);
}
}
@keyframes destroyed10 {
from, to {
--destroyed10:var(--hit10);
}
}
/* 爆発処理用 */
@keyframes explosion {
from, to {
z-index:calc(var(--hit) - 1);
}
}
/* 命中済み処理用 */
@keyframes hitted1 {
from, to {
--hitted1:var(--hit1);
}
}
@keyframes hitted2 {
from, to {
--hitted2:var(--hit2);
}
}
@keyframes hitted3 {
from, to {
--hitted3:var(--hit3);
}
}
@keyframes hitted4 {
from, to {
--hitted4:var(--hit4);
}
}
@keyframes hitted5 {
from, to {
--hitted5:var(--hit5);
}
}
@keyframes hitted6 {
from, to {
--hitted6:var(--hit6);
}
}
@keyframes hitted7 {
from, to {
--hitted7:var(--hit7);
}
}
@keyframes hitted8 {
from, to {
--hitted8:var(--hit8);
}
}
@keyframes hitted9 {
from, to {
--hitted9:var(--hit9);
}
}
@property --target-off {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --target-x {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --target-dir {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --cannon-x {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --shot-x1 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --shot-x2 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --shot-x3 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --shot-x4 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --shot-x5 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --shot-x6 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --shot-x7 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --shot-x8 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --shot-x9 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --shot-x10 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --target-hit-x1 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --target-hit-x2 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --target-hit-x3 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --target-hit-x4 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --target-hit-x5 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --target-hit-x6 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --target-hit-x7 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --target-hit-x8 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --target-hit-x9 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --target-hit-x10 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hit1 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hit2 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hit3 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hit4 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hit5 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hit6 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hit7 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hit8 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hit9 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hit10 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --destroyed1 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --destroyed2 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --destroyed3 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --destroyed4 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --destroyed5 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --destroyed6 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --destroyed7 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --destroyed8 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --destroyed9 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --destroyed10 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hitted1 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hitted2 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hitted3 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hitted4 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hitted5 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hitted6 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hitted7 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hitted8 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --hitted9 {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
@property --score {
syntax:'<integer>';
inherits:true;
initial-value:0;
}
:root {
--target-speed-num:5; /* 標的速度（ms/px） */
--target-speed:calc(var(--target-speed-num) * 1ms);
--shot-speed-num:1; /* 弾速度（ms/px） */
--shot-speed:calc(var(--shot-speed-num) * 1ms);
--explosion-time:0.3s; /* 爆発時間 */
--shot-time-num:calc(272 * var(--shot-speed-num)); /* 272 = 302 - 14 - 16 */
--shot-time:calc(var(--shot-time-num) * 1ms);
--target-off:calc(var(--shot-time-num) / var(--target-speed-num)); /* 整数化 */
--cannon-x:238;
}
body {
background-color:#CCFFFF;
}
#title {
color:#CC0000;
font-size:large;
font-weight:bold;
text-align:center;
}
#reset, .fire {
display:none;
}
#back {
position:relative;
width:264px;
height:308px;
margin-left:auto;
margin-right:auto;
background-color:black;
clip-path:inset(0 0 -10000px 0);
user-select:none;
}
/* back に clip-path を設定すると，背面にある要素が表示されてしまう．
（なぜ？ 見えるだけでマウス イベントには反応しない．）
子要素でもう一度背景を塗りつぶすことで回避できる． */
#back2 {
position:absolute;
left:0;
top:0;
width:264px;
height:308px;
background-color:black;
}
#base {
position:absolute;
left:12px;
top:4px;
width:240px;
height:300px;
}
.pos-x {
position:absolute;
top:-4px;
width:2px;
height:308px;
z-index:2;
}
.pos-x:hover ~ #logic1 {
transition:none;
}
#pos-x0:hover ~ #logic1 {
--cannon-x:0;
}
#pos-x1:hover ~ #logic1 {
--cannon-x:2;
}
#pos-x2:hover ~ #logic1 {
--cannon-x:4;
}
#pos-x3:hover ~ #logic1 {
--cannon-x:6;
}
#pos-x4:hover ~ #logic1 {
--cannon-x:8;
}
#pos-x5:hover ~ #logic1 {
--cannon-x:10;
}
#pos-x6:hover ~ #logic1 {
--cannon-x:12;
}
#pos-x7:hover ~ #logic1 {
--cannon-x:14;
}
#pos-x8:hover ~ #logic1 {
--cannon-x:16;
}
#pos-x9:hover ~ #logic1 {
--cannon-x:18;
}
#pos-x10:hover ~ #logic1 {
--cannon-x:20;
}
#pos-x11:hover ~ #logic1 {
--cannon-x:22;
}
#pos-x12:hover ~ #logic1 {
--cannon-x:24;
}
#pos-x13:hover ~ #logic1 {
--cannon-x:26;
}
#pos-x14:hover ~ #logic1 {
--cannon-x:28;
}
#pos-x15:hover ~ #logic1 {
--cannon-x:30;
}
#pos-x16:hover ~ #logic1 {
--cannon-x:32;
}
#pos-x17:hover ~ #logic1 {
--cannon-x:34;
}
#pos-x18:hover ~ #logic1 {
--cannon-x:36;
}
#pos-x19:hover ~ #logic1 {
--cannon-x:38;
}
#pos-x20:hover ~ #logic1 {
--cannon-x:40;
}
#pos-x21:hover ~ #logic1 {
--cannon-x:42;
}
#pos-x22:hover ~ #logic1 {
--cannon-x:44;
}
#pos-x23:hover ~ #logic1 {
--cannon-x:46;
}
#pos-x24:hover ~ #logic1 {
--cannon-x:48;
}
#pos-x25:hover ~ #logic1 {
--cannon-x:50;
}
#pos-x26:hover ~ #logic1 {
--cannon-x:52;
}
#pos-x27:hover ~ #logic1 {
--cannon-x:54;
}
#pos-x28:hover ~ #logic1 {
--cannon-x:56;
}
#pos-x29:hover ~ #logic1 {
--cannon-x:58;
}
#pos-x30:hover ~ #logic1 {
--cannon-x:60;
}
#pos-x31:hover ~ #logic1 {
--cannon-x:62;
}
#pos-x32:hover ~ #logic1 {
--cannon-x:64;
}
#pos-x33:hover ~ #logic1 {
--cannon-x:66;
}
#pos-x34:hover ~ #logic1 {
--cannon-x:68;
}
#pos-x35:hover ~ #logic1 {
--cannon-x:70;
}
#pos-x36:hover ~ #logic1 {
--cannon-x:72;
}
#pos-x37:hover ~ #logic1 {
--cannon-x:74;
}
#pos-x38:hover ~ #logic1 {
--cannon-x:76;
}
#pos-x39:hover ~ #logic1 {
--cannon-x:78;
}
#pos-x40:hover ~ #logic1 {
--cannon-x:80;
}
#pos-x41:hover ~ #logic1 {
--cannon-x:82;
}
#pos-x42:hover ~ #logic1 {
--cannon-x:84;
}
#pos-x43:hover ~ #logic1 {
--cannon-x:86;
}
#pos-x44:hover ~ #logic1 {
--cannon-x:88;
}
#pos-x45:hover ~ #logic1 {
--cannon-x:90;
}
#pos-x46:hover ~ #logic1 {
--cannon-x:92;
}
#pos-x47:hover ~ #logic1 {
--cannon-x:94;
}
#pos-x48:hover ~ #logic1 {
--cannon-x:96;
}
#pos-x49:hover ~ #logic1 {
--cannon-x:98;
}
#pos-x50:hover ~ #logic1 {
--cannon-x:100;
}
#pos-x51:hover ~ #logic1 {
--cannon-x:102;
}
#pos-x52:hover ~ #logic1 {
--cannon-x:104;
}
#pos-x53:hover ~ #logic1 {
--cannon-x:106;
}
#pos-x54:hover ~ #logic1 {
--cannon-x:108;
}
#pos-x55:hover ~ #logic1 {
--cannon-x:110;
}
#pos-x56:hover ~ #logic1 {
--cannon-x:112;
}
#pos-x57:hover ~ #logic1 {
--cannon-x:114;
}
#pos-x58:hover ~ #logic1 {
--cannon-x:116;
}
#pos-x59:hover ~ #logic1 {
--cannon-x:118;
}
#pos-x60:hover ~ #logic1 {
--cannon-x:120;
}
#pos-x61:hover ~ #logic1 {
--cannon-x:122;
}
#pos-x62:hover ~ #logic1 {
--cannon-x:124;
}
#pos-x63:hover ~ #logic1 {
--cannon-x:126;
}
#pos-x64:hover ~ #logic1 {
--cannon-x:128;
}
#pos-x65:hover ~ #logic1 {
--cannon-x:130;
}
#pos-x66:hover ~ #logic1 {
--cannon-x:132;
}
#pos-x67:hover ~ #logic1 {
--cannon-x:134;
}
#pos-x68:hover ~ #logic1 {
--cannon-x:136;
}
#pos-x69:hover ~ #logic1 {
--cannon-x:138;
}
#pos-x70:hover ~ #logic1 {
--cannon-x:140;
}
#pos-x71:hover ~ #logic1 {
--cannon-x:142;
}
#pos-x72:hover ~ #logic1 {
--cannon-x:144;
}
#pos-x73:hover ~ #logic1 {
--cannon-x:146;
}
#pos-x74:hover ~ #logic1 {
--cannon-x:148;
}
#pos-x75:hover ~ #logic1 {
--cannon-x:150;
}
#pos-x76:hover ~ #logic1 {
--cannon-x:152;
}
#pos-x77:hover ~ #logic1 {
--cannon-x:154;
}
#pos-x78:hover ~ #logic1 {
--cannon-x:156;
}
#pos-x79:hover ~ #logic1 {
--cannon-x:158;
}
#pos-x80:hover ~ #logic1 {
--cannon-x:160;
}
#pos-x81:hover ~ #logic1 {
--cannon-x:162;
}
#pos-x82:hover ~ #logic1 {
--cannon-x:164;
}
#pos-x83:hover ~ #logic1 {
--cannon-x:166;
}
#pos-x84:hover ~ #logic1 {
--cannon-x:168;
}
#pos-x85:hover ~ #logic1 {
--cannon-x:170;
}
#pos-x86:hover ~ #logic1 {
--cannon-x:172;
}
#pos-x87:hover ~ #logic1 {
--cannon-x:174;
}
#pos-x88:hover ~ #logic1 {
--cannon-x:176;
}
#pos-x89:hover ~ #logic1 {
--cannon-x:178;
}
#pos-x90:hover ~ #logic1 {
--cannon-x:180;
}
#pos-x91:hover ~ #logic1 {
--cannon-x:182;
}
#pos-x92:hover ~ #logic1 {
--cannon-x:184;
}
#pos-x93:hover ~ #logic1 {
--cannon-x:186;
}
#pos-x94:hover ~ #logic1 {
--cannon-x:188;
}
#pos-x95:hover ~ #logic1 {
--cannon-x:190;
}
#pos-x96:hover ~ #logic1 {
--cannon-x:192;
}
#pos-x97:hover ~ #logic1 {
--cannon-x:194;
}
#pos-x98:hover ~ #logic1 {
--cannon-x:196;
}
#pos-x99:hover ~ #logic1 {
--cannon-x:198;
}
#pos-x100:hover ~ #logic1 {
--cannon-x:200;
}
#pos-x101:hover ~ #logic1 {
--cannon-x:202;
}
#pos-x102:hover ~ #logic1 {
--cannon-x:204;
}
#pos-x103:hover ~ #logic1 {
--cannon-x:206;
}
#pos-x104:hover ~ #logic1 {
--cannon-x:208;
}
#pos-x105:hover ~ #logic1 {
--cannon-x:210;
}
#pos-x106:hover ~ #logic1 {
--cannon-x:212;
}
#pos-x107:hover ~ #logic1 {
--cannon-x:214;
}
#pos-x108:hover ~ #logic1 {
--cannon-x:216;
}
#pos-x109:hover ~ #logic1 {
--cannon-x:218;
}
#pos-x110:hover ~ #logic1 {
--cannon-x:220;
}
#pos-x111:hover ~ #logic1 {
--cannon-x:222;
}
#pos-x112:hover ~ #logic1 {
--cannon-x:224;
}
#pos-x113:hover ~ #logic1 {
--cannon-x:226;
}
#pos-x114:hover ~ #logic1 {
--cannon-x:228;
}
#pos-x115:hover ~ #logic1 {
--cannon-x:230;
}
#pos-x116:hover ~ #logic1 {
--cannon-x:232;
}
#pos-x117:hover ~ #logic1 {
--cannon-x:234;
}
#pos-x118:hover ~ #logic1 {
--cannon-x:236;
}
#pos-x119:hover ~ #logic1 {
--cannon-x:238;
}
.pos-l {
position:absolute;
left:-12px;
top:-4px;
width:12px;
height:308px;
z-index:2;
}
.pos-l:hover ~ #logic1 {
--cannon-x:0;
transition:none;
}
.pos-r {
position:absolute;
left:240px;
top:-4px;
width:12px;
height:308px;
z-index:2;
}
.pos-r:hover ~ #logic1 {
--cannon-x:238;
transition:none;
}
#logic1 {
position:absolute;
left:0;
top:0;
transition:--cannon-x 0s 10000s;
/* 標的のアニメーション */
animation:target calc(2000 * var(--target-speed)) steps(2001, jump-end) infinite;
}
#logic2 {
position:absolute;
left:0;
top:0;
width:240px;
height:300px;
--init:0;
--bullets:"10";
--shot-k2:10000s;
--shot-k3:10000s;
--shot-k4:10000s;
--shot-k5:10000s;
--shot-k6:10000s;
--shot-k7:10000s;
--shot-k8:10000s;
--shot-k9:10000s;
--shot-k10:10000s;
transition:--shot-x1 0s 10000s,
--shot-x2 0s var(--shot-k2),
--shot-x3 0s var(--shot-k3),
--shot-x4 0s var(--shot-k4),
--shot-x5 0s var(--shot-k5),
--shot-x6 0s var(--shot-k6),
--shot-x7 0s var(--shot-k7),
--shot-x8 0s var(--shot-k8),
--shot-x9 0s var(--shot-k9),
--shot-x10 0s var(--shot-k10),
--target-hit-x1 0s 10000s,
--target-hit-x2 0s var(--shot-k2),
--target-hit-x3 0s var(--shot-k3),
--target-hit-x4 0s var(--shot-k4),
--target-hit-x5 0s var(--shot-k5),
--target-hit-x6 0s var(--shot-k6),
--target-hit-x7 0s var(--shot-k7),
--target-hit-x8 0s var(--shot-k8),
--target-hit-x9 0s var(--shot-k9),
--target-hit-x10 0s var(--shot-k10),
--hit1 0s 10000s,
--hit2 0s var(--shot-k2),
--hit3 0s var(--shot-k3),
--hit4 0s var(--shot-k4),
--hit5 0s var(--shot-k5),
--hit6 0s var(--shot-k6),
--hit7 0s var(--shot-k7),
--hit8 0s var(--shot-k8),
--hit9 0s var(--shot-k9),
--hit10 0s var(--shot-k10);
}
.fire-l {
position:absolute;
left:calc(var(--cannon-x) * 1px);
top:-4px;
width:2px;
height:308px;
z-index:3;
}
/* 発射位置，標的命中判定位置，命中判定 */
/* abs()，pow() は実装されていない */
#fire1:active ~ #logic1 #logic2 {
--shot-x1:var(--cannon-x);
--target-hit-x1:calc(var(--target-x) + var(--target-dir) * var(--target-off));
--dx1:calc(var(--target-hit-x1) - var(--cannon-x));
--hit1:clamp(0, 144 - var(--dx1) * var(--dx1), 1);
transition:none;
}
#fire2:active ~ #logic1 #logic2 {
--shot-x2:var(--cannon-x);
--target-hit-x2:calc(var(--target-x) + var(--target-dir) * var(--target-off));
--dx2:calc(var(--target-hit-x2) - var(--cannon-x));
--hit2:calc(clamp(0, 144 - var(--dx2) * var(--dx2), 1)
* (1 - var(--hitted1)));
--shot-k2:0s;
}
#fire3:active ~ #logic1 #logic2 {
--shot-x3:var(--cannon-x);
--target-hit-x3:calc(var(--target-x) + var(--target-dir) * var(--target-off));
--dx3:calc(var(--target-hit-x3) - var(--cannon-x));
--hit3:calc(clamp(0, 144 - var(--dx3) * var(--dx3), 1)
* (1 - min(var(--hitted1) + var(--hitted2), 1)));
--shot-k3:0s;
}
#fire4:active ~ #logic1 #logic2 {
--shot-x4:var(--cannon-x);
--target-hit-x4:calc(var(--target-x) + var(--target-dir) * var(--target-off));
--dx4:calc(var(--target-hit-x4) - var(--cannon-x));
--hit4:calc(clamp(0, 144 - var(--dx4) * var(--dx4), 1)
* (1 - min(var(--hitted1) + var(--hitted2) + var(--hitted3), 1)));
--shot-k4:0s;
}
#fire5:active ~ #logic1 #logic2 {
--shot-x5:var(--cannon-x);
--target-hit-x5:calc(var(--target-x) + var(--target-dir) * var(--target-off));
--dx5:calc(var(--target-hit-x5) - var(--cannon-x));
--hit5:calc(clamp(0, 144 - var(--dx5) * var(--dx5), 1)
* (1 - min(var(--hitted1) + var(--hitted2) + var(--hitted3) + var(--hitted4), 1)));
--shot-k5:0s;
}
#fire6:active ~ #logic1 #logic2 {
--shot-x6:var(--cannon-x);
--target-hit-x6:calc(var(--target-x) + var(--target-dir) * var(--target-off));
--dx6:calc(var(--target-hit-x6) - var(--cannon-x));
--hit6:calc(clamp(0, 144 - var(--dx6) * var(--dx6), 1)
* (1 - min(var(--hitted1) + var(--hitted2) + var(--hitted3) + var(--hitted4) + var(--hitted5), 1)));
--shot-k6:0s;
}
#fire7:active ~ #logic1 #logic2 {
--shot-x7:var(--cannon-x);
--target-hit-x7:calc(var(--target-x) + var(--target-dir) * var(--target-off));
--dx7:calc(var(--target-hit-x7) - var(--cannon-x));
--hit7:calc(clamp(0, 144 - var(--dx7) * var(--dx7), 1)
* (1 - min(var(--hitted1) + var(--hitted2) + var(--hitted3) + var(--hitted4) + var(--hitted5)
+ var(--hitted6), 1)));
--shot-k7:0s;
}
#fire8:active ~ #logic1 #logic2 {
--shot-x8:var(--cannon-x);
--target-hit-x8:calc(var(--target-x) + var(--target-dir) * var(--target-off));
--dx8:calc(var(--target-hit-x8) - var(--cannon-x));
--hit8:calc(clamp(0, 144 - var(--dx8) * var(--dx8), 1)
* (1 - min(var(--hitted1) + var(--hitted2) + var(--hitted3) + var(--hitted4) + var(--hitted5)
+ var(--hitted6) + var(--hitted7), 1)));
--shot-k8:0s;
}
#fire9:active ~ #logic1 #logic2 {
--shot-x9:var(--cannon-x);
--target-hit-x9:calc(var(--target-x) + var(--target-dir) * var(--target-off));
--dx9:calc(var(--target-hit-x9) - var(--cannon-x));
--hit9:calc(clamp(0, 144 - var(--dx9) * var(--dx9), 1)
* (1 - min(var(--hitted1) + var(--hitted2) + var(--hitted3) + var(--hitted4) + var(--hitted5)
+ var(--hitted6) + var(--hitted7) + var(--hitted8), 1)));
--shot-k9:0s;
}
#fire10:active ~ #logic1 #logic2 {
--shot-x10:var(--cannon-x);
--target-hit-x10:calc(var(--target-x) + var(--target-dir) * var(--target-off));
--dx10:calc(var(--target-hit-x10) - var(--cannon-x));
--hit10:calc(clamp(0, 144 - var(--dx10) * var(--dx10), 1)
* (1 - min(var(--hitted1) + var(--hitted2) + var(--hitted3) + var(--hitted4) + var(--hitted5)
+ var(--hitted6) + var(--hitted7) + var(--hitted8) + var(--hitted9), 1)));
--shot-k10:0s;
}
/* 標的命中，命中済みのアニメーション */
/* 以下のセレクタは詳細度が同じなので，1番目から順に並べる */
/* （順にラジオ ボタンがチェックされていく） */
/* 262 = 240 + 22 */
#fire1:checked ~ #logic1 #logic2 {
--init:1;
--bullets:"9";
animation:destroyed1 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted1 calc(262 * var(--target-speed)) step-start 0s;
}
#fire2:checked ~ #logic1 #logic2 {
--bullets:"8";
animation:destroyed1 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted1 calc(262 * var(--target-speed)) step-start 0s,
destroyed2 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted2 calc(262 * var(--target-speed)) step-start 0s;
}
#fire3:checked ~ #logic1 #logic2 {
--bullets:"7";
animation:destroyed1 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted1 calc(262 * var(--target-speed)) step-start 0s,
destroyed2 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted2 calc(262 * var(--target-speed)) step-start 0s,
destroyed3 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted3 calc(262 * var(--target-speed)) step-start 0s;
}
#fire4:checked ~ #logic1 #logic2 {
--bullets:"6";
animation:destroyed1 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted1 calc(262 * var(--target-speed)) step-start 0s,
destroyed2 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted2 calc(262 * var(--target-speed)) step-start 0s,
destroyed3 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted3 calc(262 * var(--target-speed)) step-start 0s,
destroyed4 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted4 calc(262 * var(--target-speed)) step-start 0s;
}
#fire5:checked ~ #logic1 #logic2 {
--bullets:"5";
animation:destroyed1 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted1 calc(262 * var(--target-speed)) step-start 0s,
destroyed2 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted2 calc(262 * var(--target-speed)) step-start 0s,
destroyed3 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted3 calc(262 * var(--target-speed)) step-start 0s,
destroyed4 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted4 calc(262 * var(--target-speed)) step-start 0s,
destroyed5 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted5 calc(262 * var(--target-speed)) step-start 0s;
}
#fire6:checked ~ #logic1 #logic2 {
--bullets:"4";
animation:destroyed1 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted1 calc(262 * var(--target-speed)) step-start 0s,
destroyed2 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted2 calc(262 * var(--target-speed)) step-start 0s,
destroyed3 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted3 calc(262 * var(--target-speed)) step-start 0s,
destroyed4 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted4 calc(262 * var(--target-speed)) step-start 0s,
destroyed5 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted5 calc(262 * var(--target-speed)) step-start 0s,
destroyed6 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted6 calc(262 * var(--target-speed)) step-start 0s;
}
#fire7:checked ~ #logic1 #logic2 {
--bullets:"3";
animation:destroyed1 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted1 calc(262 * var(--target-speed)) step-start 0s,
destroyed2 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted2 calc(262 * var(--target-speed)) step-start 0s,
destroyed3 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted3 calc(262 * var(--target-speed)) step-start 0s,
destroyed4 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted4 calc(262 * var(--target-speed)) step-start 0s,
destroyed5 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted5 calc(262 * var(--target-speed)) step-start 0s,
destroyed6 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted6 calc(262 * var(--target-speed)) step-start 0s,
destroyed7 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted7 calc(262 * var(--target-speed)) step-start 0s;
}
#fire8:checked ~ #logic1 #logic2 {
--bullets:"2";
animation:destroyed1 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted1 calc(262 * var(--target-speed)) step-start 0s,
destroyed2 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted2 calc(262 * var(--target-speed)) step-start 0s,
destroyed3 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted3 calc(262 * var(--target-speed)) step-start 0s,
destroyed4 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted4 calc(262 * var(--target-speed)) step-start 0s,
destroyed5 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted5 calc(262 * var(--target-speed)) step-start 0s,
destroyed6 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted6 calc(262 * var(--target-speed)) step-start 0s,
destroyed7 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted7 calc(262 * var(--target-speed)) step-start 0s,
destroyed8 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted8 calc(262 * var(--target-speed)) step-start 0s;
}
#fire9:checked ~ #logic1 #logic2 {
--bullets:"1";
animation:destroyed1 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted1 calc(262 * var(--target-speed)) step-start 0s,
destroyed2 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted2 calc(262 * var(--target-speed)) step-start 0s,
destroyed3 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted3 calc(262 * var(--target-speed)) step-start 0s,
destroyed4 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted4 calc(262 * var(--target-speed)) step-start 0s,
destroyed5 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted5 calc(262 * var(--target-speed)) step-start 0s,
destroyed6 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted6 calc(262 * var(--target-speed)) step-start 0s,
destroyed7 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted7 calc(262 * var(--target-speed)) step-start 0s,
destroyed8 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted8 calc(262 * var(--target-speed)) step-start 0s,
destroyed9 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted9 calc(262 * var(--target-speed)) step-start 0s;
}
#fire10:checked ~ #logic1 #logic2 {
--bullets:"0";
animation:destroyed1 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted1 calc(262 * var(--target-speed)) step-start 0s,
destroyed2 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted2 calc(262 * var(--target-speed)) step-start 0s,
destroyed3 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted3 calc(262 * var(--target-speed)) step-start 0s,
destroyed4 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted4 calc(262 * var(--target-speed)) step-start 0s,
destroyed5 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted5 calc(262 * var(--target-speed)) step-start 0s,
destroyed6 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted6 calc(262 * var(--target-speed)) step-start 0s,
destroyed7 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted7 calc(262 * var(--target-speed)) step-start 0s,
destroyed8 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted8 calc(262 * var(--target-speed)) step-start 0s,
destroyed9 calc(262 * var(--target-speed)) step-start var(--shot-time),
hitted9 calc(262 * var(--target-speed)) step-start 0s,
destroyed10 calc(262 * var(--target-speed)) step-start var(--shot-time);
}
/* 弾，弾命中のアニメーション */
/* 30 = 14 + 16 */
#fire1:checked ~ #logic1 #logic2 #shot1 {
--shot-x:var(--shot-x1);
--hit:var(--hit1);
animation:shot calc(301 * var(--shot-speed)) steps(302, jump-end) forwards,
hit calc(30 * var(--shot-speed)) step-start var(--shot-time);
}
#fire2:checked ~ #logic1 #logic2 #shot2 {
--shot-x:var(--shot-x2);
--hit:var(--hit2);
animation:shot calc(301 * var(--shot-speed)) steps(302, jump-end) forwards,
hit calc(30 * var(--shot-speed)) step-start var(--shot-time);
}
#fire3:checked ~ #logic1 #logic2 #shot3 {
--shot-x:var(--shot-x3);
--hit:var(--hit3);
animation:shot calc(301 * var(--shot-speed)) steps(302, jump-end) forwards,
hit calc(30 * var(--shot-speed)) step-start var(--shot-time);
}
#fire4:checked ~ #logic1 #logic2 #shot4 {
--shot-x:var(--shot-x4);
--hit:var(--hit4);
animation:shot calc(301 * var(--shot-speed)) steps(302, jump-end) forwards,
hit calc(30 * var(--shot-speed)) step-start var(--shot-time);
}
#fire5:checked ~ #logic1 #logic2 #shot5 {
--shot-x:var(--shot-x5);
--hit:var(--hit5);
animation:shot calc(301 * var(--shot-speed)) steps(302, jump-end) forwards,
hit calc(30 * var(--shot-speed)) step-start var(--shot-time);
}
#fire6:checked ~ #logic1 #logic2 #shot6 {
--shot-x:var(--shot-x6);
--hit:var(--hit6);
animation:shot calc(301 * var(--shot-speed)) steps(302, jump-end) forwards,
hit calc(30 * var(--shot-speed)) step-start var(--shot-time);
}
#fire7:checked ~ #logic1 #logic2 #shot7 {
--shot-x:var(--shot-x7);
--hit:var(--hit7);
animation:shot calc(301 * var(--shot-speed)) steps(302, jump-end) forwards,
hit calc(30 * var(--shot-speed)) step-start var(--shot-time);
}
#fire8:checked ~ #logic1 #logic2 #shot8 {
--shot-x:var(--shot-x8);
--hit:var(--hit8);
animation:shot calc(301 * var(--shot-speed)) steps(302, jump-end) forwards,
hit calc(30 * var(--shot-speed)) step-start var(--shot-time);
}
#fire9:checked ~ #logic1 #logic2 #shot9 {
--shot-x:var(--shot-x9);
--hit:var(--hit9);
animation:shot calc(301 * var(--shot-speed)) steps(302, jump-end) forwards,
hit calc(30 * var(--shot-speed)) step-start var(--shot-time);
}
#fire10:checked ~ #logic1 #logic2 #shot10 {
--shot-x:var(--shot-x10);
--hit:var(--hit10);
animation:shot calc(301 * var(--shot-speed)) steps(302, jump-end) forwards,
hit calc(30 * var(--shot-speed)) step-start var(--shot-time);
}
/* 爆発のアニメーション */
#fire1:checked ~ #logic1 #logic2 #explosion1 {
--target-hit-x:var(--target-hit-x1);
--hit:var(--hit1);
animation:explosion var(--explosion-time) step-start var(--shot-time);
}
#fire2:checked ~ #logic1 #logic2 #explosion2 {
--target-hit-x:var(--target-hit-x2);
--hit:var(--hit2);
animation:explosion var(--explosion-time) step-start var(--shot-time);
}
#fire3:checked ~ #logic1 #logic2 #explosion3 {
--target-hit-x:var(--target-hit-x3);
--hit:var(--hit3);
animation:explosion var(--explosion-time) step-start var(--shot-time);
}
#fire4:checked ~ #logic1 #logic2 #explosion4 {
--target-hit-x:var(--target-hit-x4);
--hit:var(--hit4);
animation:explosion var(--explosion-time) step-start var(--shot-time);
}
#fire5:checked ~ #logic1 #logic2 #explosion5 {
--target-hit-x:var(--target-hit-x5);
--hit:var(--hit5);
animation:explosion var(--explosion-time) step-start var(--shot-time);
}
#fire6:checked ~ #logic1 #logic2 #explosion6 {
--target-hit-x:var(--target-hit-x6);
--hit:var(--hit6);
animation:explosion var(--explosion-time) step-start var(--shot-time);
}
#fire7:checked ~ #logic1 #logic2 #explosion7 {
--target-hit-x:var(--target-hit-x7);
--hit:var(--hit7);
animation:explosion var(--explosion-time) step-start var(--shot-time);
}
#fire8:checked ~ #logic1 #logic2 #explosion8 {
--target-hit-x:var(--target-hit-x8);
--hit:var(--hit8);
animation:explosion var(--explosion-time) step-start var(--shot-time);
}
#fire9:checked ~ #logic1 #logic2 #explosion9 {
--target-hit-x:var(--target-hit-x9);
--hit:var(--hit9);
animation:explosion var(--explosion-time) step-start var(--shot-time);
}
#fire10:checked ~ #logic1 #logic2 #explosion10 {
--target-hit-x:var(--target-hit-x10);
--hit:var(--hit10);
animation:explosion var(--explosion-time) step-start var(--shot-time);
}
#fire1:checked ~ #logic1 #logic2 #fire1-l,
#fire1:checked ~ #pos-l1,
#fire1:checked ~ #pos-r1,
#fire2:checked ~ #logic1 #logic2 #fire2-l,
#fire2:checked ~ #pos-l2,
#fire2:checked ~ #pos-r2,
#fire3:checked ~ #logic1 #logic2 #fire3-l,
#fire3:checked ~ #pos-l3,
#fire3:checked ~ #pos-r3,
#fire4:checked ~ #logic1 #logic2 #fire4-l,
#fire4:checked ~ #pos-l4,
#fire4:checked ~ #pos-r4,
#fire5:checked ~ #logic1 #logic2 #fire5-l,
#fire5:checked ~ #pos-l5,
#fire5:checked ~ #pos-r5,
#fire6:checked ~ #logic1 #logic2 #fire6-l,
#fire6:checked ~ #pos-l6,
#fire6:checked ~ #pos-r6,
#fire7:checked ~ #logic1 #logic2 #fire7-l,
#fire7:checked ~ #pos-l7,
#fire7:checked ~ #pos-r7,
#fire8:checked ~ #logic1 #logic2 #fire8-l,
#fire8:checked ~ #pos-l8,
#fire8:checked ~ #pos-r8,
#fire9:checked ~ #logic1 #logic2 #fire9-l,
#fire9:checked ~ #pos-l9,
#fire9:checked ~ #pos-r9,
#fire10:checked ~ #logic1 #logic2 #fire10-l,
#fire10:checked ~ #pos-l10,
#fire10:checked ~ #pos-r10 {
z-index:-1;
}
/* 標的 */
#target {
position:absolute;
left:calc((var(--target-x) - 11) * 1px);
top:0;
width:22px;
height:14px;
z-index:calc(0 - min(var(--destroyed1) + var(--destroyed2) + var(--destroyed3) + var(--destroyed4)
+ var(--destroyed5) + var(--destroyed6) + var(--destroyed7) + var(--destroyed8)
+ var(--destroyed9) + var(--destroyed10), 1));
}
#target-1 {
position:absolute;
left:0;
top:4px;
width:22px;
height:7px;
background-color:#0080FF;
clip-path:ellipse(11px 8px at 11px 8px);
overflow:clip;
}
#target-2 {
position:absolute;
left:4px;
top:11px;
width:6px;
height:3px;
background-color:#0080FF;
clip-path:circle(3px at 3px 0px);
}
#target-3 {
position:absolute;
left:12px;
top:11px;
width:6px;
height:3px;
background-color:#0080FF;
clip-path:circle(3px at 3px 0px);
}
#target-4 {
position:absolute;
left:6px;
top:0;
width:10px;
height:10px;
background-color:#0080FF;
clip-path:circle(5px at 5px 5px);
}
/* 砲 */
#cannon {
position:absolute;
left:calc((var(--cannon-x) - 10) * 1px);
top:285px;
width:20px;
height:15px;
z-index:1;
}
#cannon-1 {
position:absolute;
left:0;
top:5px;
width:20px;
height:10px;
background-color:#E0E000;
}
#cannon-2 {
position:absolute;
left:6px;
top:0;
width:8px;
height:5px;
background-color:#E0E000;
}
/* 弾 */
.shot {
position:absolute;
left:calc((var(--shot-x) - 2) * 1px);
top:-16px;
width:4px;
height:12px;
background-color:red;
}
/* 爆発 */
.explosion {
position:absolute;
left:calc((var(--target-hit-x) - 10) * 1px);
top:0;
width:20px;
height:20px;
background-color:red;
clip-path:polygon(10px 0px, 2.93px 17.07px, 20px 10px, 2.93px 2.93px,
10px 20px, 17.07px 2.93px, 0px 10px, 17.07px 17.07px);
z-index:-1;
}
/* 弾数 */
#bullets {
position:absolute;
left:4px;
top:316px;
font-weight:bold;
}
#bullets::after {
content:var(--bullets);
}
/* 得点 */
#score {
position:absolute;
left:136px;
top:316px;
font-weight:bold;
transition:--score 0s calc(var(--init) * var(--shot-time));
/* 2回目以降のプレイ開始時には前回の命中のデータが残っているので，1番目のラジオ ボタンが
チェックされるまではゼロを表示する． */
--score:calc(var(--init) * (var(--hit1) + var(--hit2) + var(--hit3) + var(--hit4) + var(--hit5)
+ var(--hit6) + var(--hit7) + var(--hit8) + var(--hit9) + var(--hit10)));
counter-reset:score var(--score);
}
#score::after {
content:counter(score);
}
/* 終了メッセージ表示 */
#fire10:checked ~ #over {
z-index:2;
transition:z-index 0s calc(var(--shot-time) + 0.5s);
}
/* 終了メッセージ */
#over {
position:absolute;
left:-12px;
top:-4px;
width:264px;
height:308px;
text-align:center;
z-index:-1;
}
#over-d {
display:inline-block;
position:relative;
background-color:white;
top:80px;
border:solid 4px #C06000;
padding:12px 16px;
}
#over-m {
color:black;
font-weight:bold;
}
#over-b {
display:inline-block;
margin-top:6px;
background-color:gainsboro;
color:black;
padding:4px 8px;
border-radius:3px;
}
#over-b:hover {
background-color:lightgray;
}
-->
</STYLE>
</HEAD>
<BODY>
<BR>
<DIV ID="title">スタイルシート シューティング ゲーム</DIV>
<BR>
<FORM>
<!-- ゲーム終了ボタン -->
<INPUT TYPE=RESET ID="reset">
<DIV ID="back">
<DIV ID="back2"></DIV>
<DIV ID="base">
<!-- 発射 -->
<INPUT TYPE=RADIO ID="fire1" CLASS="fire">
<INPUT TYPE=RADIO ID="fire2" CLASS="fire">
<INPUT TYPE=RADIO ID="fire3" CLASS="fire">
<INPUT TYPE=RADIO ID="fire4" CLASS="fire">
<INPUT TYPE=RADIO ID="fire5" CLASS="fire">
<INPUT TYPE=RADIO ID="fire6" CLASS="fire">
<INPUT TYPE=RADIO ID="fire7" CLASS="fire">
<INPUT TYPE=RADIO ID="fire8" CLASS="fire">
<INPUT TYPE=RADIO ID="fire9" CLASS="fire">
<INPUT TYPE=RADIO ID="fire10" CLASS="fire">
<!-- カーソル位置取得 -->
<DIV ID="pos-x0" CLASS="pos-x" STYLE="left:0px"></DIV>
<DIV ID="pos-x1" CLASS="pos-x" STYLE="left:2px"></DIV>
<DIV ID="pos-x2" CLASS="pos-x" STYLE="left:4px"></DIV>
<DIV ID="pos-x3" CLASS="pos-x" STYLE="left:6px"></DIV>
<DIV ID="pos-x4" CLASS="pos-x" STYLE="left:8px"></DIV>
<DIV ID="pos-x5" CLASS="pos-x" STYLE="left:10px"></DIV>
<DIV ID="pos-x6" CLASS="pos-x" STYLE="left:12px"></DIV>
<DIV ID="pos-x7" CLASS="pos-x" STYLE="left:14px"></DIV>
<DIV ID="pos-x8" CLASS="pos-x" STYLE="left:16px"></DIV>
<DIV ID="pos-x9" CLASS="pos-x" STYLE="left:18px"></DIV>
<DIV ID="pos-x10" CLASS="pos-x" STYLE="left:20px"></DIV>
<DIV ID="pos-x11" CLASS="pos-x" STYLE="left:22px"></DIV>
<DIV ID="pos-x12" CLASS="pos-x" STYLE="left:24px"></DIV>
<DIV ID="pos-x13" CLASS="pos-x" STYLE="left:26px"></DIV>
<DIV ID="pos-x14" CLASS="pos-x" STYLE="left:28px"></DIV>
<DIV ID="pos-x15" CLASS="pos-x" STYLE="left:30px"></DIV>
<DIV ID="pos-x16" CLASS="pos-x" STYLE="left:32px"></DIV>
<DIV ID="pos-x17" CLASS="pos-x" STYLE="left:34px"></DIV>
<DIV ID="pos-x18" CLASS="pos-x" STYLE="left:36px"></DIV>
<DIV ID="pos-x19" CLASS="pos-x" STYLE="left:38px"></DIV>
<DIV ID="pos-x20" CLASS="pos-x" STYLE="left:40px"></DIV>
<DIV ID="pos-x21" CLASS="pos-x" STYLE="left:42px"></DIV>
<DIV ID="pos-x22" CLASS="pos-x" STYLE="left:44px"></DIV>
<DIV ID="pos-x23" CLASS="pos-x" STYLE="left:46px"></DIV>
<DIV ID="pos-x24" CLASS="pos-x" STYLE="left:48px"></DIV>
<DIV ID="pos-x25" CLASS="pos-x" STYLE="left:50px"></DIV>
<DIV ID="pos-x26" CLASS="pos-x" STYLE="left:52px"></DIV>
<DIV ID="pos-x27" CLASS="pos-x" STYLE="left:54px"></DIV>
<DIV ID="pos-x28" CLASS="pos-x" STYLE="left:56px"></DIV>
<DIV ID="pos-x29" CLASS="pos-x" STYLE="left:58px"></DIV>
<DIV ID="pos-x30" CLASS="pos-x" STYLE="left:60px"></DIV>
<DIV ID="pos-x31" CLASS="pos-x" STYLE="left:62px"></DIV>
<DIV ID="pos-x32" CLASS="pos-x" STYLE="left:64px"></DIV>
<DIV ID="pos-x33" CLASS="pos-x" STYLE="left:66px"></DIV>
<DIV ID="pos-x34" CLASS="pos-x" STYLE="left:68px"></DIV>
<DIV ID="pos-x35" CLASS="pos-x" STYLE="left:70px"></DIV>
<DIV ID="pos-x36" CLASS="pos-x" STYLE="left:72px"></DIV>
<DIV ID="pos-x37" CLASS="pos-x" STYLE="left:74px"></DIV>
<DIV ID="pos-x38" CLASS="pos-x" STYLE="left:76px"></DIV>
<DIV ID="pos-x39" CLASS="pos-x" STYLE="left:78px"></DIV>
<DIV ID="pos-x40" CLASS="pos-x" STYLE="left:80px"></DIV>
<DIV ID="pos-x41" CLASS="pos-x" STYLE="left:82px"></DIV>
<DIV ID="pos-x42" CLASS="pos-x" STYLE="left:84px"></DIV>
<DIV ID="pos-x43" CLASS="pos-x" STYLE="left:86px"></DIV>
<DIV ID="pos-x44" CLASS="pos-x" STYLE="left:88px"></DIV>
<DIV ID="pos-x45" CLASS="pos-x" STYLE="left:90px"></DIV>
<DIV ID="pos-x46" CLASS="pos-x" STYLE="left:92px"></DIV>
<DIV ID="pos-x47" CLASS="pos-x" STYLE="left:94px"></DIV>
<DIV ID="pos-x48" CLASS="pos-x" STYLE="left:96px"></DIV>
<DIV ID="pos-x49" CLASS="pos-x" STYLE="left:98px"></DIV>
<DIV ID="pos-x50" CLASS="pos-x" STYLE="left:100px"></DIV>
<DIV ID="pos-x51" CLASS="pos-x" STYLE="left:102px"></DIV>
<DIV ID="pos-x52" CLASS="pos-x" STYLE="left:104px"></DIV>
<DIV ID="pos-x53" CLASS="pos-x" STYLE="left:106px"></DIV>
<DIV ID="pos-x54" CLASS="pos-x" STYLE="left:108px"></DIV>
<DIV ID="pos-x55" CLASS="pos-x" STYLE="left:110px"></DIV>
<DIV ID="pos-x56" CLASS="pos-x" STYLE="left:112px"></DIV>
<DIV ID="pos-x57" CLASS="pos-x" STYLE="left:114px"></DIV>
<DIV ID="pos-x58" CLASS="pos-x" STYLE="left:116px"></DIV>
<DIV ID="pos-x59" CLASS="pos-x" STYLE="left:118px"></DIV>
<DIV ID="pos-x60" CLASS="pos-x" STYLE="left:120px"></DIV>
<DIV ID="pos-x61" CLASS="pos-x" STYLE="left:122px"></DIV>
<DIV ID="pos-x62" CLASS="pos-x" STYLE="left:124px"></DIV>
<DIV ID="pos-x63" CLASS="pos-x" STYLE="left:126px"></DIV>
<DIV ID="pos-x64" CLASS="pos-x" STYLE="left:128px"></DIV>
<DIV ID="pos-x65" CLASS="pos-x" STYLE="left:130px"></DIV>
<DIV ID="pos-x66" CLASS="pos-x" STYLE="left:132px"></DIV>
<DIV ID="pos-x67" CLASS="pos-x" STYLE="left:134px"></DIV>
<DIV ID="pos-x68" CLASS="pos-x" STYLE="left:136px"></DIV>
<DIV ID="pos-x69" CLASS="pos-x" STYLE="left:138px"></DIV>
<DIV ID="pos-x70" CLASS="pos-x" STYLE="left:140px"></DIV>
<DIV ID="pos-x71" CLASS="pos-x" STYLE="left:142px"></DIV>
<DIV ID="pos-x72" CLASS="pos-x" STYLE="left:144px"></DIV>
<DIV ID="pos-x73" CLASS="pos-x" STYLE="left:146px"></DIV>
<DIV ID="pos-x74" CLASS="pos-x" STYLE="left:148px"></DIV>
<DIV ID="pos-x75" CLASS="pos-x" STYLE="left:150px"></DIV>
<DIV ID="pos-x76" CLASS="pos-x" STYLE="left:152px"></DIV>
<DIV ID="pos-x77" CLASS="pos-x" STYLE="left:154px"></DIV>
<DIV ID="pos-x78" CLASS="pos-x" STYLE="left:156px"></DIV>
<DIV ID="pos-x79" CLASS="pos-x" STYLE="left:158px"></DIV>
<DIV ID="pos-x80" CLASS="pos-x" STYLE="left:160px"></DIV>
<DIV ID="pos-x81" CLASS="pos-x" STYLE="left:162px"></DIV>
<DIV ID="pos-x82" CLASS="pos-x" STYLE="left:164px"></DIV>
<DIV ID="pos-x83" CLASS="pos-x" STYLE="left:166px"></DIV>
<DIV ID="pos-x84" CLASS="pos-x" STYLE="left:168px"></DIV>
<DIV ID="pos-x85" CLASS="pos-x" STYLE="left:170px"></DIV>
<DIV ID="pos-x86" CLASS="pos-x" STYLE="left:172px"></DIV>
<DIV ID="pos-x87" CLASS="pos-x" STYLE="left:174px"></DIV>
<DIV ID="pos-x88" CLASS="pos-x" STYLE="left:176px"></DIV>
<DIV ID="pos-x89" CLASS="pos-x" STYLE="left:178px"></DIV>
<DIV ID="pos-x90" CLASS="pos-x" STYLE="left:180px"></DIV>
<DIV ID="pos-x91" CLASS="pos-x" STYLE="left:182px"></DIV>
<DIV ID="pos-x92" CLASS="pos-x" STYLE="left:184px"></DIV>
<DIV ID="pos-x93" CLASS="pos-x" STYLE="left:186px"></DIV>
<DIV ID="pos-x94" CLASS="pos-x" STYLE="left:188px"></DIV>
<DIV ID="pos-x95" CLASS="pos-x" STYLE="left:190px"></DIV>
<DIV ID="pos-x96" CLASS="pos-x" STYLE="left:192px"></DIV>
<DIV ID="pos-x97" CLASS="pos-x" STYLE="left:194px"></DIV>
<DIV ID="pos-x98" CLASS="pos-x" STYLE="left:196px"></DIV>
<DIV ID="pos-x99" CLASS="pos-x" STYLE="left:198px"></DIV>
<DIV ID="pos-x100" CLASS="pos-x" STYLE="left:200px"></DIV>
<DIV ID="pos-x101" CLASS="pos-x" STYLE="left:202px"></DIV>
<DIV ID="pos-x102" CLASS="pos-x" STYLE="left:204px"></DIV>
<DIV ID="pos-x103" CLASS="pos-x" STYLE="left:206px"></DIV>
<DIV ID="pos-x104" CLASS="pos-x" STYLE="left:208px"></DIV>
<DIV ID="pos-x105" CLASS="pos-x" STYLE="left:210px"></DIV>
<DIV ID="pos-x106" CLASS="pos-x" STYLE="left:212px"></DIV>
<DIV ID="pos-x107" CLASS="pos-x" STYLE="left:214px"></DIV>
<DIV ID="pos-x108" CLASS="pos-x" STYLE="left:216px"></DIV>
<DIV ID="pos-x109" CLASS="pos-x" STYLE="left:218px"></DIV>
<DIV ID="pos-x110" CLASS="pos-x" STYLE="left:220px"></DIV>
<DIV ID="pos-x111" CLASS="pos-x" STYLE="left:222px"></DIV>
<DIV ID="pos-x112" CLASS="pos-x" STYLE="left:224px"></DIV>
<DIV ID="pos-x113" CLASS="pos-x" STYLE="left:226px"></DIV>
<DIV ID="pos-x114" CLASS="pos-x" STYLE="left:228px"></DIV>
<DIV ID="pos-x115" CLASS="pos-x" STYLE="left:230px"></DIV>
<DIV ID="pos-x116" CLASS="pos-x" STYLE="left:232px"></DIV>
<DIV ID="pos-x117" CLASS="pos-x" STYLE="left:234px"></DIV>
<DIV ID="pos-x118" CLASS="pos-x" STYLE="left:236px"></DIV>
<DIV ID="pos-x119" CLASS="pos-x" STYLE="left:238px"></DIV>
<!-- 左端 カーソル位置取得 & 発射 -->
<!-- 1番目から順に前面になるように -->
<LABEL ID="pos-l10" FOR="fire10" CLASS="pos-l"></LABEL>
<LABEL ID="pos-l9" FOR="fire9" CLASS="pos-l"></LABEL>
<LABEL ID="pos-l8" FOR="fire8" CLASS="pos-l"></LABEL>
<LABEL ID="pos-l7" FOR="fire7" CLASS="pos-l"></LABEL>
<LABEL ID="pos-l6" FOR="fire6" CLASS="pos-l"></LABEL>
<LABEL ID="pos-l5" FOR="fire5" CLASS="pos-l"></LABEL>
<LABEL ID="pos-l4" FOR="fire4" CLASS="pos-l"></LABEL>
<LABEL ID="pos-l3" FOR="fire3" CLASS="pos-l"></LABEL>
<LABEL ID="pos-l2" FOR="fire2" CLASS="pos-l"></LABEL>
<LABEL ID="pos-l1" FOR="fire1" CLASS="pos-l"></LABEL>
<!-- 右端 カーソル位置取得 & 発射 -->
<!-- 1番目から順に前面になるように -->
<LABEL ID="pos-r10" FOR="fire10" CLASS="pos-r"></LABEL>
<LABEL ID="pos-r9" FOR="fire9" CLASS="pos-r"></LABEL>
<LABEL ID="pos-r8" FOR="fire8" CLASS="pos-r"></LABEL>
<LABEL ID="pos-r7" FOR="fire7" CLASS="pos-r"></LABEL>
<LABEL ID="pos-r6" FOR="fire6" CLASS="pos-r"></LABEL>
<LABEL ID="pos-r5" FOR="fire5" CLASS="pos-r"></LABEL>
<LABEL ID="pos-r4" FOR="fire4" CLASS="pos-r"></LABEL>
<LABEL ID="pos-r3" FOR="fire3" CLASS="pos-r"></LABEL>
<LABEL ID="pos-r2" FOR="fire2" CLASS="pos-r"></LABEL>
<LABEL ID="pos-r1" FOR="fire1" CLASS="pos-r"></LABEL>
<DIV ID="logic1">
<DIV ID="logic2">
<!-- 標的 -->
<DIV ID="target">
<DIV ID="target-1"></DIV>
<DIV ID="target-2"></DIV>
<DIV ID="target-3"></DIV>
<DIV ID="target-4"></DIV>
</DIV>
<!-- 砲 -->
<DIV ID="cannon">
<DIV ID="cannon-1"></DIV>
<DIV ID="cannon-2"></DIV>
</DIV>
<!-- 発射 -->
<!-- 1番目から順に前面になるように -->
<LABEL ID="fire10-l" FOR="fire10" CLASS="fire-l"></LABEL>
<LABEL ID="fire9-l" FOR="fire9" CLASS="fire-l"></LABEL>
<LABEL ID="fire8-l" FOR="fire8" CLASS="fire-l"></LABEL>
<LABEL ID="fire7-l" FOR="fire7" CLASS="fire-l"></LABEL>
<LABEL ID="fire6-l" FOR="fire6" CLASS="fire-l"></LABEL>
<LABEL ID="fire5-l" FOR="fire5" CLASS="fire-l"></LABEL>
<LABEL ID="fire4-l" FOR="fire4" CLASS="fire-l"></LABEL>
<LABEL ID="fire3-l" FOR="fire3" CLASS="fire-l"></LABEL>
<LABEL ID="fire2-l" FOR="fire2" CLASS="fire-l"></LABEL>
<LABEL ID="fire1-l" FOR="fire1" CLASS="fire-l"></LABEL>
<!-- 弾 -->
<DIV ID="shot1" CLASS="shot"></DIV>
<DIV ID="shot2" CLASS="shot"></DIV>
<DIV ID="shot3" CLASS="shot"></DIV>
<DIV ID="shot4" CLASS="shot"></DIV>
<DIV ID="shot5" CLASS="shot"></DIV>
<DIV ID="shot6" CLASS="shot"></DIV>
<DIV ID="shot7" CLASS="shot"></DIV>
<DIV ID="shot8" CLASS="shot"></DIV>
<DIV ID="shot9" CLASS="shot"></DIV>
<DIV ID="shot10" CLASS="shot"></DIV>
<!-- 爆発 -->
<DIV ID="explosion1" CLASS="explosion"></DIV>
<DIV ID="explosion2" CLASS="explosion"></DIV>
<DIV ID="explosion3" CLASS="explosion"></DIV>
<DIV ID="explosion4" CLASS="explosion"></DIV>
<DIV ID="explosion5" CLASS="explosion"></DIV>
<DIV ID="explosion6" CLASS="explosion"></DIV>
<DIV ID="explosion7" CLASS="explosion"></DIV>
<DIV ID="explosion8" CLASS="explosion"></DIV>
<DIV ID="explosion9" CLASS="explosion"></DIV>
<DIV ID="explosion10" CLASS="explosion"></DIV>
<DIV ID="bullets">弾数 </DIV>
<DIV ID="score">得点 </DIV>
</DIV>
</DIV>
<DIV ID="over">
<DIV ID="over-d">
<SPAN ID="over-m">ゲーム終了</SPAN><BR>
<LABEL ID="over-b" FOR="reset">もう一度遊ぶ</LABEL>
</DIV>
</DIV>
</DIV>
</DIV>
</FORM>
</BODY>
</HTML>
|
