Home > Article > Web Front-end > Detailed explanation of p5.js keyboard interaction
This article mainly introduces to you the keyboard interaction of the p5.js introductory tutorial. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.
1. Keywords and functions related to keyboard interaction
keyIsPressed: Keyword, true when the key is pressed, otherwise false
keyCode: keyword, used to determine which key is pressed
keyPressed(): function, triggered once when the key is pressed
keyReleased(): function, key Triggered once when released
keyIsDown(): function, returns true when the specified key is pressed, otherwise false
The following is a more comprehensive case, using wsad and zxcv to control the movement of the ball :
var x=200; var y=200; var speed=2; function setup() { createCanvas(400, 400); } function draw() { background(220); ellipse(x,y,20,20); if(keyIsPressed){ //持续触发 //字母用小写 if(key=='a'){ x-=speed; } if(key=='d'){ x+=speed; } } if(keyIsDown(87)){ //持续触发 //使用keyCode //87即w y-=speed; } if(keyIsDown(83)){ //持续触发 //使用keyCode //83即s y+=speed; } } function keyPressed(){ //按键按下时触发一次 //字母用大写 if(key=='Z'){ x-=20; } if(key=='X'){ x+=20; } } function keyReleased(){ //按键松开时触发一次 //字母用大写 if(key=='C'){ y-=20; } if(key=='V'){ y+=20; } }
View the effect: http://alpha.editor.p5js.org/full/S1YQvEFIZ
2. key and keyCode
The following example will output the key and keyCode of the key you pressed on the screen. You can use this method to quickly find the keyCode when writing a program:
function setup() { createCanvas(400, 400); } function draw() { background(220); textAlign(CENTER); textSize(30); if(keyIsPressed){ text(key,200,180); text(keyCode,200,220); } }
View the effect: http://alpha.editor.p5js.org/full/rkZ2TVFLW
The above is the detailed content of Detailed explanation of p5.js keyboard interaction. For more information, please follow other related articles on the PHP Chinese website!