p5.js入門教程之鍵盤交互
一、鍵盤交互相關(guān)關(guān)鍵詞與函數(shù)
keyIsPressed: 關(guān)鍵詞,按下按鍵時為true,反之為false
keyCode: 關(guān)鍵詞,用于判斷按下哪個按鍵
keyPressed():函數(shù),按鍵按下時觸發(fā)一次
keyReleased():函數(shù),按鍵松開時觸發(fā)一次
keyIsDown():函數(shù),按下指定按鍵時返回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){ //持續(xù)觸發(fā) //字母用小寫 if(key=='a'){ x-=speed; } if(key=='d'){ x+=speed; } } if(keyIsDown(87)){ //持續(xù)觸發(fā) //使用keyCode //87即w y-=speed; } if(keyIsDown(83)){ //持續(xù)觸發(fā) //使用keyCode //83即s y+=speed; } } function keyPressed(){ //按鍵按下時觸發(fā)一次 //字母用大寫 if(key=='Z'){ x-=20; } if(key=='X'){ x+=20; } } function keyReleased(){ //按鍵松開時觸發(fā)一次 //字母用大寫 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
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Bootstrap+jfinal實現(xiàn)省市級聯(lián)下拉菜單
這篇文章主要為大家詳細(xì)介紹了Bootstrap+jfinal實現(xiàn)省市級聯(lián)下拉菜單,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-05-05網(wǎng)站頁面自動跳轉(zhuǎn)實現(xiàn)方法PHP、JSP(下)
很多時候我們需要Web頁具備有自動跳轉(zhuǎn)功能,例如,論壇中的用戶登錄、發(fā)帖及回復(fù)或留言簿中的留言和回復(fù)等操作成功后,若用戶沒有任何鼠標(biāo)點擊操作,過了一定的時間,頁面自動跳轉(zhuǎn)到預(yù)設(shè)的頁面。2010-08-08用js實現(xiàn)的十進(jìn)制的顏色值轉(zhuǎn)換成十六進(jìn)制的代碼
用js實現(xiàn)的十進(jìn)制的顏色值轉(zhuǎn)換成十六進(jìn)制的代碼...2007-03-03JavaScript實現(xiàn)網(wǎng)頁帶動畫返回頂部的方法詳解
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實現(xiàn)網(wǎng)頁帶動畫返回頂部的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2022-08-08