HTML5 / JS: have the cursor locked in a canvas element - javascript

So im making a html5 / js RTS game. The game can be ran fullscreen. The problem now is, players with dual screen will have their cursor go out of the canvas and jump over to the 2nd screen when they move it too far. Is there a good way, to prevent that ?
I know, there is this, but this seems to hide the cursor, which is obv not what i want in an RTS game. Ofc i could draw my own cursor, but the problem with this is, the cursor drawn then will depend on the framerate, which can sometimes go a bit down and so or so it will feel a lot less smooth than the "normal" cursor. So, is there a way to lock the cursor in an element without hiding it and still be moveable but just stop at the border ?

There is no method to restrict mouse movements by the user.
Chuckle...If it was possible you can imagine advertisers would freeze your mouse over a "purchase now" button on an ad. :-)
If it makes sense to your design, you can have your canvas element "capture the mouse events".
Capturing the mouse makes the canvas receive all mouse events even if the mouse is physically out of the canvas element. Maybe this will be useful in your design--maybe not.
https://developer.mozilla.org/en-US/docs/Web/API/Element.setCapture
Good luck with your game!

Related

Scroll event performance when scrolling with scrollbar vs. wheel vs. swipe

I'm making a simple website, that doesn't have to be super fast and performant, I'm only focused on some nice design elements. One of those design elements is blur that is applied to statically positioned background "under" some containers, that move when scrolling. This example should be self-explanatory. (I hope it's OK to share the website itself. It's just a personal website, no advertisement intended.)
This could be done with CSS filters and some moving background-position on the containers. However, the background is not an image but a canvas element. (For now, it's just an image redrawn into the canvas, but it will be generated algorithmically.) So my approach is: The blurred containers contain a canvas as their background and the content of the background canvas is redrawn with a filter applied on every scroll and resize event. As I said, this doesn't have to be fast and probably no other complex computations will be performed on the client-side, but a smooth user experience is important.
(If needed, I will provide relevant parts of the code.)
My question is: I noticed, that when scrolling with a scrollbar, it renders very smoothly, but when scrolling with a mouse wheel it probably just can't redraw the background fast enough and it looks as if the blurred background falls a bit behind. When swiping on a touch screen, it gets even worse and the blurred background is always behind the actual background. The fact that it's able to keep up when scrolling with a scrollbar makes me think that the problem is not with the canvas redrawing approach but with handling the events. Is there any way to handle the scroll event in such a way, that the performance will always be as good as when scrolling with a scrollbar? Maybe it's not even about performance, but rather that mouse wheel and swipe scrolling don't trigger the event as frequently, which causes these "gaps" when the canvas isn't being redrawn? If so, I should probably implement the redrawing in such a way, that it accounts for the delta of the scroll event and just draws the blurred background several times in between the events.

Javascript "dragging" an image across a canvas

There's quite a few questions about this where the solution provided is to just set the top left and top down values of the image to the position of the mouse/touch, however what I want to do is to have an actual dragging movement. Regardless as to where on the canvas I press, if I drag my finger to the right x pixels, I want the image to move to the right x pixels. Same goes with left, up, and down.
I'm at a complete loss as to where to even start with this. I will be handling mobile touch events, so I feel like using canvas.addEventListener('touchmove') would be the best option, but I'm not sure.
I already have the canvas repainting and everything handled, just really need help with the logic for dragging the image in real time, instead of just snapping it into position.
Get the point where the interaction starts (touchstart) and use it to calculate how much the finger moved on the screen (in the touchmove callback) and add it to the image position (also in touchmove).
PS: Also I recommend using something like PIXI JS for canvas/WebGL stuff ... unless you need a custom solution.

Always Show Mouse Over Canvas

I'm working on a javascript/canvas game, and using mouse position to determine what blocks to dig. Whenever I use the movement controls the mouse disappears though, which is annoying because then I have stop moving and move the mouse to see its position again.
So I'm looking for a way to make the mouse always visible on the canvas, opposite to using CSS cursor: none to make it invisible.
Full project here: https://gist.github.com/TuckerFlynn/0a52278878a888b0f695
The mouse can certainly navigate off-canvas, so...
Hide the mouse when it's over the canvas.
Draw your own "fake cursor" following the current mouse position reported by canvas's mousemove.
If the mouse leaves the canvas, just leave the fake cursor visible as a reminder of the mouse's last canvas position.
Your "fake" canvas cursor doesn't have to look like a mouse. It could even be a simple cross. Or if you really want it to look like a mouse, then move an image of a mouse around the canvas.

How to contain my mouse pointer within a canvas/div?

I am currently trying to make a small html5 canvas game.
I want my mouse pointer to stay within a div element or canvas boundary.
Point me in the right direction please.
You can use the new Pointer Lock API. It is now supported by Chrome, Firefox, Edge, Opera, and Safari.
Excerpt from the article linked above (my emphasis):
The Pointer Lock API (formerly called Mouse Lock API) provides input methods based on the movement of the mouse over time (i.e., deltas), not just the absolute position of the mouse cursor in the viewport. It gives you access to raw mouse movement, locks the target of mouse events to a single element, eliminates limits on how far mouse movement can go in a single direction, and removes the cursor from view. It is ideal for first person 3D games, for example.
More than that, the API is useful for any applications that require significant mouse input to control movements, rotate objects, and change entries, for example allowing users to control the viewing angle by moving the mouse around without any button clicking. The buttons are then freed up for other actions. Other examples include apps for viewing maps or satellite imagery.
Pointer lock lets you access mouse events even when the cursor goes past the boundary of the browser or screen. For example, your users can continue to rotate or manipulate a 3D model by moving the mouse without end. Without Pointer lock, the rotation or manipulation stops the moment the pointer reaches the edge of the browser or screen. Game players can now click buttons and swipe the mouse cursor back and forth without worrying about leaving the game play area and accidentally clicking another application that would take mouse focus away from the game.
Also see the link for examples.

Flash inside a draggable div

I have a flash video player sitting inside a div container. That is made draggable using javascript. I dont want it to be sensitive to dragging when the mouse is on the flash part. It should be draggable only when mouse is on the remaining div container. The expected behavior happens in Linux. However, in windows cursor on mouse makes it draggable as well. How can I avoid that. Thanks in advance :)
I'm not sure if you even have control over this behaviour. If there is no immediate solution, an alternative would be to create a drag-handle for the div container. So you move the entire div by dragging the handle, and only the handle is sensitive to the drag-action (just like with most Windows forms, you can move an entire window by dragging its title bar).
As soon as your mouse enters the flash rectangle, it can only control the flash content and you lose all control over the html, javascript or not.
I imagine this to work like a paddling pool on wheels. Try to push the paddling pool around by moving the water, and all you end up with is wet hands.
It may be possible to add a 'handle' to the outside of the flash content, which will then move the flash content around when dragged.
alt text http://cnb-host3.clickandbuild.com/cnb/shop/powerranger?imageID=1218&op=imgLib-viewImage

Categories