CODEWITHSUNDEEP
javascriptcanvasmousemove
Crash263
Crash263

Reputation: 9

How to use canvas and mouse event to move a circle?

I need some help with a project for school if anyone is willing this is the task we use canvas-javascript'When you start the game, a circle is generated in the center of the screen. We call that circle main circle; ● The player controls the movement of the main circle by moving the mouse. The circle moves across the canvas by following the mouse arrow. More precisely, it is necessary to move the center of the main circle to the direction of the current cursor position on the canvas at a certain speed (for example, 20px / s); ● The game starts when the player moves the mouse (ie the main circle);

Upvotes: 0

Views: 1253

Answers (1)

James
James

Reputation: 2787

Since you only want to make a circle that follow the mouse, so a combination of mousemove and clientX/clientY will be a good option.

        let div = document.querySelector('#cursor')
        document.querySelector('canvas').onmousemove = function(event){
            //track mouse position and change for custom cursor
            div.style.left = event.clientX-5+'px'
            div.style.top = event.clientY-5+'px'
        };
canvas{
    width: 50vw;
    height: 50vh;
    border: 2px solid red;
}
#cursor{
    width: 10px;
    height: 10px;
    background: red;
    position: absolute;
    top: 25%;
    left: 25%;
    border-radius:50%;
}
<canvas></canvas>
   <div id=cursor></div>

Upvotes: 2

Related Questions