p5.js入門教程之鍵盤交互
更新時間：2018年03月19日 08:39:37 作者：西河某人
這篇文章主要介紹了p5.js入門教程之鍵盤交互,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一、鍵盤交互相關(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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
文本框獲得焦點的時在文本框的下方顯示一個浮動層，點擊文本框隱藏浮動層，下面為大家介紹下鼠標點擊時文本框與隱藏層處理問題，感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了微信小程序調(diào)用攝像頭隱藏式拍照功能，本文給大家?guī)砹私鉀Q方法、官網(wǎng)代碼和小編寫的比較完整代碼,需要的朋友可以參考下2018-08-08
地圖在我們?nèi)粘５臄?shù)據(jù)可視化分析中是很常見的一種展示手段,不僅美觀而且很大氣,這篇文章主要給大家介紹了關(guān)于echarts地圖區(qū)域顯示不同顏色的相關(guān)資料,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了Js中使用正則表達式驗證輸入是否有特殊字符的簡單代碼，并通過一小段代碼給大家介紹了js正則表達式驗證同一字符串不同,需要的朋友可以參考下2018-09-09
這篇文章主要介紹了webpack打包js的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
JavaScript 格式化數(shù)字、金額、千分位、保留幾位小數(shù)、舍入舍去
這篇文章主要介紹了JavaScript 格式化數(shù)字、金額、千分位、保留幾位小數(shù)、舍入舍去，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-07-07
微信小程序scroll-view的滾動條設置實現(xiàn)
這篇文章主要介紹了微信小程序scroll-view的滾動條設置實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
這篇文章介紹了js控制表單奇偶行樣式的簡單方法，有需呀偶的朋友可以參考一下2013-07-07
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)購物車代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
JS獲得選取checkbox整行數(shù)據(jù)的方法
這篇文章主要介紹了JS獲得選取checkbox整行數(shù)據(jù)的方法,涉及使用js對DOM節(jié)點的操作技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01