• Home
  • Jobs
  • Courses
  • Questions
  • Teachers
  • For business
  • ES/EN

0

33
Views
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);

about 1 month ago ·

Juan Pablo Isaza

1 answers
Answer question

0

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>

about 1 month ago · Juan Pablo Isaza Report
Answer question
Find remote jobs
Loading

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post job Plans Our process Sales
Legal
Terms and conditions Privacy policy
© 2022 PeakU Inc. All Rights Reserved.