How can I use the keyboard to make a character move in p5? I mean, more then left and right... I would also like to use the WASD keys. I've used this (shape as a placeholder):
https://editor.p5js.org/TheDiamondfinderYT/present/8ZqV2LsVB
function keyPressed() {
if (keyCode === LEFT_ARROW||keyCode === 65) {
left()
} else if (keyCode === RIGHT_ARROW||keyCode === 68) {
right();
if (keyCode === UP_ARROW) {
up()
} else if (keyCode === DOWN_ARROW) {
down()
}
}
Could anyone point me in the right direction?
You just made a few mistakes. For example, in this code:
else if (keyCode === RIGHT_ARROW||keyCode === 68) {
right();
if (keyCode === UP_ARROW) {
up()
} else if (keyCode === DOWN_ARROW) {
down()
}
}
the if statements for UP_ARROW and DOWN_ARROW are inside the if statements for RIGHT_ARROW, when they shouldn't be. Here is a version I cleaned up for you, you can just copy the code and moving should work fine.
Related
I'm trying to prevent players from pressing both left and right keys at the same time, since doing so will change both "isLeft" and "isRight" to true. I've tried the code below but it makes the controls really stiff, for example, if you were to let go of "D" too late before pushing "A", it will register "D" being released but would not register "A" being pressed (since A is pressed when "isRight" is true. Sorry if this analogy is too confusing...
I'm looking for a way to take input from pressing "A", and if "D" is still pressed after "A" is released, immediately take input from "D".
Thanks in advance!
function keyPressed()
{
if ((key == 'A' || keyCode == 37) && !isRight)
{
isLeft = true;
}
else if ((key == 'D' || keyCode == 39) && !isLeft)
{
isRight = true;
}
}
A solution to interpret left vs right when both keys are pressed is to listen for keyPressed and keyReleased. On keyReleased we can also check and see if the alternate key is already down. This approach allows the code to immeditally switch to the other key when both are down and one is released
var isLeft = false;
var isRight = false;
function setup(){
frameRate(10);
}
function keyPressed(){
if ((key == 'A' || keyCode == 37) && !isRight){
isLeft = true;
} else if ((key == 'D' || keyCode == 39) && !isLeft) {
isRight = true;
}
}
function keyReleased(){
if ((key == 'A' || keyCode == 37)){
isLeft = false;
if ((keyIsDown(16) && keyIsDown(68)) || keyIsDown(39)){
isRight = true;
}
}
else if ((key == 'D' || keyCode == 39)){
isRight = false;
if ((keyIsDown(16) && keyIsDown(65))|| keyIsDown(37)){
isLeft = true;
}
}
}
function draw(){
console.log( " isLeft: "+isLeft + " isRight: " + isRight);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
The keyIsDown detects if a key is being pressed. I'm not sure if it works for all characters, but it works for the arrow keys. If you add !keyIsDown(RIGHT_ARROW), then it sees if the Right arrow is down. If it's down, then the if isn't true, if it's false the if is true it's being run.
Tell me if this doesn't work.
function keyPressed()
{
if ((key == 'A' || keyCode == 37) && !isRight&&!keyIsDown(RIGHT_ARROW))
{
isLeft = true;
}
else if ((key == 'D' || keyCode == 39) && !isLeft!keyIsDown(LEFT_ARROW))
{
isRight = true;
}
}
I have an SVG
<svg id='mainSvg' viewBox='0 0 1920 1080'>
<rect id='rectangle' x='800' y='800'/>
</svg>
and I am moving the rectangle inside the SVG with javascript with left and right arrow keys and A and D keys.
that is working perfectly but I have a problem that the rectangle can go outside of the view-box of the SVG and I want the rectangle to stop when it touches the left or right corner. this is my code.
function keyDown(event) {
if (event.key === 'ArrowLeft' || event.key === 'a') {
leftKey = true;
aKey = true;
} else if (event.key === 'ArrowRight' || event.key === 'd') {
rightKey = true;
dKey = true;
}
}
function keyUp(event) {
if (event.key === 'ArrowLeft' || event.key === 'a') {
leftKey = false;
aKey = false;
} else if (event.key === 'ArrowRight' || event.key === 'd') {
rightKey = false;
dKey = false;
}
}
function move() {
let xPosition = parseInt(rectangle.getAttribute('x'));
const movmentSpeed = 10;
//if right arrow key,d is pressed
if (rightKey) {
rectangle.setAttribute('x', xPosition + movmentSpeed);
//if right arrow key,a is pressed
} else if (leftKey) {
rectangle.setAttribute('x', xPosition - movmentSpeed)
if(xPosition === 0){
leftKey = false;
}
}
setTimeout(move, 10);
}
on the last function move() I tried saying if(Xposition ===0){leftKey = false} that works briefly but if the user keeps pressing the left arrow then the rectangle will start moving again and go out of the viewBox.
Also, the arrow keys have a value of false by default
Any ideas on how to fix this?
I have coded this game inspired by The Coding Train's Snake Game and I can't figure a problem out. If the player presses both the right button and the down button, for example, they would just turn to the opposite direction, which would just kill them. I wonder how I would set a cooldown on the keys opposite of eachother. I'm using the p5js library.
I appreciate any help!
this.dir = function(x, y) {
this.xspeed = x;
this.yspeed = y;
}
if (keyCode === UP_ARROW && s.yspeed != 1) {
s.dir(0, -1);
} else if (keyCode === DOWN_ARROW && s.yspeed != -1) {
s.dir(0, 1);
} else if (keyCode === RIGHT_ARROW && s.xspeed != -1) {
s.dir(1, 0);
} else if (keyCode === LEFT_ARROW && s.xspeed != 1) {
s.dir(-1, 0);
}
I need to detect arrow key input in javascript. Currently I am doing this:
document.onkeydown = function(event) {
if (event.which == 37) {
...
} else if (event.which == 39) {
...
} else if (event.which == 38) {
...
} else if (event.which == 40) {
...
}
};
document.onkeyup = function(event) {
if (event.which == 37) {
...
} else if (event.which == 39) {
...
} else if (event.which == 38) {
...
} else if (event.which == 40) {
...
}
};
This works fine, but when i press command + right and release the arrow key first, I get the down event for the arrow key, but only get an up event when releasing the command key. Also the keycode is 91 regardless of which arrow key I was pressing. How do I handle this situation?
I am on a mac with google chrome.
I have two areas on the same page I wish to have arrow keys doing something (two different things).
The problem is, if I have the following code, only once is executed.
$(document).keydown(function (evt) {
if (evt.keyCode == 37) {
evt.preventDefault();
// CODE
} else if (evt.keyCode == 39) {
evt.preventDefault();
// CODE
}
});
$(document).keydown(function (evt) {
if (evt.keyCode == 37) {
evt.preventDefault();
// CODE
} else if (evt.keyCode == 39) {
evt.preventDefault();
// CODE
}
});
How can I have it so two are executed? I can't see how I could use classes, as its the arrow keys, not a click function.
jQuery has a :visible meta selector: http://jsfiddle.net/8rgnzmk5/1/
$(document).keydown(function (evt) {
if (evt.keyCode == 37 || evt.keyCode == 39) {
evt.preventDefault();
if (evt.keyCode == 37) {
if ($target.is(':visible')) {
// left, visible
} else {
// left, invisible
}
} else if (evt.keyCode == 39) {
if ($target.is(':visible')) {
// right, visible
} else {
// right, invisible
}
}
}
});