Canvasがオブジェクトに向かってイライラするボール

2404 ワード

直接コード:


    
        
         
        
    
    
        
             !!!
        
    
    
        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つ目(コンストラクション関数+プロトタイプモード)の作成方法です.データを関数内部に宣言し、関数を関数のプロトタイプに宣言します.