keyCode can either be numbers or default values
KeyCode can be a default value - BACKSPACE, DELETE, ENTER, RETURN, TAB, ESCAPE, SHIFT, CONTROL, OPTION, ALT, UP_ARROW, DOWN_ARROW, LEFT_ARROW, RIGHT_ARROW
or
https://keycode.info/ to find the keycode number you need.
function keyPressed() {
if (keyCode === UP_ARROW) {
print('up_pressed');
} else if (keyCode === DOWN_ARROW) {
print('down_pressed');
}
return false; // prevent default
}
function keyReleased() {
if (value === 0) {
value = 255;
} else {
value = 0;
}
In a game with keyboard controls we may only wish to move the sprite when the key is down. The functions above are static and do not stop running once detected. Below is an example of using keycode and keyIsDown() which will stop running when the key is released.
var x =30;
var y = 100;
speed = 10; //this will be how many pixels to move each frame when moving
draw(){
if (keyIsDown(RIGHT_ARROW)) {
x += speed;
}
if (keyIsDown(LEFT_ARROW)) {
x -= speed;
}
if (keyIsDown(UP_ARROW)) {
y -= speed;
}
if (keyIsDown(DOWN_ARROW)) {
y += speed;
}
//draw Rectangle in updated position
fill(100);
rect(x,y,30,30);
}
function mouseClicked() {
if (value === 0) {
value = 255;
} else {
value = 0;
}
}
function mouseReleased() {
if (value === 0) {
value = 255;
} else {
value = 0;
}
}
let input;
Inside the setup function:
input = createInput();
input.position(xpos,ypos);
let button
Inside the setup function:
button = createButton('submit');
but.position(xpos,ypos);
let output;
output = createElement('h1','what is your name');
output.position(xpos,ypos);
//declare global varaibles
let input, button, greeting;
function setup() {
// create canvas
createCanvas(710, 400);
fill(25,255,255)
//create input box - reference global variable input
input = createInput();
input.position(20, 65);
//create submit button - reference global variable button
button = createButton('submit');
button.position(input.x + input.width, 65);
button.mousePressed(greet); //run function called greet() on click
//create output box - reference global variable greeting
greeting = createElement('h2', 'what is your name?');
greeting.position(20, 5);
textAlign(CENTER);
textSize(50);
}
//retrieve text from input box and print in greeting box - clear input box
function greet() {
const name = input.value(); //get value from input box
greeting.html('hello ' + name + '!');
input.value('');
}