칸 아카데미에서 입력 한 키

Question

키를 눌러 코딩 한 이미지를 변경할 수 있도록 칸 아카데미에 코드를 작성해야합니다. 이렇게하려면 keyTyped 함수를 사용해야하지만 어떻게 작동시키는 지 모르겠습니다.

또한 루프를 사용할 수 없습니다. 키를 눌러 다른 이미지를 선택할 수있는 함수를 작성하면됩니다. 다음은 내가 가지고있는 이미지의 코드입니다.

//image: Kishin 
var x = 180; 
var y = 170; 
var widthEllipse = 300; 
var heightEllipse = 300; 
var widthX = 80; 
var heightY = 180; 

background(94, 30, 30); 
// bigger ellipse 
fill(0, 0, 0); 
ellipse(x + 20, y + 20, widthEllipse, heightEllipse); 

//smaller ellipses 
fill(148, 0, 0); 
ellipse(130, 150, widthX - 50, heightY - 40); 
ellipse(200, 230, widthX - 50, heightY - 40); 
ellipse(270, 150, widthX - 50, heightY - 40); 

// smallest ellipses 
fill(0, 0, 0); 
ellipse(130, 150, 30, 35); 
ellipse(200, 230, 30, 35); 
ellipse(270, 150, 30, 35); 

Answer 1

칸 아카데미는 p5.js

난 당신이 올바른 사용법을 모르는 경우가 keyTyped()에 대한 문서를 확인하시기라는 자바 스크립트 라이브러리를 사용합니다. 키를 누를 때마다

p5.js reference for keyTyped()

Answer 2

의 keyTyped 함수가 호출된다. 그래서 거기에서 "key"변수를 사용하여 입력 된 키를 확인할 수 있습니다. 키보드의 각 키는 ASCII 테이블에 따라 숫자와 연관되며 "키"는 누른 키의 번호를 유지합니다. 예제 코드는 다음과 같습니다 :

keyTyped = function() { if (key === 40) {// down key background (255, 255, 255); // 취소 화면 // 그릴 이미지 } ... // 다른 이미지 }에 대한 더 많은 키를 추가하면 다른