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

查看效果：http://alpha.editor.p5js.org/full/rkZ2TVFLW

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