<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="UTF-8">
<title>anime</title>
<script type="text/javascript">
var sx,n;
x = new Array(17);
y = new Array(17);
z = new Array(17);
for(sx=1;sx<17;sx++){
for(n=1;n<5;n++){
if(sx+4>4*n)y[sx]=n;
}
}
for(sx=1;sx<17;sx++){
x[sx]=sx-4*(y[sx]-1);
}
window.onload = function(){
var canvas = document.getElementById("can");
var ctx = canvas.getContext("2d");
var timer;
var delay = 50;
var n;
n=0;
for(sx=1;sx<17;sx++){
z[sx]=0;
}
function draw(){
for(sx=1;sx<17;sx++){
ctx.fillStyle = 'rgb(192, 80, 77)';
if(z[sx]>50)ctx.fillRect(100+50*x[sx],100+50*y[sx],50,50);
ctx.fillStyle = 'rgb(0, 0, 0)';
if(z[sx]<50)ctx.fillRect(100+50*x[sx],100+50*y[sx],50,50);
}
}
var loop = function(){
n=n+1;
if(n>16)n=1;
z[n]=100;
z[n-1]=0;
draw();
clearTimeout(timer);
timer = setTimeout(loop,delay);
}
loop();
}
</script>
</head>
<body>
<canvas id="can" width="600" height="500"></canvas>
</body>
</html>
最終更新：2013年05月20日 07:21
