Geek Answers Handbook

Move image to mouse position?

Very new to Javascript, just trying to learn :)

What I want to do is to have the image (ultimately the sprite) by default, then when I click the right mouse button on the screen, I want the image to gradually move to this place?

I did some research, but could not find it specifically.

Ultimately, I want to have an animated game character that I can move around the screen with the right mouse button.

+4
source share
4 answers

Like everyone else said, stay away from the right click, here is an example using jQuery.

Live demo

var $follower = $("#follower"), mouseX = 0, mouseY = 0; $(document).click(function(e){ mouseX = e.pageX; mouseY = e.pageY; $follower.stop().animate({left : mouseX, top: mouseY}); });

and pure JS updated 2017 to use requestAnimationFrame instead of setTimeout

Demo

 var mouseX = 0, mouseY = 0, follower = document.getElementById("follower"), xp = 0, yp = 0; document.onclick = function(e){ mouseX = e.pageX; mouseY = e.pageY; }; function animate(){ requestAnimationFrame(animate); xp += (mouseX - xp) / 12; yp += (mouseY - yp) / 12; follower.style.left = xp + 'px'; follower.style.top= yp + 'px'; } animate();
+5
source

The last thing I checked does not have a reliable and cross-browser way to handle right-click, so I would advise you to stay with the left click. Given that you are very new to Javascript, you probably want to use jQuery. To animate an object on the screen, I would point you to jQuerys animate () , where they have examples.

+2
source

I would not use a right-click if possible. I found support in Firefox and Chrome, but had problems with IE.

If you went with a left click, I would use the jQuery framework ( http://jquery.com/ ).

You can add a catch click anywhere on the page and then get the coordinates from the event. Using the coordinates, you can change the CSS of the element you want to move:

 <html> <head> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($){ $(document).click(function(e){ $('#element').animate( { "top": e.pageY + "px" }, { queue: false, duration: 1500 }).animate({ "left": e.pageX + "px" }, 1500 ); }); </script> </head> <body> <div id="element" style="width:100px; height:100px; background:red; position:absolute;"></div> </body> </html>
0
source

I usually agree that cluttering with the right mouse button is a bad idea. But in the case of the creation of the game, control over the yuan is actually quite acceptable, if not desirable. Most of the reasons for taking control of the renminbi go away in this situation, and it can be used to increase the functionality of the game (the reason the user is on the first page), and not to take away the functionality (the general reason that they did not mess with the renminbi).

However, jQuery is not the best option for this kind of thing. It is simply not related to the development of the game. Instead, take a look at html5 game development. There are several different game engines that simplify this task, and the best resource list at the moment is the resource section for HTML5 games

Construct2 doesn't even require a lot of programming!

0
source

More articles:


All Articles