Detaillierte Erläuterung der Tastaturinteraktion von p5.js

Dieser Artikel stellt Ihnen hauptsächlich die Tastaturinteraktion des p5.js-Einführungs-Tutorials vor. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz geben. Folgen wir dem Herausgeber, um einen Blick darauf zu werfen. Ich hoffe, es kann allen helfen.

1. Schlüsselwörter und Funktionen im Zusammenhang mit der Tastaturinteraktion

keyIsPressed: Schlüsselwort, wahr, wenn die Taste gedrückt wird, und umgekehrt false

keyCode: Schlüsselwort, wird verwendet, um zu bestimmen, welche Taste gedrückt wird

keyPressed(): Funktion, wird einmal ausgelöst, wenn die Taste gedrückt wird

keyReleased(): Funktion, Taste

keyIsDown(): Funktion wird einmal ausgelöst, wenn die angegebene Taste gedrückt wird, andernfalls false

Das Folgende ist ein umfassenderer Fall, bei dem wsad und zxcv zur Steuerung verwendet werden Bewegung des Balls:

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

Sehen Sie sich den Effekt an: http://alpha.editor.p5js.org/full/S1YQvEFIZ

II, Schlüssel und Schlüsselcode

Das folgende Beispiel gibt den Schlüssel und den Schlüsselcode der Taste aus, die Sie auf dem Bildschirm gedrückt haben. Mit dieser Methode können Sie den Schlüsselcode schnell finden ein Programm schreiben:

function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 textAlign(CENTER); 
 textSize(30); 
 if(keyIsPressed){ 
  text(key,200,180);  
  text(keyCode,200,220);  
 } 
}

Sehen Sie sich den Effekt an: http://alpha.editor.p5js.org/full/rkZ2TVFLW

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Tastaturinteraktion von p5.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!