Résumé des fonctions d'interaction du clavier p5.js

Cette fois je vous apporte un résumé de la fonction d'interaction clavier p5.js et quelles sont les précautions lors de l'utilisation de la fonction d'interaction clavier p5.js. Voici les cas pratiques. . Jetons un coup d'oeil une fois.

1. Mots-clés liés à l'interaction du clavier et aux fonctions

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

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é une fois lorsque la touche est relâchée

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

Ce qui suit est un cas plus complet, contrôlé par wsad et zxcv Ball mouvement :

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

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

Clé et keyCode

L'exemple suivant affichera la clé et le keyCode du bouton sur lequel vous appuyez sur l'écran. Vous pouvez utiliser cette méthode pour trouver rapidement le keyCode 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);  
 } 
}

Croyez-le Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP !

Lecture recommandée :

vue-cli+webpack crée un rapport d'erreur de projet

Comment fonctionne le plug-in jquery fullpage l'en-tête et la queue

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!