ｐ９ｐ９ - 経済統計練習帳

<!DOCTYPE html>
 
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>TypeScript HTML App</title>
    <script src="sample.js"></script>
    <script src="svgpaint.js"></script>
    <script src="jquery.js"></script>
</head>
<body onload="sample()">
 <div id="memo"></div>
</body>
</html>
 
 
var bx, by, dx, dy;
 
function sample() {
 
    paint();
    var timer;
    var delay = 100;
 
    bx = 250;
    by = 500;
    dx = 10;
    dy = 10;
 
 
    var loop = function () {
 
 
        bx = bx + dx;
        by = by - dy;
 
        if (by < 0) by = 500;
        h = 0;
        if (bx < 0) h = h + 1;
        if (dx < 0) h = h + 1;
        if (h == 2) dx = -dx;
 
        h = 0;
        if (bx > 500) h = h + 1;
        if (dx > 0) h = h + 1;
        if (h == 2) dx = -dx;
 
        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");
    str = str + sub.rect(bx, 500 - by, 5, 5, "red");
    str = str + "</svg>";
 
    $("#memo").html(str);
 
}