p5.js入門教程之鍵盤交互
更新時間：2018年03月19日 08:39:37 作者：西河某人
這篇文章主要介紹了p5.js入門教程之鍵盤交互,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一、鍵盤交互相關關鍵詞與函數
keyIsPressed: 關鍵詞，按下按鍵時為true，反之為false
keyCode: 關鍵詞，用于判斷按下哪個按鍵
keyPressed():函數，按鍵按下時觸發(fā)一次
keyReleased():函數，按鍵松開時觸發(fā)一次
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){
//持續(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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家詳細介紹了JS實現滑動導航效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
這篇文章主要為大家詳細介紹了Bootstrap+jfinal實現省市級聯下拉菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了JS實現的仿QQ空間圖片彈出效果代碼,涉及JavaScript響應鼠標事件動態(tài)生成彈出層的相關技巧,需要的朋友可以參考下2016-02-02
很多時候我們需要Web頁具備有自動跳轉功能，例如，論壇中的用戶登錄、發(fā)帖及回復或留言簿中的留言和回復等操作成功后，若用戶沒有任何鼠標點擊操作，過了一定的時間，頁面自動跳轉到預設的頁面。2010-08-08
這篇文章主要介紹了JavaScript引用賦值與傳值賦值總結，在JavaScript中基本數據類型都是傳值賦值，復合數據類型都是引用賦值(傳地址)也叫引用傳址，下文更多相關資料，需要的小伙伴可以參考一下2022-05-05
用js實現的十進制的顏色值轉換成十六進制的代碼...2007-03-03
這篇文章主要為大家詳細介紹了JavaScript實現九宮格點擊變色效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要為大家詳細介紹了如何利用JavaScript實現網頁帶動畫返回頂部的效果，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下2022-08-08
下面小編就為大家?guī)硪黄猨s驗證真實姓名與身份證號,手機號的簡單實例。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
這篇文章主要介紹了Webstorm2016使用技巧(SVN插件使用),小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-10-10