Блог

Я следую руководству по созданию объектов MDN, пытаясь завершить учебное пособие, используя объявления классов ES6.

Прыгающие шары в моей программе движутся намного быстрее, чем описано в руководстве. Я установил скорость вновь созданных экземпляров Ball; однако экземпляры Ball все еще движутся слишком быстро.

 // setup canvas

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;

// function to generate random number

function random(min, max) {
    let num = Math.floor(Math.random()*(max-min))   min;
    return num;
}

class Ball {
    constructor(x, y, velX, velY, color, size) {
        this.x = x;
        this.y = y;
        this.velX = velX;
        this.velY = velY;
        this.color = color;
        this.size = size;
    }

    draw() {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
        ctx.fill();
    }

    update() {
        if ((this.x   this.size) >= width) {
            this.velX = -(this.velX);
        }
        if ((this.x - this.size) <= 0) {
            this.velX = -(this.velX);
        }
        if ((this.y   this.size) >= height) {
            this.velY = -(this.velY);
        }
        if ((this.y - this.size) <= 0) {
            this.velY = -(this.velY);
        }
        this.x  = this.velX;
        this.y  = this.velY;
    };

}


function loop() {
    let balls = [];
    ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
    ctx.fillRect(0, 0, width, height);

    while (balls.length < 25) {
        let size = random(10,20);
        let ball = new Ball(
            // ball position always drawn at least one ball width
            // away from the edge of the canvas, to avoid drawing errors
            random(0   size,width - size),
            random(0   size,height - size),
            5,
            5,
            'rgb('   random(0,255)   ','   random(0,255)   ','   random(0,255)  ')',
            size
        );
        balls.push(ball);
    }

    for (let i = 0; i < balls.length; i  ) {
        balls[i].draw();
        balls[i].update();
    }

    requestAnimationFrame(loop);
}

loop();
  

Ошибка заключается в том, что вы помещаете let balls = [] функцию внутри цикла.

Просто переместите его наружу, и все начнет работать.

 var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var width = canvas.width = window.innerWidth;
var height = canvas.height = window.innerHeight;

// function to generate random number

function random(min, max) {
    let num = Math.floor(Math.random()*(max-min   1))   min;
    return num;
}

class Ball {
    constructor(x, y, velX, velY, color, size) {
        this.x = x;
        this.y = y;
        this.velX = velX;
        this.velY = velY;
        this.color = color;
        this.size = size;
    }

    draw() {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        ctx.arc(this.x, this.y, this.size, 0, 2 * Math.PI);
        ctx.fill();
    }

    update() {
        if ((this.x   this.size) >= width) {
            this.velX = -(this.velX);
        }
        if ((this.x - this.size) <= 0) {
            this.velX = -(this.velX);
        }
        if ((this.y   this.size) >= height) {
            this.velY = -(this.velY);
        }
        if ((this.y - this.size) <= 0) {
            this.velY = -(this.velY);
        }
        this.x  = this.velX;
        this.y  = this.velY;
    };

}


let balls = []; // moved outside loop() function

function loop() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.25)';
    ctx.fillRect(0, 0, width, height);

    while (balls.length < 25) {
        let size = random(10,20);
        let ball = new Ball(
            // ball position always drawn at least one ball width
            // away from the edge of the canvas, to avoid drawing errors
            random(0   size,width - size),
            random(0   size,height - size),
            5,
            5,
            'rgb('   random(0,255)   ','   random(0,255)   ','   random(0,255)  ')',
            size
        );
        balls.push(ball);
    }

    for (let i = 0; i < balls.length; i  ) {
        balls[i].draw();
        balls[i].update();
    }

    requestAnimationFrame(loop);
}

loop();  

 <canvas></canvas>  

Единственное, что я сделал, это сверил ваш код с кодом руководства. Всегда перепроверяйте шаги, которые вы выполнили, когда сталкиваетесь с проблемой кода.