Develop Reference

How to capture global touch event in phaser.js

I need to do some actions after touch in any part of the screen. At this moment, I am using something like this:
update: function() {
if (this.game.input.activePointer.isDown) {
this.game.input.keyboard.onDownCallback = null;
this.start();
}
}
But I just don't feel it right, while I probably can use callbacks as I do with a keyboard:
this.game.input.keyboard.onDownCallback = function(e){
this.game.input.keyboard.onDownCallback = null;
self.start();
}
Is there any way to use callback on touch instead of checking in update?

this.game.input.onDown.add(function() {
console.log("input captured");
});
As simple as that. It will work for mouse and for touch.

Javascript detect keyspressed

I am trying to write a program that detects mouse movement and keys pressed conditions.
If run with html, this java script program can detect the mouse moving. I applied a similar strategy and found out that 'keydown' is the correct command to use, yet when I run the program, the keys are not changing the output to "keys are pressed."
var timer;
// mousemove code
var stoppedElement = document.getElementById("stopped");
function mouseStopped() { // the actual function that is called
stoppedElement.innerHTML = "Mouse stopped";
}
window.addEventListener("mousemove", function() {
stoppedElement.innerHTML = "Mouse moving";
clearTimeout(timer);
timer = setTimeout(mouseStopped, 300);
});
//keypress code
var keysElements = document.getElementById('keyPressed');
function keysPressed() {
keysElement.innerHTML = "Keys not Pressed";
}
window.addEventListener("keydown", function() {
keysElement.innerHTML = "Keys Pressed";
clearTimeout(timer);
timer = setTimeout("keysPressed", 300);
});
I have a feeling that my addEventListener for keydown isn't the correct method to use. Which would be the correct js method for checking for keys pressed?
Thanks

You assign a value to keysElements but then later reference keysElement, which would be undefined. Change the assignment from var keysElements = ... to var keysElement = ....
I'm also assuming you have an HTML document that contains elements stopped and keyPressed, e.g.:
<div id="stopped"></div>
<div id="keyPressed"></div>
those elements will be necessary in order for the Javascript to work properly.

Are you doing a keypress in the window or in a text field?
For window, try something like this with jQuery if you like
$(document).keypress(function(e) {
//do something
});
If you want it on an text field, try
$( "#target_input_field" ).keypress(function() {
//do something
});
https://api.jquery.com/keypress/

How to bind 'tap' and 'doubletap' to the same element in Hammer.js?

I'm currently (trying) to create some basic elements for a mobile game I'm working on in eclipse using cordova. The main thing I want to do here is to set up two tap events on the same element. The code below shows how I've tried to solve this, but when I try to doubletap it won't get detected - all I get is two single taps. I've tried different things, but none of them helped.
I also get this alert in the console, when the double tap fails: "Attempted to finish an input event but the input event receiver has already been disposed".
var doubletapped = false,
tapped = false;
$(function() {
var element = document.getElementById('blue');
var hammertime = Hammer(element).on("tap doubletap", function(event) {
if (event.type == 'doubletap') {
tapped = false;
doubletapped = true;
alert('doubleTap!');
console.log('doubleTap!');
}
if (event.type == 'tap') {
doubletapped = false;
tapped = true;
alert('single tap!');
console.log('singleTap!');
}
});
});
As explained in this Hammer.js changelog, I've set tap_always = false, but it didn't make a difference. What do you recommend? Is there any other library I could do the same thing without having this problem?
What I'm trying to achieve is to detect different taps or/and gestures on an element and then do different things. For example if single tap on element #1, then play audio file #1, and if double tap on same element, then play audio file #2.
Help would be appreciated!
Cheers

Try this -
var hammer = new Hammer.Manager(element, {});
var singleTap = new Hammer.Tap({event: 'singletap' });
var doubleTap = new Hammer.Tap({event: 'doubletap', taps: 2 });
hammer.add([doubleTap, singleTap]);
doubleTap.recognizeWith(singleTap);
singleTap.requireFailure([doubleTap]);
hammer.on('singletap', function() { console.log('single tap!') });
hammer.on('doubletap', function() { console.log('double tap!') });

Differentiating between mouseup mousedown and click

I know that mousedown happens when a user depresses the mouse button, mouseup happens when the release the mouse and click is of course two events mousedown and mouseup. I have three different events each dealing with these three events mouseup down and click. My question is how to differentiate between the three, now my mouse down has a timer, so I was thinking of adding a boolean in that timer and testing it within the click I tried this and it didn't work to my standards.
Mousedown- timer checks for certain classes then if none of these classes exist within the targeted element proceed
Mouseup- clear the timer
Click- open a module
I may have not made the boolean a global variable that each can read or not, or I am missing something completely. Here is an example quick code of my full code:
var isDown = false;
ee[i].addEventListener('click',function(){
if(isDown===false){
openModule();
}
},false);
ee[i].addEventListener('mousedown',function(){
var timer;
var $this = this;
timer = setTimeout(function(){
if($this.className == "class"){
isDown=true;
createActive();
}
},500);
},true);
ee[i].addEventListener('mouseup',function(){
clearTimeout(timer);
},false);
That is just a quick example. I may have missed some coding but I hope you catch my drift in the code above. Anyone know of a good way to differentiate between the three events?

I've rewritten your code utilizing jQuery...
var isDown = false;
var timer;
$('.class').mousedown(function(){
isDown = false;
timer = setTimeout(function(){
isDown = true;
//createActive();
console.log('MOUSE DOWN');
}, 500);
}).mouseup(function(){
if(isDown === false){
//openModule();
console.log('CLICK');
}else{
console.log('MOUSE UP');
}
clearTimeout(timer);
});
If you simply add jQuery to your page, my code will automatically attach itself to any element in your document with a class of 'class'.
I've commented out your createActive(); and openModule(); calls so that you can play around with it (viewing your javascript console at runtime will show you the script in action - remove the console.log() stuff when you're done playing). This code could be optimised a bit more but it will give you the general idea.
Your timer variable needed to be created globally (I moved it out of the function).
In this case (declaring a mousedown time barrier) the click function will be rendered useless so I've improvised it into the mouseup function.
It's good to know core javascript, but jQuery is just too easy and powerful to ignore.

Try this:
const isDown = ref(false)
const timer = ref(0)
const mouseDown = () => {
isDown.value = true
timer.value = setTimeout(() => {
isDown.value = false
}, 120)
}
const mouseUp = () => {
if (isDown.value === true) {
hideModal()
} else {
return
}
clearTimeout(timer.value)
}

Is it possible to listen for keydown and keyup while resizing window

I'm trying to detect keydown and keyup, while the window is being resized. What I've tried so far, only fires the key events after the resize is finished.
$(window).resize(function(){
console.log("resizing");
});
$(window).keydown(function(e){
$("#key").css("background","green");
});
$(window).keyup(function(e){
$("#key").css("background","red");
});

Okay, so part of the problem you may be running into here is that keydown isn't an on or off thing, it's a fire-constantly thing.
The same is true of onresize.
As you resize the window the event gets called over and over.
Also, because JS isn't multithreaded, only one of these events is going to happen at one time.
The other event is going to be queued up to run immediately after the other event finishes.
So what you actually want is a state machine that one event sets, and the other event checks.
Quick examples:
var BrowserWindow = { width : 0, height : 0, prevWidth : 0, prevHeight : 0 };
window.onresize = function (e) {
/* set prevWidth/prevHeight, get new width/height */
};
window.onkeydown = function (e) {
if (BrowserWindow.prevWidth !== BrowserWindow.width) { /*...*/ }
};
That would work (except that it would only work when the screen was actively being stretched... so it wouldn't happen in the case where the key was down and the edge of the window was being held but not dragged (which might lead to flickering if the browser fires keydown events more-frequently than resize).
The more appropriate answer would likely be to go the other way:
var Keyboard = {
currentKeys : {},
previousKeys : {}
};
window.onkeydown = function (e) { Keyboard.currentKeys[e.keyCode] = true; };
window.onkeyup = function (e) { delete Keyboard.currentKeys[e.keyCode]; };
window.onresize = function (e) {
var key = <X>,
state = "";
state = Keyboard.currentKeys[key] && !Keyboard.previousKeys[key]
? "pressed"
: !Keyboard.currentKeys[key] && Keyboard.previousKeys[key]
? "released"
: Keyboard.currentKeys[key] && Keyboard.previousKeys[key]
? "held"
: "off";
Keyboard.previousKeys = Keyboard.currentKeys;
doSomething(state);
};
This is less than perfect from an architecture standpoint, but is more along the idea of what you'd have to do in another environment.