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實(shí)現(xiàn)滑動(dòng)導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)滑動(dòng)導(dǎo)航效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01
Bootstrap+jfinal實(shí)現(xiàn)省市級(jí)聯(lián)下拉菜單
這篇文章主要為大家詳細(xì)介紹了Bootstrap+jfinal實(shí)現(xiàn)省市級(jí)聯(lián)下拉菜單,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05
網(wǎng)站頁(yè)面自動(dòng)跳轉(zhuǎn)實(shí)現(xiàn)方法PHP、JSP(下)
很多時(shí)候我們需要Web頁(yè)具備有自動(dòng)跳轉(zhuǎn)功能,例如,論壇中的用戶登錄、發(fā)帖及回復(fù)或留言簿中的留言和回復(fù)等操作成功后,若用戶沒(méi)有任何鼠標(biāo)點(diǎn)擊操作,過(guò)了一定的時(shí)間,頁(yè)面自動(dòng)跳轉(zhuǎn)到預(yù)設(shè)的頁(yè)面。2010-08-08
用js實(shí)現(xiàn)的十進(jìn)制的顏色值轉(zhuǎn)換成十六進(jìn)制的代碼
用js實(shí)現(xiàn)的十進(jìn)制的顏色值轉(zhuǎn)換成十六進(jìn)制的代碼...2007-03-03
JavaScript實(shí)現(xiàn)九宮格點(diǎn)擊變色效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)九宮格點(diǎn)擊變色效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)帶動(dòng)畫(huà)返回頂部的方法詳解
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)帶動(dòng)畫(huà)返回頂部的效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解一下2022-08-08
js驗(yàn)證真實(shí)姓名與身份證號(hào),手機(jī)號(hào)的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js驗(yàn)證真實(shí)姓名與身份證號(hào),手機(jī)號(hào)的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-07

