Pi.js provides a range of input functions that allow you to handle user input from the keyboard, mouse, touch screen, and gamepads. These functions make it easy to create engaging, interactive experiences that respond to user input in real-time. Whether you're building a simple game or a complex demo, pi.js provides the tools you need to create dynamic, responsive user interfaces. In this article, we'll explore the various input functions provided by pi.js and how they can be used to create engaging games and demos.
input
The input function prompts the user to type input from the keyboard and press enter when done. It takes an optional parameter that specifies the message to display to the user. The function returns a string representing the input entered by the user. You can cancel and input prompt using the cancelInput function.
$.screen( "300x200" );
askQuestions();
async function askQuestions() {
var name = await $.input( "What is your name? " );
var age = await $.input( "How old are you? ", null, true, true, false, "always" );
$.print( "Your name is " + name + " you are " + age + " years old." );
}inkey
The inkey function reads any keys currently being pressed by the keyboard. It returns a string representing the key being pressed. This function is useful for games that require the player to hold down keys to move continuously.
$.screen( "300x200" );
var frame = requestAnimationFrame( run );
function run() {
var keys, key;
keys = $.inkey();
$.cls();
$.print( "Press any key" );
for( key in $.inkey() ) {
$.print( "--------------------------" );
$.print( "key: " + keys[ key ].key );
$.print( "location: " + keys[ key ].location );
$.print( "code: " + keys[ key ].code );
$.print( "keyCode: " + keys[ key ].keyCode );
}
frame = requestAnimationFrame( run );
}onkey
The onkey function triggers an event when a key is pressed down or released. It takes three parameters: the key code or key name to listen for, the mode which can be up or down, and a function to call when the event is triggered.
$.screen( "300x200" );
$.print( "Press any key." );
$.print( "Press q to stop" );
$.onkey( "any", "down", keyPress );
$.onkey( "Q", "down", stopPress, true );
// Key press function
function keyPress( key ) {
$.print( "You pressed " + key.key + "!" );
}
// Stop key press function
function stopPress() {
$.print( "You pressed Q! Stopping." );
$.offkey( "any", "down", keyPress );
}inmouse
The inmouse function returns an object with properties x and y, and buttons representing the current position of the mouse cursor on the screen and the state of the buttons.
$.screen( "4x4" );
var interval = setInterval( function () {
var mouse = $.inmouse();
if( mouse.buttons > 0 ) {
$.setColor( Math.floor( Math.random() * 9 ) + 1 );
$.pset( mouse.x, mouse.y );
}
}, 50 );onmouse
The onmouse function triggers an event when the mouse is moved or a button is pressed down or released. It requires two parameters: the event type to listen for (e.g. "up", "down", "move"), and a function to call when the event is triggered. There are also three optional parameters (e.g. once, hitBox, and customData).
$.screen( "300x200" );
$.print( "Move mouse to paint screen, click to stop." );
$.onmouse( "move", mouseMove );
$.onmouse( "up", mouseStop, true );
// Mouse move function
function mouseMove( data ) {
$.setPosPx( data.x, data.y );
var pos = $.getPos();
$.setPos( pos.col, pos.row );
$.setColor( 8 );
$.print( "+", true );
}
// Mouse stop function
function mouseStop() {
$.setColor( 14 );
var pos = $.getPos();
$.setPos( pos.col - 4, pos.row );
$.print( "Stopped!", true );
$.offmouse( "move", mouseMove );
}intouch
The intouch function returns an array of touch objects representing the current touch points on the screen.
$.screen( "4x4" );
$.startTouch();
$.setPinchZoom( false );
var interval = setInterval( function () {
var touches = $.intouch();
if( touches.length > 0 ) {
$.setColor( Math.floor( Math.random() * 9 ) + 1 );
$.pset( touches[ 0 ].x, touches[ 0 ].y );
}
}, 50 );ontouch
The ontouch function triggers an event when a touch point is added, moved, or removed from the screen. It takes two parameters: the event type to listen for (e.g. "touchstart", "touchmove", "touchend"), and a function to call when the event is triggered.
$.screen( "4x4" );
$.setPinchZoom( false );
$.ontouch( "start", function ( touches ) {
var touch = touches[ 0 ];
$.setColor( Math.floor( Math.random() * 9 ) + 1 );
$.pset( touch.x, touch.y );
} );ingamepads
The ingamepads function returns an array of gamepad objects representing the currently connected gamepads.
var x, y, frame;
$.screen( "300x200" );
$.setColor( 15 );
x = 150;
y = 100;
frame = requestAnimationFrame( run );
function run( dt ) {
var pads, factor;
factor = dt / 2500;
pads = $.ingamepads();
$.cls();
if( pads.length > 0 ) {
x = $.util.clamp( x + pads[ 0 ].axes2[ 0 ] * factor, 0, 299 );
y = $.util.clamp( y + pads[ 0 ].axes2[ 1 ] * factor, 0, 199 );
$.circle( Math.floor( x ), Math.floor( y ) , 10 );
$.pset( Math.floor( x ), Math.floor( y ) );
}
frame = requestAnimationFrame( run );
}ongamepad()
The ongamepad function triggers an event when a gamepad is interacted with.
$.screen( "300x300" );
$.print( "Press button 3 to stop" );
$.ongamepad( 0, "pressed", "any", pressButton );
$.ongamepad( 0, "pressed", 3, stop );
// Press button function
function pressButton( btn ) {
$.print( "Button " + btn.index + " pressed" );
}
// Stop function
function stop() {
$.offgamepad( 0, "pressed", "any", pressButton );
$.offgamepad( 0, "pressed", 3, stop );
$.print( "Stopped" );
}inpress
The inpress function works with both mouse and touch events and returns an object with properties x and y representing the current position of the mouse cursor or touch point.
$.screen( "4x4" );
$.startTouch();
$.setPinchZoom( false );
var interval = setInterval( function () {
var press = $.inpress();
if( press.buttons > 0 ) {
$.setColor( Math.floor( Math.random() * 9 ) + 1 );
$.pset( press.x, press.y );
}
}, 50 );onpress
The onpress function triggers an event when a mouse button is pressed or released, or a touch point is added or removed from the screen.
$.screen( "300x200" );
$.print(
"Move mouse or touch to paint screen," +
" click/touch up to stop."
);
$.onpress( "move", pressMove );
$.onpress( "up", pressStop, true );
// Press move function
function pressMove( data ) {
$.setPosPx( data.x, data.y );
var pos = $.getPos();
$.setPos( pos.col, pos.row );
$.setColor( 8 );
$.print( "+", true );
}
// Press stop function
function pressStop() {
$.setColor( 14 );
var pos = $.getPos();
$.setPos( pos.col - 4, pos.row );
$.print( "Stopped!", true );
$.offpress( "move", pressMove );
}Please checkout the Pi.js Reference page to see a full listing of input functions.