Canvasがオブジェクトに向かってイライラするボール
2404 ワード
直接コード:
このメソッドは、5つ目(コンストラクション関数+プロトタイプモード)の作成方法です.データを関数内部に宣言し、関数を関数のプロトタイプに宣言します.
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");
function Ball () {
this.radius = this._rand(10,50);
this.cx = this._rand(this.radius,canvas.width-this.radius);
this.cy = this._rand(this.radius,canvas.height-this.radius);
this.speedX = this._rand(-3,3);
this.speedY = this._rand(-3,3);
this.color = "rgba("+this._rand(0,255)+","+this._rand(0,255)+","+this._rand(0,255)+","+Math.random()+")";
}
Ball.prototype.draw = function () {
ctx.beginPath();
ctx.arc(this.cx,this.cy,this.radius,0,Math.PI*2);
ctx.fillStyle = this.color;
ctx.fill();
}
Ball.prototype.move = function () {
if (this.cx+this.radius >= canvas.width || this.cx-this.radius <= 0) {
this.speedX *= -1;
}
if (this.cy+this.radius >= canvas.height || this.cy-this.radius <= 0) {
this.speedY *= -1;
}
this.cx += this.speedX;
this.cy += this.speedY;
// , move
this.draw();
}
Ball.prototype._rand = function (max,min) {
return parseInt(Math.random()*(max-min)+min);
}
var balls = [];
for (var i = 0;i < 30;i++) {
var ball = new Ball();
balls.push(ball);
}
// setInterval(function () {
// ctx.clearRect(0,0,800,600);
// for (var i = 0;i <balls.length;i++) {
// balls[i].move();
// }
// },10);
function _run () {
ctx.clearRect(0,0,800,600);
for (var i = 0;i < balls.length;i++) {
balls[i].move();
}
requestAnimationFrame(_run);
}
_run();
このメソッドは、5つ目(コンストラクション関数+プロトタイプモード)の作成方法です.データを関数内部に宣言し、関数を関数のプロトタイプに宣言します.