Nov 23rd, 2024 at 01:32 PM

JavaScript Object Oriented Programming: Fun Animation

ball.js

class Ball {
    //properties
    radius;
    color;
    x;
    y;
    speed;

    //constructor
    constructor(x, y, radius, color, speed) {
        this.x = x;
        this.y = y;
        this.radius = radius;
        this.color = color;
        this.speed = speed;
    }

    //functions

    draw(ctx) {
        ctx.save();
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI / 180 * 360);
        ctx.fillStyle = this.color;
        ctx.strokeStyle = "green";
        ctx.stroke();
        ctx.fill();
        ctx.lineWidth = 5;
        ctx.restore();
    }

    move() {
        if (this.x > width) {
            this.speed = -this.speed;
        }
        if (this.x < 0) {
            this.speed = -this.speed;
        }

        this.x += this.speed;
    }
}//end Ball class

box.js

class Box {
    //properties
    width;
    height;
    color;
    x;
    y;
    speed;
    spin;

    //constructor
    constructor(x, y, width,height, color, speed) {
        this.x = x;
        this.y = y;
        this.width = width;
        this.height=height
        this.color = color;
        this.speed = speed;
        this.spin=1;
    }

    //functions

    draw(ctx) {
        ctx.save();         // Calculate the center of the rectangle
        const centerX = this.x + this.width / 2;
        const centerY = this.y + this.height / 2;
        // Move the origin to the center of the rectangle
        ctx.translate(centerX, centerY);
        ctx.rotate(this.spin);    

        ctx.beginPath();              
        ctx.rect(-this.width/2,-this.height / 2,this.width,this.height);             
        ctx.fillStyle = this.color;
        ctx.strokeStyle = "green";       
        ctx.stroke();
        ctx.fill();
        ctx.lineWidth = 5;
        ctx.restore();
       
    }

    rotate() {        
        this.spin+=this.speed;       
    }
}//end Box class

ball.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OOP</title>
</head>
<body>
    <canvas></canvas>
    <script src="ball.js"></script>
    <script src="box.js"></script>
    <script>
       
        //Create 2D Field
        const canvas = document.querySelector('canvas');
        const ctx = canvas.getContext('2d');
      
        //Create Field Size
        const width = canvas.width = window.innerWidth;
        const height = canvas.height = window.innerHeight;

        //Create a Ball object
        let ball1 = new Ball(50, 100, 40, "yellow", 1);
        let box1 = new Box(50, 100, 50,100, "red", .2);
        let box2 = new Box(50, 200, 50,100, "purple", .1);
        

        let balls=[];
        let rects=[];

        let colors=["red","green","blue","purple","pink","yellow","gray","skyblue"];

        canvas.addEventListener("mousemove", (e) => { 
            
            let rand_color=Math.floor(Math.random() * ((colors.length-1) - 0) ) + 0;
            let rand_speed=Math.floor(Math.random() * ((10) - 1) ) + 1;
            let rand_size=Math.floor(Math.random() * ((50) - 10) ) + 10;
           
            let color=colors[rand_color];
            let ball=new Ball(e.offsetX,e.offsetY, rand_size,color, rand_speed);
            balls.push(ball);

           
            let box = new Box(e.offsetX,e.offsetY, 4*rand_size,4*rand_size, color, .1); 
            rects.push(box);
        });

        //Create Game Loop
        function loop() {
            ctx.clearRect(0, 0, width, height, canvas);
            
            //Update Balls Position and Speed

            for(let b of balls){
                b.draw(ctx);
                b.move();
            }

            for(let r of rects){
                r.draw(ctx);
                r.rotate();
            }
            
            ball1.draw(ctx);
            ball1.move();
          
            box1.draw(ctx);
            box1.rotate();

            box2.draw(ctx);
            box2.rotate();
          
           

            requestAnimationFrame(loop);
        }
        requestAnimationFrame(loop);
    </script>
</body>

</html>

/36

JavaScript Object Oriented Programming: Fun Animation

Comments 0