<html>
<head>
<meta charset="UTF-8">
<title>AJAX ANIME</title>
<script type="text/javascript">
var sx,n;
x = new Array(101);
y = new Array(101);
z = new Array(101);
for(sx=1;sx<101;sx++){
for(n=1;n<11;n++){
if(sx+10>10*n)y[sx]=n;
}
}
for(sx=1;sx<101;sx++){
x[sx]=sx-10*(y[sx]-1);
}
window.onload = function(){
var canvas = document.getElementById("camp");
var ctx = canvas.getContext("2d");
var timer;
var delay = 50;
var n;
n=0;
for(sx=1;sx<101;sx++){
z[sx]=0;
}
function draw(){
for(sx=1;sx<101;sx++){
ctx.fillStyle = 'rgb(192, 80, 77)';
if(z[sx]>50)ctx.fillRect(100+40*x[sx],100+40*y[sx],40,40);
ctx.fillStyle = 'rgb(0, 0, 0)';
if(z[sx]<50)ctx.fillRect(100+40*x[sx],100+40*y[sx],40,40);
}
}
var loop = function(){
n=n+1;
if(n>100)n=1;
z[n]=100;
z[n-1]=0;
draw();
clearTimeout(timer);
timer = setTimeout(loop,delay);
}
loop();
}
</script>
</head>
<body>
<canvas id="camp" width="600" height="600"></canvas>
</body>
</html>
最終更新：2013年05月20日 07:31
