프로젝트에서 p5.js 키보드 상호 작용을 사용하는 방법

이번에는 프로젝트에서 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 인터페이스에 헤더 및 저작권 추가

preload() 기능 및 이미지 업로드 사용

위 내용은 프로젝트에서 p5.js 키보드 상호 작용을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!