p5.js Einführungs-Tutorial zur Tastaturinteraktion

In diesem Artikel wird hauptsächlich die Tastaturinteraktion des Einführungs-Tutorials von p5.j vorgestellt. Jetzt teile ich es mit Ihnen und gebe es als Referenz.

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

keyIsPressed: Schlüsselwort, es ist wahr, wenn die Taste gedrückt wird, andernfalls ist es falsch

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, wird ausgelöst, wenn Die Taste wird losgelassen. Einmal auslösen

keyIsDown(): Funktion, gibt true zurück, 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

2. Schlüssel und Schlüsselcode

Im folgenden Fall werden der Schlüssel und der Schlüsselcode der Taste ausgegeben, die Sie auf dem Bildschirm drücken. Mit dieser Methode können Sie den Schlüsselcode beim Schreiben eines Programms schnell finden:

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

Das Obige ist das, was ich für alle zusammengestellt habe. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Detaillierte Erläuterung der Verwendung von Angular CLI zum Generieren von Code aus Blaupausen

Detaillierte Analyse mehrerer leicht übersehener Teile des Vue-Dokument

So verwenden Sie JointJS in Vue

Das obige ist der detaillierte Inhalt vonp5.js Einführungs-Tutorial zur Tastaturinteraktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!