이 글은 주로 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
2.
다음 경우는 화면에서 누른 버튼의 키와 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); } }
위 내용은 p5.js 키보드 상호 작용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!