ｓけ９８７ - 経済統計練習帳

function sample(){
 
 
var timer;
var delay = 1000;
 
bx=1;
by=1;
cx=5;
cy=5;
 
 
var loop = function () {
 
dx=1;
if(Math.random()>0.5)dx=0;
dy=1;
if(Math.random()>0.5)dy=0;
 
 bx=bx+dx;
 if(bx>10)bx=1;
   by=by+dy;
 if(by>10)by=1;
 
dx=1;
if(Math.random()>0.5)dx=0;
dy=1;
if(Math.random()>0.5)dy=0;
 
 cx=cx+dx;
 if(cx>10)cx=1;
   cy=cy+dy;
 if(cy>10)cy=1;
 
 
 
    paint();
 
    clearTimeout(timer);
    timer = setTimeout(loop, delay);
}
 
loop();
 
 
 
 
 
}
 
 
 
 
function paint(){
 
var sub=new svgpaint();
 
str="<svg width=\"500\" height=\"500\">";
 
str=str+sub.rect(0,0,500,500,"blue");
 
x1=50*bx-50;
y1=50*by-50;
str=str+sub.rect(x1,y1,50,50,"black");
 
x1=50*cx-50;
y1=50*cy-50;
str=str+sub.rect(x1,y1,50,50,"red");
 
for(s=1;s<11;s++){
str=str+sub.line(0,50*s,500,50*s,2,"black");
str=str+sub.line(50*s,0,50*s,500,2,"black");
}
 
 
str=str+"</svg>";
 
$("#memo").html(str);   
 
}
 
 
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8" />
        <script src="sample.js"></script>
        <script src="jquery.js"></script>
<script src="svgpaint.js"></script>
        <title>戦争</title>
    </head>
    <body onload="sample()">
   <p id="memo"></p>
   </body>
</html>