이번에는 프로젝트에서 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); } }
이 기사의 사례를 읽은 후 이 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트 기사에서 다른 관련 주제에 주목하세요!
추천 도서:
jquery+fullpage 인터페이스에 헤더 및 저작권 추가
위 내용은 프로젝트에서 p5.js 키보드 상호 작용을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!