Nov 17th, 2024 at 04:40 PM

OOP in JavaScript: Understanding class and object with an real life example

Step 1 : Define a class name Ball

class Ball{  
  //properties
  //constructor
  //functions
}

Step 2 : Add some ball properties in the class

class Ball{  

   //properties
   radius;
   color;
   x; 
   y;
   speed;

  //constructor

  //functions
}

Step 3 : Set the initial value for the ball properties by creating constructor in the class

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
}

Step 4 : Add some ball functions in the class

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.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;
            }

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

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

Step 5 : Call Object by Man Program Code

//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 ball = new Ball(50, 100, 10, "red", 1);

        //Create Game Loop
        function loop() {
            ctx.clearRect(0, 0, width, height, canvas);
            ball.draw(ctx);
            ball.move();
            requestAnimationFrame(loop);
        }
        requestAnimationFrame(loop);

Complete Code

<!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>
        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.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;
            }

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

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


        //Create 2D Field
        const canvas = document.querySelector('canvas');
        const ctx = canvas.getContext('2d');

        //Set 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 ball2 = new Ball(50, 100, 40, "red", 2);

        //Create Game Loop
        function loop() {
            ctx.clearRect(0, 0, width, height, canvas);

           //Update Balls Position and Speed
            ball1.draw(ctx);
            ball1.move();

            ball2.draw(ctx);
            ball2.move();

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

/58

OOP in JavaScript: Understanding class and object with an real life example

Comments 0