There are two main ways to get keyboard/ mouse user input into a codeguppy.com program: via events or via the loop() function by reading built-in system variables and functions.
Events
- keyPressed event
- keyReleased event
- keyTyped event
- mouseClicked event
- mousePressed event
- mouseReleased event
- mouseMoved event
- mouseDragged event
- doubleClicked event
- mouseWheel event
System variables
Functions
Events
codeguppy.com engine can notify your program when a keyboard or mouse event occurs. All you have to do is to define the appropriate function (e.g. event handler) in your program and the system will call it automatically when that event appears.
keyPressed event
Executes once when a key is pressed
function keyPressed()
{
clear();
text(key, 400, 300);
text(keyCode, 400, 320);
}
keyReleased event
Executes when a key is released
function keyReleased()
{
clear();
text(key, 400, 300);
text(keyCode, 400, 320);
}
keyTyped event
Executes when a key is typed execept for special keys
function keyTyped()
{
clear();
text(key, 400, 300);
text(keyCode, 400, 320);
}
mouseClicked event
Executes once when the mouse is pressed and released
function mouseClicked()
{
circle(mouseX, mouseY, 10);
}
mousePressed event
Executes once when the mouse button is pressed
function mousePressed()
{
stroke("red");
circle(mouseX, mouseY, 10);
}
mouseReleased event
Executes when the mouse button is released
function mouseReleased()
{
stroke("blue");
circle(mouseX, mouseY, 10);
}
mouseMoved event
Executes when the mouse is moved and button is not pressed
function mouseMoved()
{
line(mouseX, mouseY, pmouseX, pmouseY);
}
mouseDragged event
Executes when the mouse is moved an a button is pressed
function mouseDragged()
{
line(mouseX, mouseY, pmouseX, pmouseY);
}
doubleClicked event
Executes when the mouse is double clicked
function doubleClicked()
{
circle(mouseX, mouseY, 10);
}
mouseWheel event
Executes when the user uses the mouse wheel or touchpad
function mouseWheel()
{
}
System variables
Besides events, the system also populates automatically some system variables with appropriate event data.
You can access these variables from within the event handlers or from within the main animation / game loop().
This is usually the prefered way of getting user input when building games.
keyIsPressed
Boolean system variable that indicates if a key is pressed.
noStroke();
text("Press any key to change color", 10, 10);
function loop()
{
let color = keyIsPressed ? "Red" : "Green";
clear();
fill(color);
circle(400, 300, 100);
}
key
System variable containing the last typed key.
function keyPressed()
{
if (key.toLowerCase() === "s")
{
showScene("Game");
}
}
keyCode
System variable containing the code of the last key pressed.
The following constasts can be used instead of a numeric key code: LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW. Use them without quotes.
function keyPressed()
{
let ENTER_KEYCODE = 13;
if (keyCode === ENTER_KEYCODE)
{
showScene("Game");
}
}
Note: To find the keyCodes you can write a test program or use a site such as keycode.info.
mouseX
System variable containing the horizontal coordinate of the mouse coursor.
function loop()
{
if (mouseIsPressed)
line(mouseX, mouseY, pmouseX, pmouseY);
}
mouseY
System variable containing the vertical coordinate of the mouse coursor
function loop()
{
if (mouseIsPressed)
line(mouseX, mouseY, pmouseX, pmouseY);
}
pmouseX
System variable containing the previous horizontal coordinate of the mouse coursor
function loop()
{
if (mouseIsPressed)
line(mouseX, mouseY, pmouseX, pmouseY);
}
pmouseY
System variable containing the previous vertical coordinate of the mouse coursor.
function loop()
{
if (mouseIsPressed)
line(mouseX, mouseY, pmouseX, pmouseY);
}
mouseIsPressed
Boolean system variable indicating if any mouse button is pressed.
To detect which button is pressed check mouseButton variable.
function loop()
{
if (mouseIsPressed)
line(mouseX, mouseY, pmouseX, pmouseY);
}
mouseButton
System variable containing the pressed mouse button. It has one of these values LEFT, RIGHT, CENTER.
To detect if mouse is pressed check mouseIsPressed.
function loop()
{
let drawColor = mouseButton === LEFT ? "Red" : "Blue";
stroke(drawColor);
if (mouseIsPressed)
line(mouseX, mouseY, pmouseX, pmouseY);
}
Functions
keyIsDown()
Use keyIsDown() function inside the loop() event to detect if the specified key is pressed. You need to specify the key code.
The following constasts can be used instead of a numeric key code: LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW. Use them without quotes.
let shipX = width / 2;
function loop()
{
if (keyIsDown(LEFT_ARROW))
shipX -= 10;
else if (keyIsDown(RIGHT_ARROW))
shipX += 10;
draw();
}
function draw()
{
clear();
noStroke();
fill("Black");
text("Use LEFT and RIGHT arrows to move the ship", 10, height - 5);
fill("Magenta");
rect(shipX, height - 40, 100, 20);
}
Note: To find key codes you can use a site such as keycode.info
keyWentDown()
keyWentDown() is also intended for loop() event and is similar to keyIsDown().
The difference is that this function returns true just once per key pressed. To retrigger the function, the user need to release the key and press it again.
let shipX = width / 2;
let fireLaser = false;
function loop()
{
if (keyIsDown(LEFT_ARROW))
shipX -= 10;
else if (keyIsDown(RIGHT_ARROW))
shipX += 10;
fireLaser = false;
if (keyWentDown(32)) // SPACE key
fireLaser = true;
draw();
}
function draw()
{
clear();
noStroke();
fill("Black");
text("Use LEFT and RIGHT arrows to move the ship", 10, height - 5);
fill("Magenta");
rect(shipX, height - 40, 100, 20);
if (fireLaser)
{
stroke("Red");
strokeWeight(2);
line(shipX + 50, height - 40, shipX + 50, 0);
}
}
This article is part of a series of mini-articles containing JavaScript coding hints applicable to codeguppy.com environment.
Top comments (0)