Develop Reference

How to rotate and move a sprite towards the cursor?

Lets say that I have a player sprite, located at (player.x, player.y). On a mousemove event, I am capturing the cursor's position, which is (e.pageX, e.pageY). In the game, the player will be constantly moving, always towards the direction of the cursor. I am trying to find a way to to rotate the player sprite to always face the mouse cursor, and also move 10 pixels closer to the cursor every game tick. So far, this has me stumped. I have seen many examples of this online, and have tried all of them, but none seem to work. Any help that can be provided would be very much appreciated.

First of all, you must learn the basics of trigonometry. Without this knowledge, you will can't make something like you want.
Center of you image is the center of an circle. Knowing position of center and mouse position, you can calculate the angle. Calculated angle you can use to rotate image.

How to detect mouseenter/mouseleave event on lots of items without slow-down

I have realy specific question about Canvas handling mouse-events.
I'm working on a isometric game, I have a displayed map with all tiles, and I want know on which one the mouse are.
On a basic isometric map it's easy to transform the position on the screen (blue on the next image) on a map position (orange) with basic affine function (ax+b, with 'a' is width_tile/height_tile and b is the current position of the map view, red line on the image)..
But I have a complication, each tile of the game have a specific elevation (displayed by red arrow on second image). So i can't use a function for each line(y)/column(x) of the map.
On the same technique I'll try to calculate if mouse position are on EACH tile one by one for EACH mouse event (move, click, ..) but I'm afraid for the heavy code : if I have a 100x100 map and I shack the mouse, I'm sure all this test will ruin the client browser..
I realy don't know how can I do it better ?!
Someone have an idea, or a tips to optimize this check ?

Background sprites that respond to cursor movement

I'm attempting to create an effect that moves image sprites in a certain direction depending on the direction the mouse cursor is moving. I've looked into parallax scrolling but couldn't find much help. Any ideas on where I can find some more info or tutorials on objects relating to cursor movement?
For a better idea of what I'm talking about go to http://web-features.net/ and create a new layer that responds to mouse move.
Thanks

Google is your friend. This is the only tutorial I could find specific to your problem, but I'm sure there are many more tutorials about doing things with mouse position in javascript.

I don't know of any tutorials but check out the answer to this post :
Rotating an element based on cursor position in a separate element
That will get you started. Instead of rotating an element you can make changes to the background position.
Basically you want to imagine a right triangle where one end of the hypotenuse is the center of your element and the other is your cursor.
Using javascripts Math.atan2() you can pass in the y,x positions and it returns the angle in radians.
Is this enough info to get you going?
///////// Update /////////
Heres a demo I made for you also using css3 transitions : http://codepen.io/jeffpowersd/pen/ryBJz

This helped me!
http://www.w3schools.com/css/css_image_sprites.asp
Hope this helps!
Also note, that when moving right on the image sprite, the css direction is negative. For example,
#prev{background:url('img_navsprites_hover.gif') -47px 0;}
#prev a:hover{background: url('img_navsprites_hover.gif') -47px -45px;}
On the hover, the image is moved 47px right and 45px down.

HTML Canvas Zooming Issue

Recently, I decided to delve into the world of HTML5 and the canvas and I have run into an issue that I cannot figure out how to solve.
I am using the zoom technique that was mentioned in this question, as I need to be able to zoom into a specific point.
However, the issue I have encountered is when you zoom into an area, and then perform a large mouse movement, and then zoom out. The entire viewpoint and objects become skewed. (Objects that were previously occupying the entire canvas, are now partially or sometimes not visible at all.)
I am assuming that the zoom in towards a point function is using the mouse position upon zooming out, which is causing these issues.
Here is a demo to get an idea of the issue: (again to reproduce, just zoom in move the mouse a reasonable distance and zoom out)
Not-Working Demo

This is working as designed. When you apply your context translation based on the mouse position it will zoom centered on that position.
To achieve the fixed zoom out behavior I think you want you need to set the mouseX and mouseY only on zoom in and then use the last mouseX/mouseY (or possibly the center of the canvas, or some point in between) for zoom out.
Updated JSFiddle

Javascript rotate image with mouse coordinates

Im using a parallax effect that moves a ball according to the users mouse position (http://webdev.stephband.info/jparallax/index.html). I am trying to figure out a way that the ball will also rotate. So it would appear that as the user moves their mouse over the area, the ball rolls across the screen.
I have found some javascript examples that show how to rotate an item on mouse click, I am just not skiled enough in js to put it all together.
here is a Jsfiddle that shows an example:
jsFiddle

This is more tangential advice than an answer, but in order to make the rolling ball look realistic, make sure that it rotates at a rate that is consistent with the ball's circumference. Otherwise it will look fakey.

This jQuery plugin might be useful.