Comment utiliser l'interaction clavier p5.js dans un projet

Cette fois, je vais vous montrer comment utiliser l'interaction clavier p5.js dans le projet, et quelles sont les précautions à prendre pour utiliser l'interaction clavier p5.js dans le projet. Ce qui suit est un cas pratique, jetons un coup d'œil.

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

Je pense que vous avez lu le cas dans cet article. Après avoir maîtrisé la méthode, veuillez prêter attention aux autres articles connexes sur le site Web php chinois pour un contenu plus passionnant !

Lecture recommandée :

jquery+fullpage ajoute l'en-tête et le copyright dans l'interface

fonction preload() et images Téléchargez en utilisant

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!