I want to add speedup and speeddown button to increment and decrement the speed of object and also s-CodePudding

let canvas = document.getElementById("canvas");

let context = canvas.getContext("2d");
   // **for canvas size**
var window_width = window.innerWidth;
var window_height = window.innerHeight;

canvas.width = window_width;
canvas.height = window_height;
canvas.style.background = "#ff8";

//for adding numbers into the circle
let hit_counter=0;




//** object is created using class for creating circle**
class Circle {
    constructor(xpos, ypos, radius, speed, color, text) {

        this.position_x = xpos;
        this.position_y = ypos;

        this.radius = radius;
//**I want to add speedup and speeddown button to increment and decrement the speed of object and also stop button to stop the object. How to do that??**
        this.speed = speed;
//**I want to add speedup and speeddown button to increment and decrement the speed of object and also stop button to stop the object. How to do that??**
        this.dx = 1 * this.speed;
        this.dy = 1 * this.speed;

        this.text = text;

        this.color = color;
    }
    
//**creating circle**
    draw(context) {
        context.beginPath();
        context.strokeStyle = this.color;
        context.fillText(this.text, this.position_x, this.position_y);
      
        context.textAlign = "center";
        context.textBaseline = "middle"
        context.font = "20px Arial";
        context.lineWidth = 5;
        context.arc(this.position_x, this.position_y, this.radius, 0, Math.PI * 2);
        context.stroke();
        context.closePath();
    }

    
    update() {
        

        
        this.text=hit_counter;
          

        context.clearRect(0,0,window_width,window_height)

        this.draw(context);

        if ( (this.position_x   this.radius) > window_width ) {
            this.dx = -this.dx;  
            hit_counter  ;  
        }
        
        if ( (this.position_x - this.radius) < 0 ) {
            this.dx = -this.dx;
            hit_counter  ;  
        }

        if ( (this.position_y - this.radius) < 0 ) {
            this.dy = -this.dy;
            hit_counter  ;  
        }

        if ( (this.position_y   this.radius) > window_height ) {
            this.dy = -this.dy;
            hit_counter  ;  
            
           
        }

        this.position_x  = this.dx;
        this.position_y  = this.dy; 
        
     
    }
}



  



let my_circle = new Circle(100, 100, 50,  2 , 'Black', hit_counter);




let updateCircle = function() {
  requestAnimationFrame(updateCircle);
 my_circle.update();
 
}

updateCircle();

//**I want to add speedup and speeddown button to increment and decrement the speed of object and also stop button to stop the object. How to do that??**

 <canvas id="canvas"></canvas>

CodePudding user response：

Added "Start" and "Stop" buttons and events for them. To stop the animation, we need a new variable: animationId. Every time you call requestAnimationFrame you must update it.
The Circle class uses dx (horizontal) and dy (vertical) to control speed. Inside the "Circle" class, a new "updateSpeed" method has been added to update these variables.
Added 'Speed up' and 'Speed down' buttons and events for them. The Circle.updateSpeed method used inside the event methods.

let canvas = document.getElementById("canvas");

let context = canvas.getContext("2d");
   // **for canvas size**
var window_width = window.innerWidth;
var window_height = window.innerHeight;

canvas.width = window_width;
canvas.height = window_height;
canvas.style.background = "#ff8";

//for adding numbers into the circle
let hit_counter=0;




//** object is created using class for creating circle**
class Circle {
    constructor(xpos, ypos, radius, speed, color, text) {

        this.position_x = xpos;
        this.position_y = ypos;

        this.radius = radius;
//**I want to add speedup and speeddown button to increment and decrement the speed of object and also stop button to stop the object. How to do that??**
        this.speed = speed;
//**I want to add speedup and speeddown button to increment and decrement the speed of object and also stop button to stop the object. How to do that??**
        this.dx = 1 * this.speed;
        this.dy = 1 * this.speed;

        this.text = text;

        this.color = color;
    }
    
    updateSpeed() {
        this.dx = 1 * this.speed;
        this.dy = 1 * this.speed;
    }
  
//**creating circle**
    draw(context) {
        context.beginPath();
        context.strokeStyle = this.color;
        context.fillText(this.text, this.position_x, this.position_y);
      
        context.textAlign = "center";
        context.textBaseline = "middle"
        context.font = "20px Arial";
        context.lineWidth = 5;
        context.arc(this.position_x, this.position_y, this.radius, 0, Math.PI * 2);
        context.stroke();
        context.closePath();
    }

    
    update() {
        

        
        this.text=hit_counter;
          

        context.clearRect(0,0,window_width,window_height)

        this.draw(context);

        if ( (this.position_x   this.radius) > window_width ) {
            this.dx = -this.dx;  
            hit_counter  ;  
        }
        
        if ( (this.position_x - this.radius) < 0 ) {
            this.dx = -this.dx;
            hit_counter  ;  
        }

        if ( (this.position_y - this.radius) < 0 ) {
            this.dy = -this.dy;
            hit_counter  ;  
        }

        if ( (this.position_y   this.radius) > window_height ) {
            this.dy = -this.dy;
            hit_counter  ;  
            
           
        }

        this.position_x  = this.dx;
        this.position_y  = this.dy; 
        
     
    }
}



  



let my_circle = new Circle(100, 100, 50,  2 , 'Black', hit_counter);

var animationId;

let updateCircle = function() {
  animationId = requestAnimationFrame(updateCircle);
  my_circle.update();
}

animationId = updateCircle();

function stop() {
  cancelAnimationFrame(animationId);
}

function start() {
  cancelAnimationFrame(animationId);
  animationId = updateCircle(animationId);
}

function speedUp() {
    my_circle.speed  ;
    my_circle.updateSpeed();
}

function speedDown() {
    if (my_circle.speed > 1) {
        my_circle.speed--;
    }
    my_circle.updateSpeed();
}

//**I want to add speedup and speeddown button to increment and decrement the speed of object and also stop button to stop the object. How to do that??**

<button onclick="speedUp()">Speed up</button>
<button onclick="speedDown()">Speed down</button>
<button onclick="start()">Start</button>
<button onclick="stop()">Stop</button>

<canvas id="canvas"></canvas>