這篇文章主要介紹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);
}
}以上是“p5.js如何實現鍵盤交互”這篇文章的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。