開発環境
- OS X El Capitan - Apple (OS)
- Emacs (Text Editor)
- JavaScript (プログラミング言語)
- jQuery (Library)
- Safari(Web browser)
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 コメント:
コメントを投稿