p5.js 입문 튜토리얼 키보드 상호 작용

이 글은 주로 p5.js 입문 튜토리얼의 키보드 상호 작용을 소개하고 참고용으로 제공합니다.

1. 키보드 상호 작용과 관련된 키워드 및 기능

keyIsPressed: 키워드, 키를 눌렀을 때 true, 그렇지 않으면 false

keyCode: 어떤 키를 눌렀는지 결정하는 데 사용되는 키워드

keyPressed( ): 함수 , 키를 눌렀을 때 한 번 트리거

keyReleased(): 함수, 키를 놓았을 때 한 번 트리거

keyIsDown(): 함수, 지정된 키를 눌렀을 때 true를 반환하고, 그렇지 않으면 false

다음은 더 포괄적입니다. 사례, wsad 및 zxcv를 사용하여 공의 움직임 제어:

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

효과 보기: http://alpha.editor.p5js.org/full/S1YQvEFIZ

두 번째, 키 및 keyCode

The 다음 경우에는 화면에 누른 키의 키와 keyCode가 출력됩니다. 이 방법을 사용하면 프로그램 작성 시 keyCode를 빠르게 찾을 수 있습니다.

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

위 내용은 제가 모두에게 도움이 되기를 바랍니다. 앞으로도 모든 사람에게.

관련 기사:

청사진에서 코드를 생성하기 위해 Angular CLI를 사용하는 방법에 대한 자세한 설명

Vue 문서에서 쉽게 간과할 수 있는 여러 부분에 대한 자세한 분석

Vue에서 Jointjs를 사용하는 방법

위 내용은 p5.js 입문 튜토리얼 키보드 상호 작용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!