Coding Hints. Part III: User Input
Tags: javascript, codeguppy, codenewbie, beginners
Published: 2020-10-23 03:06:13


There are two main ways to get keyboard/ mouse user input into a [codeguppy.com](https://codeguppy.com) program: via events or via the `loop()` function by reading built-in system variables and functions.

Events

- [keyPressed event](#keypressed-event)
- [keyReleased event](#keyreleased-event)
- [keyTyped event](#keytyped-event)
- [mouseClicked event](#mouseclicked-event)
- [mousePressed event](#mousepressed-event)
- [mouseReleased event](#mousereleased-event)
- [mouseMoved event](#mousemoved-event)
- [mouseDragged event](#mousedragged-event)
- [doubleClicked event](#doubleclicked-event)
- [mouseWheel event](#mousewheel-event)

System variables

- [keyIsPressed](#keyispressed)
- [key](#key)
- [keyCode](#keycode)
- [mouseX](#mousex)
- [mouseY](#mousey)
- [pmouseX](#pmousex)
- [pmouseY](#pmousey)
- [mouseIsPressed](#mouseispressed)
- [mouseButton](#mousebutton)

Functions

- [keyIsDown()](#keyisdown)
- [keyWentDown()](#keywentdown)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2rg1onr8vna9qyoqc2fp.png)

# 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

```javascript
function keyPressed()
{
    clear();
    text(key, 400, 300);
    text(keyCode, 400, 320);
}
```

### keyReleased event

Executes when a key is released

```javascript
function keyReleased()
{
    clear();
    text(key, 400, 300);
    text(keyCode, 400, 320);
}
```


### keyTyped event

Executes when a key is typed execept for special keys

```javascript
function keyTyped()
{
    clear();
    text(key, 400, 300);
    text(keyCode, 400, 320);
}
```

### mouseClicked event

Executes once when the mouse is pressed and released

```javascript
function mouseClicked()
{
    circle(mouseX, mouseY, 10);
}
```


### mousePressed event

Executes once when the mouse button is pressed

```javascript
function mousePressed()
{
    stroke("red");
    circle(mouseX, mouseY, 10);
}
```


### mouseReleased event

Executes when the mouse button is released

```javascript
function mouseReleased()
{
    stroke("blue");
    circle(mouseX, mouseY, 10);
}
```


### mouseMoved event

Executes when the mouse is moved and button is not pressed

```javascript
function mouseMoved()
{
    line(mouseX, mouseY, pmouseX, pmouseY);
}
```

### mouseDragged event

Executes when the mouse is moved an a button is pressed

```javascript
function mouseDragged()
{
    line(mouseX, mouseY, pmouseX, pmouseY);
}
```


### doubleClicked event

Executes when the mouse is double clicked

```javascript
function doubleClicked()
{
    circle(mouseX, mouseY, 10);
}
```


### mouseWheel event

Executes when the user uses the mouse wheel or touchpad

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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](http://keycode.info/).


### mouseX

System variable containing the horizontal coordinate of the mouse coursor.

```javascript
function loop()
{
    if (mouseIsPressed)
        line(mouseX, mouseY, pmouseX, pmouseY);
}
```


### mouseY

System variable containing the vertical coordinate of the mouse coursor

```javascript
function loop()
{
    if (mouseIsPressed)
        line(mouseX, mouseY, pmouseX, pmouseY);
}
```


### pmouseX

System variable containing the previous horizontal coordinate of the mouse coursor

```javascript
function loop()
{
    if (mouseIsPressed)
        line(mouseX, mouseY, pmouseX, pmouseY);
}
```

### pmouseY

System variable containing the previous vertical coordinate of the mouse coursor.

```javascript
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.

```javascript
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`.

```javascript
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.

```javascript
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](http://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.

```javascript
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](https://codeguppy.com) environment.

- [Coding Hints. Part I: JavaScript syntax](https://dev.to/codeguppy/coding-hints-part-i-javascript-syntax-264m)

- [Coding Hints. Part II: Drawing]
(https://dev.to/codeguppy/coding-hints-part-ii-drawing-2ok9)

- [Coding Hints. Part III: User Input]
(https://dev.to/codeguppy/coding-hints-part-ii-user-input-13ec)

- [Coding Hints. Part IV: Game Development]
(https://dev.to/codeguppy/coding-hints-part-iv-game-development-42l2)

- [Coding Hints. Part V: Other hints]
(https://dev.to/codeguppy/coding-hints-part-v-other-hints-3amb)