2016年7月15日金曜日

開発環境

Javascript for Kids (Nick Morgan 著、Angus Croll 寄稿、Miran Lipovaca イラスト、No Starch Press)のPart 3(Canvas)、Chapter 14(Making Things Move on the Canvas)、PROGRAMMING CHALLENGES、#1, #2, #3, #4:BOUNCING THE BALL AROUND A LARGER CANVAS, RANDOMIZING THIS.XSPEED AND THIS.YSPEED, ANIMATING MORE BALLS, MAKING THE BALLS COLORFULE(No. 4047)を取り組んでみる。

PROGRAMMING CHALLENGES、#1, #2, #3, #4:BOUNCING THE BALL AROUND A LARGER CANVAS, RANDOMIZING THIS.XSPEED AND THIS.YSPEED, ANIMATING MORE BALLS, MAKING THE BALLS COLORFULE(No. 4047)

コード(Emacs)

<!doctype>
<html>
  <head>
  </head>
  <body>    
    <canvas id="canvas0" width="650" height="200"
            style="border:solid brown; border-radius:0.5em"> </canvas>
    <script src="bouncing_ball.js"></script>
  </body>  
</html>
/*jslint         browser : true, continue : true,
  devel  : true, indent  : 4,    maxerr   : 50,
  newcap : true, nomen   : false, plusplus : false,
  regexp : false, sloppy  : true, vars     : false,
  white  : false
*/
/*global document*/
var Ball,
    r,
    colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'],
    canvas = document.querySelector('#canvas0'),
    width = canvas.width,
    height = canvas.height,
    ctx = canvas.getContext('2d'),
    circle = function (x, y, radius, fill_circle) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
        if (fill_circle) {
            ctx.fill();
        } else {
            ctx.stroke();
        }
    },
    pick_random_word = function (words) {
        return words[Math.floor(Math.random() * words.length)];
    },
    t,
    fn;


Ball = function (x, y, color, x_speed, y_speed) {
    this.x = x;
    this.y = y;
    this.color = color;
    this.x_speed = x_speed;
    this.y_speed = y_speed;
};

Ball.prototype.draw = function () {
    ctx.fillStyle = this.color;
    circle(this.x, this.y, r, true);
};
Ball.prototype.move = function () {
    this.x += this.x_speed;
    this.y += this.y_speed;
};
Ball.prototype.check_collision = function (balls) {
    var ball0 = this;
    if ((ball0.x - r) <= 0 || (ball0.x + r) >= width) {
        ball0.x_speed *= -1;
    }
    if ((ball0.y - r) <= 0 || (ball0.y + r) >= height) {
        ball0.y_speed *= -1;
    }
    balls.forEach(function (ball) {
        var d;

        if (ball0 !== ball) {
            d = Math.pow(ball0.x - ball.x, 2) + Math.pow(ball0.y - ball.y, 2);
            if (d === 4 * Math.pow(r, 2)) {
                ball0.x_speed *= -1;
                ball0.y_speed *= -1;
            }
        }
    });
};

fn = function () {
    var balls = [],
        i,
        max = Math.floor(Math.random() * 91) + 10,
        x,
        y;
    
    r = Math.random() * 10 + 1;
    for (i = 0; i < max; i += 1) {
        balls.push(new Ball(
            r + Math.floor(Math.random() * (width - 2 * r)),
            r + Math.floor(Math.random() * (height - 2 * r)),
            pick_random_word(colors),
            (Math.random() < 0.5 ? -1 : 1) * (Math.random() * 5 + 1),
            (Math.random() < 0.5 ? -1 : 1) * (Math.random() * 5 + 1)
        ));
    }
    t = setInterval(function () {
        ctx.clearRect(0, 0, width, height);

        for (i = 0; i < max; i += 1) {
            balls[i].draw();
            balls[i].move();
            balls[i].check_collision(balls);
        }
        ctx.strokeRect(0, 0, width, height);
    }, 30);
};

canvas.onclick = function () {
    clearInterval(t);
    fn();
};

fn();

0 コメント:

コメントを投稿