本文主要跟大家介紹了p5.js入門教程之鍵盤互動,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
一、鍵盤互動相關關鍵字與函數
#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
二、key與keyCode
下面這個案例將在畫面上輸出你按下的按鍵的key與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);
}
}查看效果：http://alpha.editor.p5js.org/full/rkZ2TVFLW
##
以上是p5.js鍵盤交互詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
