Processing JS not responding to keyboard input - javascript

I am trying to make a program using Processing JS that draws a space ship and then allows the user to control it using left and right arrows to turn it and z to make it accelerate. I have been using the keyIsPressed function like so
keyIsPressed = function(){
if(keyCode === 90){
println("OK");
ship.accelerate();
}
};
but the ship does not move and nothing gets printed in by the println(); when I press z so it must not be activating the function. Does anyone know how to fix this? here is a link to the full code https://www.khanacademy.org/computer-programming/spin-off-of-project-asteroids-spaceship/4635808988463104.

Basically, keyIsPressed is a boolean value that is true when the user is pressing any button on the keyboard and false when there is no keys pressed. Basically,
var draw = function(){
if (keyIsPressed && keyCode === 90){
ship.accelerate();
}
}

The keyIsPressed variable is a boolean value that's true whenever a key is pressed.
If you want a function, you should use the keyPressed() function, and you should not specify it inside draw(). It should be at the same level as draw().
Also, you used ship.accerate(), which isn't a function. You probably meant ship.accelerate() instead.
Putting all of that together, it looks like this:
draw= function() {
background(161, 159, 159);
ship.update();
ship.display();
println(ship.position.x);
};
keyPressed = function(){
if(keyCode === 90){
ship.accelerate();
}
};

For functions it is keyPressed, no keyIsPressed.
keyPressed = function(){
if(keyCode === 90){
println("OK");
ship.accelerate();
}
};

Related

How to get user keyboard input asynchronously in C# / asp.Net / Razor

I work on a simple game clone of pacman. The only thing i have a problem with is how to get input from the user via keyboard to change the direction of the pacman (left, right, up, down).
Currently, i am using html buttons to redirect the window to the action which changes the variable in a "core" class. It works but not at all times. Pacman moves via javascript timeout function, where each 250 miliseconds, pacman moves in a direction which is stored in mentioned variable. It has sometimes a problem to capture the button click. (i guess because of the js timeout) Any help appriciated!
Mentioned JS code:
<script type="text/javascript">
setTimeout(function () {
window.location.href = '/Home/Move';
}, 250);
</script>
Try this :
document.onkeydown = function(e) {
if (e.keyCode == '38') {
// up arrow
}
else if (e.keyCode == '40') {
// down arrow
}
else if (e.keyCode == '37') {
// left arrow
}
else if (e.keyCode == '39') {
// right arrow
}
}

Keypress is interfering with canv.onmousedown();

I'm trying to do two different actions when the canvas is clicked and when a key is pressed, but it seems like both can't be done at the same time. Is there a way to do this even if the functions are completely unrelated?
canv.onmousedown = function() {
console.log("Hello World");
};
And for keypress...
if(rightPressed && heroX < canvas.width) {
heroX += heroSpeed;
}
It can be done with single function. Listen for click event on canvas and check if it goes along with, for example shift being pressed.
function(e) {
if(!e.shiftKey) return; //it will do nothing unless shift key was pressed
}
You can do it for any button with e.keyCode property. For example e.keyCode === 32 would check if spacebar was pressed during the event. You can check any keyCode here.

How do I detect the "enter" key and "shift" key at the same time to insert a line break

I'm trying to create a note system. Whatever you type into the form gets put into a div. When the user hits Enter, they submit the note. However I want to make it so when they hit Shift + Enter it creates a line break a the point where they're typing (like skype). Here's my code:
$('#inputpnote').keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode=='13' && event.shiftKey){
$("inputpnote").append("<br>");
}
else if(keycode == '13'){
var $pnote = document.getElementById("inputpnote").value;
if ($pnote.length > 0) {
$("#pnotes-list").append("<div class='pnote-list'><li>" + $pnote + "</li></div>");
$('#inputpnote').val('');
}
}
});
#inputpnote is the form where the user enters their note and #pnotes-list is the place where the notes are being appended to. Thank you in advance!
I think for this you'd have to set two global variables, 1 for shitftKeyPress and 1 for enterKeyPress and then you'd need a keydown and a keyup to set those values and then you check to see if they are both true, because your logic is saying, when a key is pressed, execute this code, if you press a key and then press another key, the only that will happen is the function will be called twice.
EDIT:
Example code of what it should look like:
var hasPressedShift = false;
var hasPressedEnter = false;
$('#inputpnote').keydown(function(event){
if(shiftkey) {
hasPressedShift = true;
}
if(enterKey) {
hasPressedEnter = true;
}
});
$('#inputpnote').keyup(function(event){
if(shiftkey) {
hasPressedShift = false;
}
if(enterKey) {
hasPressedEnter = false;
}
});
$('#inputpnote').keypress(function(event){
if(hasPressedShift && hasPressedEnter) {
// Do something
}
});
This was a quick mock up, but it's similar to how it should look

How can you define something to happen and remain in that state?

I have a game in jquery in which if you press right key on the keyboard it loads a certain image and if you press left key on the keyboard it loads another image . My problem is that all of this is happening in an interval that keeps repeating . As soon as the program finds that my right key is no longer pressed it will automatically draw the second Image. I want it to do the following :
- if I press right arrow, it will draw the Image1 and remain in that state until I press the left key
-if I press left arrow, I want my Image2 to be drawn and remain in that state until I press the right key
If I do this in a while loop my web page will crash because it will stay in that while loop and what follows won t be executed .
This is working, but as soon as I release the right key, rightDown will be false and when the program finds the if statement again it will draw my Image2 . (the interval is really fast)
if(rightDown)drawImage1();
else drawImage2();
If I use this
if(rightDown)drawImage1();
else if(leftDown) drawImage2();
and I don t press the left or right key no image will be drawn.
rightDown and leftDown
function onKeyDown(evt) {
if (evt.keyCode == 39) rightDown = true;
else if (evt.keyCode == 37) leftDown = true;
else if (evt.keyCode == 38) upKeyDown = true;
else if(evt.keyCode == 40) downKeyDown = true;
}
and the part when they are not clicked
function onKeyUp(evt) {
if (evt.keyCode == 39) rightDown = false;
else if (evt.keyCode == 37) leftDown = false;
else if (evt.keyCode == 38) upKeyDown = false;
else if (evt.keyCode == 40) downKeyDown = false;
}
$(document).keydown(onKeyDown);
$(document).keyup(onKeyUp);
Let's say you have a function to draw your default image, named drawDefault(); using this code:
window.onload = drawDefault;
Such that, upon the window's loading, it will draw the default picture (can also be used as window.onload = drawImage[1,2](); (where [...] denotes choice).
If you have already defined a .onload method for window, then you can simply extend your .onload function:
window.onload = function(){
// ... code ...
drawDefault();
}
Or, with a more interesting way:
if(!window.onload){
window.onload = drawDefault;
} else {
var on = window.onload;
window.onload = function(){
on();
drawDefault();
}
}
Combined with this, use your code:
if(rightDown)drawImage1();
else if(leftDown) drawImage2();
(Personally, I'd used {...} to enclose if, else if, and else statements, as it's easier to read (and how hard is it to press two extra keys or such?).
The outcome will be, if I have interpreted both your question and your code (what there was of it, anyhow) correctly, what will happen is that:
The default image will be displayed
On rightDown, the right image will be displayed, and,
On leftDown, the left image will be displayed.
Hope it helps!!

How to open popover with keyboard shortcut? [duplicate]

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Keyboard shortcuts with jQuery
I want to display a popover window using a shortcut key instead of clicking the icon on the toolbar.
Do you have any good idea?
Thank you for your help.
Abody97's answer tells you how to determine if a certain key combo has been pressed. If you're not sure how to get that key combo to show the popover, this is what you need. Unfortunately, Safari makes this needlessly complicated.
In the global script, you'll need a function like the following to show a popover, given its ID and the ID of the toolbar item that should show it:
function showPopover(toolbarItemId, popoverId) {
var toolbarItem = safari.extension.toolbarItems.filter(function (button) {
return button.identifier == toolbarItemId && button.browserWindow == safari.application.activeBrowserWindow;
})[0];
var popover = safari.extension.popovers.filter(function (popover) {
return popover.identifier == popoverId;
})[0];
toolbarItem.popover = popover;
toolbarItem.showPopover();
}
You'll also need code to call this function in your global script's message listener, like the following (this sample does not assume you already have a message listener in place):
safari.application.addEventListener('message', function (e) {
if (e.name == 'Show Popover') {
showPopover(e.message.toolbarItemId, e.message.popoverId);
}
}, false);
Finally, in your injected script, the function that listens for the key combo needs to call dispatchMessage, as below:
safari.self.tab.dispatchMessage('Show Popover', {
toolbarItemId : 'my_pretty_toolbar_item',
popoverId : 'my_pretty_popover'
});
(Stick that in place of showPopUp() in Abody97's code sample.)
Note: If you only have one toolbar item and one popover (and never plan to add more), then it becomes much simpler. Assuming you've already assigned the popover to the toolbar item in Extension Builder, you can just use
safari.extension.toolbarItems[0].showPopover();
in place of the call to showPopover in the global message listener, and omit the message value in the call to dispatchMessage in the injected script.
Assuming your shortcut is Ctrl + H for instance, this should do:
var ctrlDown = false;
$(document).keydown(function(e) {
if(e.keyCode == 17) ctrlDown = true;
}).keyup(function(e) {
if(e.keyCode == 17) ctrlDown = false;
});
$(document).keydown(function(e) {
if(ctrlDown && e.keyCode == 72) showPopUp(); //72 is for h
});
Here's a reference for JavaScript keyCodes: little link.
Here's a little demo: little link. (It uses Ctrl + M to avoid browser-hotkey conflicts).
I believe this could help you: http://api.jquery.com/keypress/
In the following example, you check if "return/enter" is pressed (which has the number 13).
$("#whatever").keypress(function(event) {
if( event.which == 13 ) {
alert("Return key was pressed!");
}
});

Categories