当前位置： 移动技术网 > IT编程>开发语言>JavaScript > p5.js入门教程之键盘交互

p5.js入门教程之键盘交互

2018年03月29日  | 移动技术网IT编程  | 我要评论

一、键盘交互相关关键词与函数

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; 
 } 
}

查看效果：

二、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);  
 } 
}

查看效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网