Interaction avec le clavier du didacticiel d'introduction à p5.js

Cet article présente principalement l'interaction clavier du didacticiel d'introduction à p5.js. Maintenant, je le partage avec vous et le donne comme référence.

1. Mots-clés et fonctions liés à l'interaction avec le clavier

keyIsPressed : Mot-clé, il est vrai lorsque la touche est enfoncée, sinon il est faux

keyCode : mot-clé, utilisé pour déterminer quelle touche est enfoncée

keyPressed() : fonction, déclenchée une fois lorsque la touche est enfoncée

keyReleased() : fonction, déclenchée lorsque la touche est relâchée Déclenchez une fois

keyIsDown() : fonction, renvoie true lorsque la touche spécifiée est enfoncée, sinon false

Ce qui suit est un cas plus complet, utilisant wsad et zxcv pour contrôler le mouvement de la balle :

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

Voir l'effet : http://alpha.editor.p5js.org/full/S1YQvEFIZ

2.

Le cas suivant affichera la clé et le code clé du bouton sur lequel vous appuyez sur l'écran. Vous pouvez utiliser cette méthode pour trouver rapidement le code clé lors de l'écriture d'un programme :

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

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Explication détaillée de l'utilisation d'Angular CLI pour générer du code à partir d'un plan

Analyse détaillée de plusieurs parties facilement négligées de le document Vue

Comment utiliser jointjs dans vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!