這次帶給大家如何在專案中使用p5.js鍵盤交互,在專案中使用p5.js鍵盤交互的注意事項有哪些,以下就是實戰案例,一起來看一下。
一、鍵盤互動相關關鍵字與函數
keyIsPressed: 關鍵字,按下按鍵時為true,反之為false
keyCode: 關鍵字,用於判斷按下哪個按鍵
keyPressed():函數,按鍵按下時觸發一次
keyReleased():函數,按鍵鬆開時觸發一次
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){ //持续触发 //字母用小写 if(key=='a'){ x-=speed; } if(key=='d'){ x+=speed; } } if(keyIsDown(87)){ //持续触发 //使用keyCode //87即w y-=speed; } if(keyIsDown(83)){ //持续触发 //使用keyCode //83即s y+=speed; } } function keyPressed(){ //按键按下时触发一次 //字母用大写 if(key=='Z'){ x-=20; } if(key=='X'){ x+=20; } } function keyReleased(){ //按键松开时触发一次 //字母用大写 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); } }
相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
推薦閱讀:
以上是如何在專案中使用p5.js鍵盤交互的詳細內容。更多資訊請關注PHP中文網其他相關文章!