Hello, I ask for help in the following: It is necessary to make an animation so that in a given area (square), an object (circle) will arbitrarily bounce off the mouse cursor, without flying out of the specified area.

<html> <head> <title>Тени и простенькая анимация</title> <script type="text/javascript"> var canvas, ctx, w, h; var ball = { x : 50, y : 100, r : 15, vx : 0, vy : 0 }; var count = 0; function init() { canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); w = canvas.width; h = canvas.height; ctx.font = "18px Times-Roman"; ctx.strokeRect(0, 0, w, h); } setInterval(function() { ctx.clearRect(1, 1, w - 2, h - 2); ball.x += ball.vx; ball.y += ball.vy; ball.vx *=1; ball.vy *= 1; ball.vy += .55; if (ball.y + ball.r > h - 15) { count++; ball.y = h - 15 - ball.r; ball.vy = -Math.abs(ball.vy); } if (count >= 1) { ball.vy *= 0.99; } if (count == 1) { ball.vx =5; } if (ball.x+ball.r > w - 15) { ball.x = w - 30; ball.vx = -Math.abs(ball.vx); } if (ball.x < 30) { ball.x = 30; ball.vx = -ball.vx; } ctx.save(); ctx.fillText("Count: " + count, 250, 50); ctx.fillStyle = "black"; ctx.translate(ball.x, ball.y); ctx.beginPath(); ctx.arc(0, 0, ball.r * 2, 0, 2 * Math.PI, true); ctx.closePath(); ctx.fill(); ctx.restore(); },25); </script> </head> <body onload="init()"> <canvas id="canvas" width="600" height="600"> error </canvas> </body> </html>

http://jsfiddle.net/jLQwb/

  • @Ghary92, According to the rules of the forum, questions should not be reduced to the decision or the completion of student assignments. Please clarify what you have done yourself and what did not work out. - ReinRaus
  • I made an object in this area move, but I don’t know how to make it bounce off randomly from the cursor . Tell me the event - Harry92
  • @Ghary92 example in the studio :) Based on it, we will provide an example. - lampa
  • @Ghary92 by the way, it would be nice to specify a programming language. No, I, of course, understand that we are most likely talking about JavaScript, but [little] [1] [1]: msdn.microsoft.com/ru-ru/library/… - DreamChild
  • @ Harry92 moved your comments back. - lampa

2 answers 2

Write a mousemove event mousemove for your canvas . In the handler, get the mouse cursor on canvas , and determine whether the cursor is in a circle . Further change the direction of the circle. Similarly, using simple formulas , determine whether your circle intersects the boundaries of a region and, if it crosses, change its direction using these formulas . Formulas for reflection can be greatly simplified, if we assume that the boundaries of the region are strictly vertical and horizontal. In this case, it is enough to change the sign of the corresponding component of the velocity vector of the circle.

     var canvas, ctx, w, h; var ball = { x : 50, y : 100, r : 15, vx : 0, vy : 0 }; var count = 0; var mouseActive = false; var start = -.5 * Math.PI; function init() { canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); w = canvas.width; h = canvas.height; ctx.font = "18px Times-Roman"; ctx.strokeRect(0, 0, w, h); canvas.addEventListener('mouseout', function() { mouseActive = false; }, false); canvas.addEventListener('mousemove', function(e) { mouseActive = { x: e.clientX - this.getBoundingClientRect().left, y: e.clientY - this.getBoundingClientRect().top }; }, false); } setInterval(function() { ctx.clearRect(1, 1, w - 2, h - 2); ball.x += ball.vx; ball.y += ball.vy; ball.vx *=1; ball.vy *= 1; ball.vy += .50; if (ball.y + ball.r > h - 15) { count++; ball.y = h - 15 - ball.r; ball.vy = -Math.abs(ball.vy); } if (count >= 1) { ball.vy *= 0.99; } if (count == 1) { ball.vx =5; } if (ball.x+ball.r > w - 15) { ball.x = w - 30; ball.vx = -Math.abs(ball.vx); } if (ball.x < 30) { ball.x = 30; ball.vx = -ball.vx; } ctx.save(); ctx.fillText("Count: " + count, 250, 50); if(mouseActive) { // если шарик касается, то отпружиниваем его var x0 = mouseActive.x - ball.x; var y0 = mouseActive.y - ball.y; if(Math.sqrt(Math.pow(x0, 2) + Math.pow(y0, 2)) < ball.r * 2) { if(mouseActive.x < ball.x) { ball.vx = 10; } else { ball.vx = -10; } ctx.fillStyle = "red"; } else { ctx.fillStyle = "black"; } } ctx.translate(ball.x, ball.y); ctx.beginPath(); ctx.arc(0, 0, ball.r * 2, 0, 2 * Math.PI, true); ctx.closePath(); ctx.fill(); ctx.restore(); }, 25);

    You just have to correctly reflect the formula @ fori1ton

    Hint: finding the angle can be peeped in this question: mousemove handler on canvas

    • Thank you so much lampa))) - Harry92