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!!
Related
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
}
}
im creating a browser game and i have added keybinds so the player can use keys to move around the world.
If people use the buttons to move, these buttons are getting hidden for 5 seconds to allow an animation to end. Now i want to do this for the keybinds too.
For example: Player presses spacebar and a interval will run that lasts 5 seconds. Pressing space again will glitch out really bad running the same interval twice. So how do i disable a function for 5 seconds after it has been called so that it won't glitch out?
This is the code i use for the keys:
<script>
document.body.onkeyup = function(e){
if(e.keyCode == 32){
var cmd = "<?php echo $row['HEADING']; ?>";
if(cmd == "N") myMoveUp();
if(cmd == "E") myMoveRight();
if(cmd == "S") myMoveDown();
if(cmd == "W") myMoveLeft();
}
if(e.keyCode == 37){
ChangeHeadingKP("W");
}
if(e.keyCode == 38){
ChangeHeadingKP("N");
}
if(e.keyCode == 39){
ChangeHeadingKP("E");
}
if(e.keyCode == 40){
ChangeHeadingKP("S");
}
}
</script>
Any help would be appreciated.
I wouldn't rely on timing (say, 5 seconds) because when you change them, you'll have to review your code.
Instead I'd rely on toggling a flag by calling specific methods, like this:
keymanager.suspend();
// play animation, cutscene or whatever
keymanager.resume();
Those two functions are easy to define, along with the keymanager, as follows:
var keymanager = {
"active": true,
"suspend": () => {
keymanager.active = false;
},
"resume": () => {
keymanager.active = true;
}
};
All that remains is the key event handler bailing out when keys are deactivated:
document.body.onkeyup = function (e) {
if (!keymanager.active)
{
return; // do not process any keys
}
// rest of your code...
}
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();
}
};
I've built a custom image viewer that works fine, but each time I use the arrows to view the next or previous image, it loads slower and slower. By the 10th image, it could take many minutes, or even freeze. The snippet I use to open the viewer is the same as the one I use to move to the next image, and each open is always lightning fast; only when I use the arrow keys does it get slower. Sometimes the .php file won't load at all and it'll just say "undefined", which is coming from the JS somewhere, I believe?
function image_load(id) {
$('.view').empty().load(image-viewer.php?id='+id, function() {
$(document).keyup(function(e) {
if (e.keyCode == 39) {
var next = $('#next').attr('alt');
if(next != "null") {
image_load(next);
return false;
}
}
if (e.keyCode == 37) {
var prev = $('#prev').attr('alt');
if(prev != "null") {
image_load(prev);
return false;
}
}
});
});
}
So the next/previous reference the function within which their contained. Is it creating an endless loop somehow and slowing down the processor?
As per my comment, you are creating an endless loop because you are repeatedly binding the key events over and over again. What you should do is separate the function declaration away from event handlers:
var image_load = function(id) {
$('.view').empty().load('image-viewer.php?id='+id);
};
$(document).keyup(function(e) {
// Prevent default key actions
e.preventDefault();
// Evaluate pressed keys
if (e.keyCode == 39) {
var next = $('#next').attr('alt');
if (next) image_load(next);
} else if (e.keyCode == 37) {
var prev = $('#prev').attr('alt');
if (prev) image_load(prev);
}
});
Please Help! I have spent a week to complete this game and this is the final huddle i have been stuck with for a couple of days now. I know some techy out there would probably take a glance and flick something in place. But I'm not very sophisticated with javascript and therefore need some help.
$(document).keydown(function(e){
// left arrow
if (e.keyCode == 37 && currentCell > 0) {
currentCell--;
ChangeCurrentCell();
return false;
}
// up arrow
if (e.keyCode == 38 && currentRow > 0) {
currentRow--;
ChangeCurrentCell();
return false;
}
// right arrow
if (e.keyCode == 39 && currentCell < MAX_CELL) {
currentCell++;
ChangeCurrentCell();
return false;
}
//down arrow
if (e.keyCode == 40 && currentRow < MAX_ROW) {
currentRow++;
ChangeCurrentCell();
return false;
}
// enter key
if (e.keyCode == 13) {
}
});
function ChangeCurrentCell()
{
document.getElementById(Boxes[currentRow + currentCell]).focus();
SimulateMouseOver(document.getElementById(Boxes[currentRow + currentCell]));
}
// function will trigger event of selecting current focus.
function selectElement()
{
}
$(document).ready(function(){
loadDivs()
// will give initial focus to top left element paving way for key navigation
ChangeCurrentCell();
// above gives first element in Boxes the focus when loading.
The div element will not focus despite getting it and calling the focus method, i have tried to trigger mousehover on the element with no luck. Please assist me, i put my masters thesis aside despite already being on a tight schedule to do this game which is a requirement for a job position. I have done whole the whole game logic and it all works well, if i send the code in as it is it will definitely be discarded because it doesnt meet the key navigation requirement ... i am desperate i will even pay if i need to -frustrated Student
Look at this
It's my solution for a test, maybe the same...maybe can help you :) If it is, please use it as a hint and don't copy all my code :D
Regards,
L.
You can bind to the document.keydown event to capture key strokes. Then you can use event.which (normalized by jQuery) to determine which key was pressed.
$(document).on("keydown", function (event) {
if (event.which === 37) {
//code for left arrow
} else if (event.which === 38) {
//code for up arrow
} else if (event.which === 39) {
//code for right arrow
} else if (event.which === 40) {
//code for down arrow
}
});
UPDATE
I just noticed you didn't tag your question with jQuery. To use native JS you'll have to change how you bind to the document.keydown event and how you determine the key that was pressed (different browser implementations store the info under different indexes of the event object).
to make it more convenient () not necessary:
`var LEFT = 37, UP = 38, RIGHT = 39, DOWN = 40, SPACE = 32;`
then bind to keydown, keypress doesn't catch arrow keys
and do something like this:
$(document).bind("keydown", function (e){
var which = e.which;
var navigationKeyWasPressed = which !== undefined && which >= 39 && which <= 40;
//do nothing if no significant key was pressed
if (!navigationKeyWasPressed ) {
return;
}
if ($(".selectedWithKey").length === 1){
switch (which) {
case LEFT:
//...
break;
case UP:
//...
break;
case RIGHT:
//...
break;
case DOWN:
//...
break;
case SPACE:
//turn card
break;
default: //non arrow pressed
//...
}
} else {
// if no card is selected, select one to start arrow navigation
$(".sponsor:first").addClass("selectedWithKey")
}
});