Explication détaillée de l'interaction du clavier p5.js

Cet article vous présente principalement l'interaction clavier du tutoriel d'introduction à p5.js. L'éditeur pense qu'il est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

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

keyIsPressed : Mot-clé, vrai lorsque la touche est enfoncée, et vice versa. 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, clé

keyIsDown() : la fonction est déclenchée une fois lorsqu'elle est relâchée. Elle renvoie vrai lorsque la touche spécifiée est enfoncée, sinon faux

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

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

II, key and keyCode

L'exemple suivant affichera la key et le keyCode de la touche que vous avez appuyée sur l'écran. Vous pouvez utiliser cette méthode pour trouver rapidement le keyCode lorsque. écrire 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);  
 } 
}

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

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!