Moving an image to the position of the mouse?_问答_开发者

Moving an image to the position of the mouse?

开发者 https://www.devze.com 2023-04-06 03:40 出处：网络

Very Very new to Java开发者_如何学JAVAscript, just trying to learn :) What I want to do is have an image (will ultimately be a sprite) at default location, then when I click the right mouse button on

相关专题：javascript

Very Very new to Java开发者_如何学JAVAscript, just trying to learn :)

What I want to do is have an image (will ultimately be a sprite) at default location, then when I click the right mouse button on the screen, I want the image to gradually move to that location?

I did some research but couldn't find this specifically.

Ultimately I want to have a animated game character that I can move on the screen using the right mouse button.

Like everyone else said stay away from right click, heres 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();

Last I checked, there isn't a reliable and cross-browser way to handle right-clicking, so I'd advise you stay with a left-click. Given you are very very new to Javascript, you'd probably want to use jQuery. For animating the object on the screen, I'd point you to jQuerys animate() where they have examples.

I would avoid using the right mouse click if you can. 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 catch the click anywhere on the page, then get the coordinates from the event. Using the coordinates, you can then 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>

Normally, I'd agree that messing with the right mouse button is a bad idea. But in the case of making a game, taking control of the RMB is actually perfectly acceptable, if not desired. Most of the reasons for taking control of the RMB go away in this situation, and it can be used to increase the functionality of the game (the reason the user is on the page in the first place), as opposed to taking away functionality (the common reason behind not messing with the RMB).

That said, jQuery is not the best option at all for this sort of thing. It's just not geared towards game development. Instead, look into html5 game development. There's a few different game engines out there that make this sort of thing easy, and the best list of resources at the moment is the HTML5 Games Resource Section

Construct2 doesn't even require much programming understanding at all!