We Keep Coding

Alt keyup lost when doing alt-tab

I'm detecting alt with the following code. It works, but when I do alt-tab to switch to another program, I get a keydown of 18 (alt) and no keyup, and alt remains pressed. How can I solve this?
var altPressed = false;
$(document).keydown(function(evt) {
console.log("keydown", evt.which);
switch (evt.which) {
case 18:
altPressed = true;
break;
}
}).keyup(function(evt) {
console.log("keyup", evt.which);
switch (evt.which) {
case 18:
altPressed = false;
break;
}

Alt + Tab removes the focus on your main window, thus the keyup event will not fire.
Here's a probable solution you could use. I'm not sure if escape is being registered from which though, might have to use keyCode instead.
Example:
var altPressed = false;
$(document).keydown(function(evt) {
console.log("keydown", evt.which);
switch (evt.which) {
case 18:
altPressed = true;
break;
case 9: //tab key
case 27: //escape key
if(altPressed) {
altPressed = false;
}
break;
}
}).keyup(function(evt) {
console.log("keyup", evt.which);
switch (evt.which) {
case 18:
altPressed = false;
break;
});

As #Nathan points out correctly: Alt + Tab removes the focus on the main window, thus the keyup event will not fire.
Here is a solution that does not require jQuery and works for every focus loss:
Using the Blur event
Here is a VanillaJS example using your code, read more about the blur event in MDN docs
let altPressed = false;
function keyDownHandler(evt) {
if(evt.key === "Alt")
altPressed = true
}
function keyUpHandler(evt) {
if(evt.key === "Alt")
altPressed = false
}
document.addEventListener('keydown', keyDownHandler)
document.addEventListener('keyup', keyUpHandler)
window.addEventListener('blur', keyUpHandler)
Note: same as with #Nathans answer, this will not know whether the key is still down when moving back to the page (but with alt+tab it would not anyways).

Two Drop Down options with a button

I am trying to get this work.
I have 2 dropdown lists. Once the user select the required value and click the button. The button will load specific URL based on the selected options in both the dropdowns.
https://jsfiddle.net/vs3q879c/
<script>
$(document).ready(function() {
OR = document.getElementById("orientation");
SZ = document.getElementById("size");
ORSZ = OR + SZ;
switch (ORSZ) {
case PA5:
window.location.href = "www.xxxx.wwww/one.html";
break;
case PA4:
window.location.href = "www.xxxx.wwww/two.html";
break;
case PA3:
window.location.href = "www.xxxx.wwww/three.html";
break;
case LA5:
window.location.href = "www.xxxx.wwww/four.html";
break;
case LA4:
window.location.href = "www.xxxx.wwww/five.html";
break;
case LA3:
window.location.href = "www.xxxx.wwww/six.html";
break;
default:
default none();
}
</script>

You have a few mistakes. Instead of using window.location.href, try using window.open("www.my-url.com").
Also, you have 2 default statements in your switch clause, try something like this:
switch (ORSZ) {
case PA5:
window.location.href = "www.xxxx.wwww/one.html";
break;
case PA4:
window.location.href = "www.xxxx.wwww/two.html";
break;
case PA3:
window.location.href = "www.xxxx.wwww/three.html";
break;
case LA5:
window.location.href = "www.xxxx.wwww/four.html";
break;
case LA4:
window.location.href = "www.xxxx.wwww/five.html";
break;
case LA3:
window.location.href = "www.xxxx.wwww/six.html";
break;
default: none();
}
Lastly, when you're getting the select elements by ID, you're grabbing the object instead of the selected value. To fix that, you need to use .value:
OR = document.getElementById("orientation").value;
SZ = document.getElementById("size").value;
ORSZ = OR + SZ;
DEMO: http://jsbin.com/tivocodeza/edit?html,js,output

Yeah, the above - grab the value of the input, not the element.
You are also using jQuery in your fiddle $(document).ready();
if you are doing that, you can use jQuery for everything. Not sure you want that but in case you do, here is a code suggestion:
$(document).ready(function() {
$('#submit').click(function(e) {
e.preventDefault();
var ORSZ = $('#orientation').val() + $('size').val();
switch (ORSZ) {
case PA5:
window.open("www.xxxx.wwww/one.html", '_blank');
break;
//e
//t
//c
});
});
I added the id="submit" to your button to make it easier to select.

function to move character/camera when button pressed

I'm new here and also new with web coding. So i am trying to make a function to move my game character when a button is pressed. When button is pressed down a boolean value changes to "true" and the character moves. I was trying to do it somehow like this. Can someone light me up what is the best way to make this work? I need also to do this for all the rest buttons (a,s,d,arrows).
var wButton = false;
function newfunction()
document.querySelector('#keyButtonW').addEventListener('mousedown', function(event) {
keyButtonPressed("wButton", true);
});
document.querySelector('#keyButtonW').addEventListener('mouseup', function(event) {
keyButtonPressed("wButton", false);
});
document.querySelector('#keyButtonW').addEventListener('mouseleave', function(event) {
keyButtonPressed("wButton", false);
});

Assuming translate is a method to move your char, maybe you should make a big maskArray :
var keyboard = [];
function keyDown(e)
{
var key = event.keyCode || event.which;
keyboard[key] = true;
}
function keyUp(e)
{
var key = event.keyCode || event.which;
delete keyboard[key];
}
function keyAction() {
for (i in keyboard)
{
if (keyboard[i] == true)
{
switch(eval(i))
{
case 90: //Z
character.translateY(-1);
break;
case 83: //S
character.translateY(1);
break;
case 81: //Q
character.translateX(-1);
break;
case 68: //D
character.translateX(1);
break;
}
}
}
return false;
}
document.addEventListener("keydown", keyDown, false);
document.addEventListener("keyup", keyUp, false);
Simply put keyAction() inside your main loop / rendering loop.
The value of this is to not make lags happen when you hit a button, and help with multiple pressing management =)
EDIT
To get the key numbers, simply put a console.log(key) at the end of keyDown().

Adding buttons to a simple HTML5 game

I cant figure out a good way to add buttons to a simple HTML5 game that I'm trying to adapt for another use.
Instead of using the arrow keys to control the player, I want to have an actual 'up, down, left, right' buttons that have to be clicked (or more accurately, touched on a mobile device).
Here is the input code I'm trying to adapt.
input.js:
(function() {
var pressedKeys = {};
function setKey(event, status) {
var code = event.keyCode;
var key;
switch(code) {
case 32:
key = 'SPACE'; break;
case 37:
key = 'LEFT'; break;
case 38:
key = 'UP'; break;
case 39:
key = 'RIGHT'; break;
case 40:
key = 'DOWN'; break;
default:
// Convert ASCII codes to letters
key = String.fromCharCode(code);
}
pressedKeys[key] = status;
}
document.addEventListener('submit', function(e){
console.log(e);
return false;
})
document.addEventListener('keydown', function(e) {
setKey(e, true);
});
document.addEventListener('keyup', function(e) {
setKey(e, false);
});
window.addEventListener('blur', function() {
pressedKeys = {};
});
window.input = {
isDown: function(key) {
return pressedKeys[key.toUpperCase()];
}
};
})();
And here is the code from app.js that references the 'isDown' function:
function handleInput(dt) {
if(input.isDown('DOWN') || input.isDown('s')) {
player.pos[1] += playerSpeed * dt;
}
if(input.isDown('UP') || input.isDown('w')) {
player.pos[1] -= playerSpeed * dt;
}
if(input.isDown('LEFT') || input.isDown('a')) {
player.pos[0] -= playerSpeed * dt;
}
if(input.isDown('RIGHT') || input.isDown('d')) {
player.pos[0] += playerSpeed * dt;
}
}
I'm totally new to trying to make HTML5 games so any suggestions on how to handle touch / click events would be great. Also, for the buttons themselves, is it better to use divs, forms, or something else?
Thanks
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Edit / Update:
So I inserted this into my app.js:
$("#upButton").click(function(){
console.log("click");
player.pos[1] -= playerSpeed * dt;
})
It actually registers the click event but it generates a really weird and random number of "clicks" (anywhere from a couple doze to thousands). The particular code I'm adapting can be found at this repo: https://github.com/jlongster/canvas-game-bootstrap
This guy's game is pretty neat but it has a lot "advanced" things for a noob to HTML5 games like me.

if it is button that is always visible - create button in html and add click event.
if you need dynamic button on canvas - you can draw button, and on mouse click check if mouse click in button area and button is visible/active, then execute your action.

Disable keydown event defined by javascript in textarea and restore default behavior

I am using reveal.js by Hakim El Hattab to make presentation slides. I have added textarea to a slide. Within the textarea I want to prevent javascript functions from being called when certain keys are pressed, and restore the default behavior of typing. For example, as you can see from the lines of code below from reveal.js, when p is pressed, a function navigatePrev() is called. I want to prevent this function from being called and simply want p to be typed in the textarea when p is pressed. How can I do this using jquery? I tried adding the following script but that does not help.
<script>
$(document).keydown(function (e) {
if ($(e.target).is('textarea')) {
e.stopPropagation();
}
})
</script>
The functions defined in the reveal.js are still called. Using return false in place of e.stopPropagation() does not help either. I am also including the above jQuery lines at the very end on my page (after reveal.js is called).
Thank you.
Relevant lines from reveal.js
function onDocumentKeyDown(event) {
// FFT: Use document.querySelector( ':focus' ) === null
// instead of checking contentEditable?
// Disregard the event if the target is editable or a
// modifier is present
if (event.target.contentEditable != 'inherit' || event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) return;
var triggered = false;
switch (event.keyCode) {
// p, page up
case 80: case 33: navigatePrev(); triggered = true; break;
// n, page down
case 78: case 34: navigateNext(); triggered = true; break;
// h, left
case 72: case 37: navigateLeft(); triggered = true; break;
// l, right
case 76: case 39: navigateRight(); triggered = true; break;
// k, up
case 75: case 38: navigateUp(); triggered = true; break;
// j, down
case 74: case 40: navigateDown(); triggered = true; break;
// home
case 36: navigateTo(0); triggered = true; break;
// end
case 35: navigateTo(Number.MAX_VALUE); triggered = true; break;
// space
case 32: overviewIsActive() ? deactivateOverview() : navigateNext(); triggered = true; break;
// return
case 13: if (overviewIsActive()) { deactivateOverview(); triggered = true; } break;
}
}

The problem with your keydown event binding is that it binds to the document, which receives the event LAST (once it's too late to prevent the event from bubbling further up the DOM tree).
Instead, try binding the event directly to the textarea every time it is created:
// create text area & append to slide container
createTextAreaOnSlideContainer();
// bind an event handler to the element
$('textarea.slideTextArea').keydown( function(e) {
e.stopPropagation();
});
This will stop the event before it bubbles (propagates) up to the document that is listening for a key to be pressed

You can do this:
$(document).keydown(function(e){
if(!$('#textarea').is(':focus')){
yourfunction();
}
});
You just simply add an if statement inside and if the textarea is not focused then you call the function.