p5.js入門(mén)教程之鍵盤(pán)交互
一、鍵盤(pán)交互相關(guān)關(guān)鍵詞與函數(shù)
keyIsPressed: 關(guān)鍵詞，按下按鍵時(shí)為true，反之為false
keyCode: 關(guān)鍵詞，用于判斷按下哪個(gè)按鍵
keyPressed():函數(shù)，按鍵按下時(shí)觸發(fā)一次
keyReleased():函數(shù)，按鍵松開(kāi)時(shí)觸發(fā)一次
keyIsDown():函數(shù)，按下指定按鍵時(shí)返回true，反之為false
以下是一個(gè)較綜合的案例，用wsad與zxcv控制小球移動(dòng)：
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ā)
//字母用小寫(xiě)
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(){
//按鍵按下時(shí)觸發(fā)一次
//字母用大寫(xiě)
if(key=='Z'){
x-=20;
}
if(key=='X'){
x+=20;
}
}
function keyReleased(){
//按鍵松開(kāi)時(shí)觸發(fā)一次
//字母用大寫(xiě)
if(key=='C'){
y-=20;
}
if(key=='V'){
y+=20;
}
}
查看效果：http://alpha.editor.p5js.org/full/S1YQvEFIZ
二、key與keyCode
下面這個(gè)案例將在畫(huà)面上輸出你按下的按鍵的key與keyCode，在寫(xiě)程序時(shí)可以用這個(gè)辦法快速查找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
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js中點(diǎn)擊空白區(qū)域時(shí)文本框與隱藏層的顯示與影藏問(wèn)題
文本框獲得焦點(diǎn)的時(shí)在文本框的下方顯示一個(gè)浮動(dòng)層，點(diǎn)擊文本框隱藏浮動(dòng)層，下面為大家介紹下鼠標(biāo)點(diǎn)擊時(shí)文本框與隱藏層處理問(wèn)題，感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了微信小程序調(diào)用攝像頭隱藏式拍照功能，本文給大家?guī)?lái)了解決方法、官網(wǎng)代碼和小編寫(xiě)的比較完整代碼,需要的朋友可以參考下2018-08-08
地圖在我們?nèi)粘５臄?shù)據(jù)可視化分析中是很常見(jiàn)的一種展示手段,不僅美觀而且很大氣,這篇文章主要給大家介紹了關(guān)于echarts地圖區(qū)域顯示不同顏色的相關(guān)資料,需要的朋友可以參考下2023-10-10
Js中使用正則表達(dá)式驗(yàn)證輸入是否有特殊字符
這篇文章主要介紹了Js中使用正則表達(dá)式驗(yàn)證輸入是否有特殊字符的簡(jiǎn)單代碼，并通過(guò)一小段代碼給大家介紹了js正則表達(dá)式驗(yàn)證同一字符串不同,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了webpack打包js的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
JavaScript 格式化數(shù)字、金額、千分位、保留幾位小數(shù)、舍入舍去
這篇文章主要介紹了JavaScript 格式化數(shù)字、金額、千分位、保留幾位小數(shù)、舍入舍去，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
微信小程序scroll-view的滾動(dòng)條設(shè)置實(shí)現(xiàn)
這篇文章主要介紹了微信小程序scroll-view的滾動(dòng)條設(shè)置實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
這篇文章介紹了js控制表單奇偶行樣式的簡(jiǎn)單方法，有需呀偶的朋友可以參考一下2013-07-07
微信小程序?qū)崿F(xiàn)購(gòu)物車代碼實(shí)例詳解
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)購(gòu)物車代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
JS獲得選取checkbox整行數(shù)據(jù)的方法
這篇文章主要介紹了JS獲得選取checkbox整行數(shù)據(jù)的方法,涉及使用js對(duì)DOM節(jié)點(diǎn)的操作技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-01-01