[面向对象的案例]在canvas画布内实现小球的随机移动

[面向对象的案例]在canvas画布内实现小球的随机移动

//css部分,给画布设置边框
<style>
    canvas {
        border:1px solid orange;
    }
</style>
//html 添加画布
<canvas id="game" width="500" height="500"></canvas>

准备工作
先确定所需要的属性
小球的起始xy坐标、R半径、颜色、速度speedXY。

//创建球构造函数
 function ball() {
        this.r = this.rand(20);
        this.x = this.r;
        this.y = this.r;
        this.speedX = this.rand(10);
        this.speedY = this.rand(10);
        this.width = 0;
        this.height = 0;
        this.canvas = {};
        this.color = 'rgb('+this.rand(255)+','+this.rand(255)+','+this.rand(255)+')';
        this.init();
    }
//2.向原型链添加方法
ball.prototype = {
        init:function () {
            var game = document.getElementById('game');
            this.canvas = game.getContext('2d');
            this.width=game.width;
            this.height=game.height;
        },
        rand:function (num) {
            return Math.floor(Math.random() * num+1);
        },
        play:function () {
            this.x += this.speedX;
            this.y += this.speedY;
            if (this.x>this.width-this.r) {
                this.speedX = -this.speedX;
            }
            if (this.x<this.r) {
                this.speedX = Math.abs(this.speedX);
            }
            if (this.y>this.width-this.r) {
                this.speedY = -this.speedY;
            }
            if (this.y<this.r) {
                this.speedY = Math.abs(this.speedY);
            }
            this.canvas.beginPath();
            this.canvas.fillStyle = this.color;
            this.canvas.arc(this.x, this.y, this.r, 0, 2 * Math.PI);
            this.canvas.fill();
        }
    };
    //3.创建100个小球
    var arr = [];
    for (var i=0;i<100;i++) {
        arr[i] = new ball();
    }
    //4.使用定时器,每个30ms刷新屏幕
    setInterval(function () {
        arr[0].canvas.clearRect(0,0,500,500);
        for (var i=0;i<arr.length;i++) {
            arr[i].play();
        }
    },30)