Tracking JavaScript ‘mousemove’ and ‘touchmove’ Event Positions for a Game (or whatever)

Feb 14, 2020
RK

Today I am very excited! I finished the first stable iteration of a JavaScript game that I have been working on for a few weeks now.

Click for Context
The original game I built on is called PlasmaForce developed by Ken Zhong. It is an open source project, and if I am being completely honest, he did most of the heavy lifting.

I dove into this project because I really wanted to stop pretending I knew JavaScript, with the little I learned with it from school, and actually struggle with it. The original version lacked a few key features that I wanted to expand on:

1. A difficulty setting
2. More enemy ships
3. The ability to control the ship with the mouse or touchscreen
(You can only play the original version with a keyboard)

I also noticed the screen refresh rate would dictate the game speed which made playing on a 144hz monitor uncomfortably difficult.

Instead of trying to coordinate with Mr. Zhong for access, and the fact that project was untouched for more than two years, I decided to simply fork and start making my own adjustments.

Maybe he will revisit it and like what he sees on my branch?

I must say that simply creating comments while tracing the code to understand dependencies really helped me learn. I’m kind of glad comments were lacking in the original code.

I want to add power-ups, levels (to make it more like a shoot-em-up than a bullet hell), and introduce visuals based on sound processing at some point. Plenty of stuff to do with my free time 🙂 Feel free to check out or contribute to the project.

But That Probably Isn’t Why You’re Here


Basically we need a way to track the coordinates in real time as the mouse moves around inside the browser using JavaScript.


Say we had some function in our JavaScript file called “setHoverCoordinates(positionX, positionY)” and we also had a canvas element identified as ‘c-container’.

We could use the following code snippet to get the coordinates of the mouse when the mouse entered the space of the canvas element:

document.getElementById('c-container').addEventListener('mousemove', e => {
      this.setHoverCoordinates(e.clientX, e.clientY);
})


The event that is triggered by the mouse moving over the canvas element will contain the properties “clientX” and “clientY” which we can use to reference the position. Remember that (0, 0) exists in t he top left corner.


So that’s ‘mousemove’…

I was under the assumption that the same logic would easily transfer to the ‘touchmove’ event.


Turns out the events fired by the finger dragging on a touchscreen device do indeed have the properties “clientX” and “clientY”, but I was unable to get continuous events to update the variables in my setHoverCoordinates function.


Here is how I was able to get the same behavior as ‘mousmove’ for a touchscreen ‘touchmove’ event:

document.addEventListener('touchmove', e => {
	this.setHoverCoordinates(e.targetTouches[0].pageX, e.targetTouches[0].pageY);
})


The events triggered contain an array of objects, “targetTouches”, where each object contains the properties “pageX” and “pageY”. The first index gives use the information we seek.


I hope this saves you time in your quest to develop similar functionalities for mouse-hovering and touchscreen-dragging -ish events.