ES 6学習のclassとdemoはボールを描きます

        //  
        // function Person(name, age) {
        //     this.name = name;
        //     this.age = age;
        // }
        // Person.prototype = {
        //     constructor: Person,
        //     print() {
        //         console.log(' ' + this.name + ', ' + this.age + ' ');
        //     }
        // }
        // let person = new Person(' ', 19);
        // console.log(person);

        //  class  
        class Person {
            constructor(name, age) {
                this.name = name;
                this.age = age;
            }
            print() {
                console.log(' ' + this.name + ', ' + this.age + ' ');
            }
        }
        let person = new Person(' ', 19);
        console.log(person);
        person.print();

     !
    
    
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = 1000;
        canvas.height = 600;
        canvas.style.backgroundColor = '#000';

        class Ball {
            //  
            constructor(x, y, color) {
                    this.x = x;
                    this.y = y;
                    this.color = color;
                    this.r = 10;
                }
                //  
            render() {
                ctx.save();
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
                ctx.fillStyle = this.color;
                ctx.fill();
                ctx.restore();
            }
        }
        class MoveBall extends Ball {
            constructor(x, y, color) {
                super(x, y, color);
                //  
                this.dX = _.random(-5, 5);
                this.dY = _.random(-5, 5);
                this.dR = _.random(1, 3);
            }
            upDate() {
                this.x += this.dX;
                this.y += this.dY;
                this.r -= this.dR;
                if (this.r < 0) {
                    this.r = 0;
                }
            }
        }


        //  
        let ballArr = [];
        let colorArr = ['red', 'green', 'blue', 'yellow', 'purple', 'pink', 'orange'];
        //  
        canvas.addEventListener('mousemove', function(e) {
            ballArr.push(new MoveBall(e.offsetX, e.offsetY, colorArr[_.random(0, colorArr.length - 1)]));
            console.log(ballArr);
        });
        //  
        setInterval(function() {
            //  
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            //  
            for (let i = 0; i < ballArr.length; i++) {
                ballArr[i].render();
                ballArr[i].upDate();
            }
        }, 50)</code></pre> 
  <p> </p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC WAP -->
                    <div id="SOHUCS" sid="1290276560993067008"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js">
                    
                     
                

興味があるかもしれません