# Logic to getting the mouse position on game map

This topic is 2485 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

## Recommended Posts

Hey,

I'm having difficulty understanding how to get the grid location of the mouse on a game map (isometric game).

I use a Canvas in html so my langauge is javascript - but i'd imagine the logic is the same in all languages.

The mouse position is a x : y pixel co ordinate within the canvas. But i need to get it the X:Y grid co ordinates .

Is there some clever mathematical way to work it out ?

##### Share on other sites
to get the grid X/Y you simply take:

gridX = gridXOffset+Math.floor(mousex / tile_width);
gridY = gridYOffset+Math.floor(mousey / tile_height);

The offsets are the distance from the left/top of the canvas your grid starts from. (If you have a scrolling map then you need to add the amount scrolled to the offsets aswell)

##### Share on other sites
Totally lost me with the left/top part.

This is how i draw my map on canvas the offset_x and offset_y is related to scrolling.
------
 for (i=0;i<tiles_wide;i++){ for (j=0;j<tiles_long;j++){ var x = (i-j)*(img[0].height/2) + (ctx.canvas.width/2)-(img[0].width/2); var y = (i+j)*(img[0].height/4); abposx = x + offset_x; abposy = y + offset_y; //draw function here } } 

##### Share on other sites
This is what I use for touches or mouse click:

if(navigator.userAgent.match(/(iPhone)|(iPod)|(iPad)/i)){ document.addEventListener('touchstart', function(e) { if(e.touches.length == 1){ // handle first touch event var touch = e.touches[0]; // Get the information for finger #1 var x = touch.pageX - canvas.offsetLeft; var y = touch.pageY - canvas.offsetTop; // clickEvent( x,y); moveEvent( x,y); //first touch moves player } if(e.touches.length==2){ //handles second touch event var touch2 = e.touches[1]; // Get the information for finger #1 var x2 = touch2.pageX - canvas.offsetLeft; var y2 = touch2.pageY - canvas.offsetTop; clickEvent(x,y); //second touch calls function and passes coordinates } },false); } else{ //Set up a mouse listener instead document.addEventListener('mousedown',function(e) { var x = e.pageX - canvas.offsetLeft; var y = e.pageY - canvas.offsetTop; console.log(x+"mousex:mousey"+y); clickEvent(x,y); //call your function to manage input },false); }

also for getting a hover inside the canvas canvas.onmousemove = function (event) { // this object refers to canvas object Mouse = { x: event.pageX - this.offsetLeft, y: event.pageY - this.offsetTop } hoverEvent(Mouse.x,Mouse.y); console.log('x:'+Mouse.x+' y:'+Mouse.y); }

##### Share on other sites
What is canvas.offsetLeft and canvas.offsetTop all about Ive not seen that before.

For me i got a offset for scrolling but i dont use the canvas offset - im not familiar with that. I am curious though for my grid as shown in my loops in other post they are carried in the letters i and j but my mouse doesn't get the same numbers so they don't match.

 function movePos(e){// scrolling canvas.addEventListener('mouseup',onMouseUp,false); canvas.addEventListener('mouseout',onMouseUp,false); if (prev_mousex === 0 && prev_mousey === 0) { prev_mousex = e.pageX; prev_mousey = e.pageY; } offset_x = offset_x + (e.pageX - prev_mousex); offset_y = offset_y + (e.pageY - prev_mousey); prev_mousex = e.pageX; prev_mousey = e.pageY; } function gridclick(x,y){ ymouse=Math.round((y/img[0].height)/4); xmouse=Math.round((x/img[0].width)/2); } function mousePos(e){ var x = e.pageX+offset_x; var y = e.pageY+offset_y; gridclick(x,y); document.getElementById("offset").innerHTML = "<br/>Mouse X "+xmouse+"<br/>Mouse Y: "+ymouse; canvas.addEventListener("mousemove", movePos, false); } function init(){ canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); loadimg(); //call draw and other stuff canvas.addEventListener("mousedown", mousePos, false); } 

##### Share on other sites
offsetLeft and top are properties of canvas, they just exist. Better explanation than I can give https://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/HTML-canvas-guide/AddingMouseandTouchControlstoCanvas/AddingMouseandTouchControlstoCanvas.html 1/3 of the way down is a mouse and touch example.

It only gives you the click position within the canvas window, starting at 0,0 top left. If you need to offset from the beginning of your map, you have to maintain the offset as you move around the map and add it to the click coordinate.

In my game the map is an object, with x and y properties and as the player moves you maintain the offset.

http://www.quirksmode.org/js/events_properties.html 3/4 the way down it lists 6 click properties,

1. clientX,clientY
2. layerX,layerY
3. offsetX,offsetY
4. pageX,pageY
5. screenX,screenY
6. x,y

1. 1
2. 2
Rutin
20
3. 3
khawk
18
4. 4
A4L
14
5. 5

• 12
• 16
• 26
• 10
• 44
• ### Forum Statistics

• Total Topics
633765
• Total Posts
3013730
×