Home/ Questions/Q 9155211
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T12:33:07+00:00

I am making a game of paddle ball, I have designed and scripted ball

  • 0

I am making a game of paddle ball, I have designed and scripted ball under boundary.
I want to make a paddle more and that moves with current mouse position.
How do i get that?
This is my code of ball moving under boundary, I need a paddle at bottom.

<!doctype html>
<html>
<body onload="init();">
<script>
var context;
var x=150;
var y=150;
var dx=2;
var dy=4;

function init()
{
  context= myCanvas.getContext('2d');
  setInterval(draw,10);
}

function draw()
{
  context.clearRect(0,0, 300,300);
  context.beginPath();
  context.fillStyle="#98bf26";
  // Draws a circle of radius 20 at the coordinates 100,100 on the canvas
  context.arc(x,y,10,0,Math.PI*2,true);
  context.closePath();
  context.fill();


  // Boundary Logic
if( x<0 || x>300) dx=-dx;
if( y<0 || y>300) dy=-dy;
x+=dx;
y+=dy;
}

</script>

  <canvas id="myCanvas" width="300" height="300" style="border:1px dotted #111;" >
  </canvas>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try to add to your code

    myCanvas.onmousemove = mouse_move_callback

    Where mouse_move_callback is a function like

    function mouse_move_callback(ev) {
  // Get mouse position
  if (ev.offsetX) {
    c_x = ev.offsetX;
    c_y = ev.offsetY;
  }
  if (ev.layerX) {
    c_x = ev.layerX;
    c_y = ev.layerY;
  }
  // Update paddle position
  update_paddle(c_x,c_y);
}
    • 0