Summary of p5.js keyboard interaction functions

This time I bring you p5.js keyboard interaction function Summary, what are the precautions when using p5.js keyboard interaction function, the following is a practical case, let’s take a look one time.

1. Keywords related to keyboard interaction and functions

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, triggered once when the key is released

keyIsDown(): Function, returns true when the specified key is pressed, otherwise false

The following is a more comprehensive case, controlled by wsad and zxcv Ball movement:

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 case 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);  
 } 
}

I believe you have read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

vue-cli webpack creates project error

How does the jquery fullpage plug-in operate the head and tail

The above is the detailed content of Summary of p5.js keyboard interaction functions. For more information, please follow other related articles on the PHP Chinese website!