p5.js键盘交互函数总结-js tutoriel-php.cn

p5.js键盘交互函数总结

php中世界最好的语言

Libérer： 2018-05-10 10:47:24

original

1682 Les gens l'ont consulté

这次给大家带来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; } }

Copier après la connexion

查看效果：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); } }

Copier après la connexion

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！