We Keep Coding

Restart game by spacebar instead of pointerdown

I'd like to restart my game with the spacebar instead of of using my mouse. I was trying some things out, but it didn't work like:
this.restart.input.keyboard.on('keyup_SPACE', () => {
this.dino.setVelocityY(0);
this.dino.body.height = 92;
this.dino.body.offset.y = 0;
this.physics.resume();
this.obsticles.clear(true, true);
this.isGameRunning = true;
this.gameOverScreen.setAlpha(0);
this.anims.resumeAll();
})
This is what I have:
this.restart.on('pointerdown', () => {
this.dino.setVelocityY(0);
this.dino.body.height = 92;
this.dino.body.offset.y = 0;
this.physics.resume();
this.obsticles.clear(true, true);
this.isGameRunning = true;
this.gameOverScreen.setAlpha(0);
this.anims.resumeAll();
})
this.restart = this.add.image(0, 80, 'restart').setInteractive();
this.gameOverScreen.add([
this.gameOverText, this.restart
])

You can catch keyup event like this (checking the keyCode corresponding to the spacebar):
document.body.addEventListener("keyup", (e) => {
if(e.keyCode === 32) console.log("Spacebar pressed");
});
You could restart the game when the spacebar is pressed, could look something like this.
document.body.addEventListener("keyup", (e) => {
if(e.keyCode === 32) {
this.restart();
}
});

Javascript Play/Pause button Keyboard event

I'm still working on a music player, mouse controls have been assigned, but I'm having little trouble with keyboard events on the PLAY/PAUSE button.
So far, I got the user to be able to "click" the PLAY button by pressing SPACEBAR. What happens is that the PLAY button is being hidden and replaced by the PAUSE button.
Which I want now is getting the user to be able to press the SPACEBAR again so it "clicks" PAUSE, and therefore shows PLAY again.
Here is what I have :
html
<div>
</div>
script
<script>
/* mouse */
$('#play').on('click', function(event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$('#pause').show();
$('#play').hide();
$('#pause').on('click', function(event) {
//currentPlayingTrack.pause();
$('#pause').hide();
$('#play').show();
});
/* keyboard */
var play = document.getElementById("play");
var pause = document.getElementById("pause");
document.onkeydown = function (e) {
if (e.keyCode == 32) {
play.click();
}
else if(e.keyCode == 32) {
pause.click();
}
};
</script>
What am I missing ?

the mistake is here:
document.onkeydown = function (e) {
if (e.keyCode == 32) {
play.click();
} else if(e.keyCode == 32) {
pause.click();
}
};
the second condition cannot be executed because everytime the keyCode is 32 it's goes only in the first conditions.
You can declare a variable "isPlaying" that indicate you if the player is playing.
var isPlaying = false;
document.onkeydown = function (e) {
if (e.keyCode == 32) {
if (isPlaying) {
pause.click();
} else {
play.click();
}
isPlaying = !isPlaying; // if true equal false, if false equal true
}
};

the first mistake is that you arent closing all brackets,the second is this part of code:
if (e.keyCode == 32) {
play.click();
}
else if(e.keyCode == 32) {
pause.click();
}
i suggest to use a variable for check if the button play is being pressed or not:
var ispaused = true;
var play = document.getElementById("play");
var pause = document.getElementById("pause");
$('#play').on('click', function(event) {
ispaused = false;
console.log('play click clicked');
//currentPlayingTrack.play();
$('#pause').show();
$('#play').hide();
/* keyboard */
});
$('#pause').on('click', function(event) {
ispaused = true;
//currentPlayingTrack.pause();
$('#pause').hide();
$('#play').show();
});
document.onkeydown = function (e) {
if (e.keyCode == 32) {
if(ispaused == true ){
play.click();
}else{
pause.click();
}
}
};
fiddle

It works. you double check space keyCode when you space anytime and the first condition would be true every single time.
Second, you need to use $bla instead for $("#blablabla") .It runs almost 600 line Code with find object you select everytime.So don't be let duplicate work.
Final,$() is lik $(doucument).ready().It's all done when rendered it's done and DOM it's OK.THAT IS!
** code **
$(function () {
let $play = $("#play");
let $pause = $("#pause");
$play.on('click', function (event) {
console.log('play click clicked');
//currentPlayingTrack.play();
$pause.show();
$play.hide();
});
$pause.on('click', function (event) {
//currentPlayingTrack.pause();
$pause.hide();
$play.show();
});
/* keyboard */
document.onkeydown = function (e) {
if (e.keyCode == 32) {
toggle = !toggle;
$play.trigger("click");
}
else if (e.keyCode == 32) {
toggle = !toggle;
$pause.trigger("click");
}
};
});

Seems like you're missing a bit more knowledge of js which will come with time :) Here's a codepen on how I'd accomplish this.
http://codepen.io/smplejohn/pen/zNVbRb
Play
Pause
$('.playpause').click(function(){
$('.playpause').toggle();
return false;
});
document.onkeydown = function (e) {
if (e.keyCode == 32){
$('.playpause').toggle();
}
};

Key pressed and click in the same time

how can I merge keypress and on click? I mean when a user press enter and click somewhere in the same time I need to invoke a function.
$(document).keypress(function(e) {
var code = e.keyCode || e.which;
if(code == 13) {
alert('keypress');
}
});
$(document).on( "click", function() {
alert('click');
});
I have this code but I am not able to merge it (usually I don't work with jQuery/javascript).

Something like this may do the trick
var pressingEnter = false;
$(document).on({
keydown: function(e) {
if(e.which == 13) {
// enter is being pressed, set true to flag variable
pressingEnter = true;
}
},
keyup: function(e) {
if(e.which == 13) {
// enter is no longer pressed, set false to flag variable
pressingEnter = false;
}
},
click: function() {
if (pressingEnter) {
console.log('click and enter pressed');
}
}
});
BTW: there is no need to do var code = e.keyCode || e.which; since jQuery resolves that for you. You can use e.which on any browser.
EDIT
This version should allow any order of key pressed / mouse click. I'm assuming only left click is captured. Logic to handle enter + mouse click is placed on keydown and mousedown (it could be moved to keyup and mouseup if makes more sense)
Changed alert by console.log since the first prevents mouseup event to be triggered. Nowdays we have hundred of better ways to show a message to user than built-in alert pop ups so I'll assume making it work for it is not a requirement.
var pressingEnter = false;
var clickingMouseButton = false;
$(document).on({
keydown: function(e) {
if(e.which == 13) {
pressingEnter = true;
}
if (clickAndEnterPressing()) {
console.log('click and enter pressed');
}
},
keyup: function(e) {
if(e.which == 13) {
pressingEnter = false;
}
},
mousedown: function(e) {
if (e.which == 1) {
clickingMouseButton = true;
}
if (clickAndEnterPressing()) {
console.log('click and enter pressed');
}
},
mouseup: function(e) {
if (e.which == 1) {
clickingMouseButton = false;
}
}
});
function clickAndEnterPressing() {
return pressingEnter && clickingMouseButton;
}

Here's an example that will work if enter is pushed first or if the mouse is clicked first or if they are both pressed within a certain threshold of time apart (I set it to 100 ms, but this can be easily adjusted):
var enterDown = false;
var mouseDown = false;
var lastEnter = false;
var lastMouseUp = false;
var triggerOnNextUp = false;
$(document).on({
keydown: function(e) {
enterDown = true;
},
keyup: function(e) {
if(e.which == 13) {
lastEnter = (new Date()).getTime();
enterDown = false;
detectEnterAndClick();
if (mouseDown) {
triggerOnNextUp = true;
}
}
},
mousedown: function() {
mouseDown = true;
},
mouseup: function() {
lastMouseUp = (new Date()).getTime();
mouseDown = false;
detectEnterAndClick();
if (enterDown) {
triggerOnNextUp = true;
}
}
});
function detectEnterAndClick() {
if (Math.abs(lastEnter - lastMouseUp) < 100 || triggerOnNextUp) {
// Reset variables to prevent from firing twice
triggerOnNextUp = false;
enterDown = false;
mouseDown = false;
lastEnter = false;
lastMouseUp = false;
$("body").append("Clicked and pushed enter<br>");
}
}
See it on JSFiddle

There is no way to 'merge' events. However you could for example debounce your handler. For example (using lodash):
var handler = _.debounce(function(event) { alert(event.type); }, 100);
$(document)
.on('click', handler)
.on('keypress', handler);

you can use the event.type to determine what triggered the event
Demo
$(function(){
$(document).on("click", ClickAndKeyPress);
$(document).on("keypress", ClickAndKeyPress);
});
function ClickAndKeyPress(event){
$("div").text(event.type);
}

wait till function execute completely to execute the other

I have this jquery code to handle some cases if user clicked right or left button but the navigate became a mess when the user click both buttons together
$(document).ready(function(){
$(document).keydown(function(e){
if (e.keyCode == 37) {
setTimeout(LeftKeyPressed(),5000);
}
else if(e.keyCode == 39){
setTimeout(RightKeyPressed(),5000);
}
});
});
I want to simply block any call till the first or second function completely executed

Use a flag to block the unnecessary function calls like this,
$(document).ready(function(){
var xKeyPressed = false;
$(document).keydown(function(e){
if (e.keyCode == 37 && !xKeyPressed) {
setTimeout(LeftKeyPressed(),5000);
}
else if(e.keyCode == 39 !xKeyPressed){
setTimeout(RightKeyPressed(),5000);
}
});
function LeftKeyPressed()
{
xKeyPressed = true;
//Your code
xKeyPressed = false;
}
function RightKeyPressed(){
xKeyPressed = true;
//Your code
xKeyPressed = false;
}
});

Set a simple check if your code is running LeftKeyPressed or RightKeyPressed like this:
var inFunction = false;
$(document).ready(function(){
$(document).keydown(function(e){
if (e.keyCode == 37 && !inFunction) {
inFunction = true;
setTimeout(LeftKeyPressed(),5000);
}
else if(e.keyCode == 39 && !inFunction){
inFunction = true;
setTimeout(RightKeyPressed(),5000);
}
});
});
//Add this in your functions, both Left and Right variants,
function LeftKeyPressed(){
//Do your normal stuff here
inFunction = false;
}
There is other ways of doing this as well, but this is in my opinion a clear and concise way of doing it. You can potentially get race conditions with this approach.

$(document).ready(function(){
var navt;
$(document).keydown(function(e){
if(navt != null) return;
if (e.keyCode == 37) {
navt = setTimeout(function(){ LeftKeyPressed(); navt = null; },5000);
}
else if(e.keyCode == 39){
navt = setTimeout(function(){ RightKeyPressed(); navt = null; },5000);
}
});
});

SyntaxError on "function x.y () {...}"?

How can I fix the following javascript error ? This is a handler for an ASP.NET page to disable postbacks when the enter key is pressed:
<script type="text/javascript">
function document.onkeydown() {
if (event.keyCode == 13) {
event.returnValue = false;
event.cancel = true;
}
}
</script>

Note that document.onkeydown is not a valid function name. You probably wanted to do this:
document.onkeydown = function(ev) {
if (ev.keyCode == 13) {
// ...
}
Or better:
document.addEventListener('keydown', function(ev) {
if (ev.keyCode == 13) {
// ...
});

To add to maerics answer, to get access to the event, you need it as an argument...
document.addEventListener( 'keydown', function( event ) {
console.log( event, event.keyCode );
if (event.keyCode == 13) {
event.returnValue = false;
event.cancel = true;
}
});