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

更新时间：2018年03月19日 08:39:37 作者：西河某人

这篇文章主要介绍了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

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

您可能感兴趣的文章:

微信JSAPI支付操作需要注意的细节
这篇文章主要介绍了微信JSAPI支付中所遇到的那些坑，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
浅析script标签中的defer与async属性
最近在网上看到一个前辈在写script标签的时候，居然同时写了async和defer属性，想着这是什么意思呢？所以决定深入的了解下这其中的学问，以下这篇文章就是个人在学习了之后的一些总结分析，有需要的朋友们可以参考借鉴，下面来一起学习学习吧。
2016-11-11
bootstrap table小案例
这篇文章主要介绍了bootstrap table小案例，教大家如何使用表格组件bootstrap table
2016-10-10
js实现带有介绍的Select列表菜单实例
这篇文章主要介绍了js实现带有介绍的Select列表菜单,涉及javascript页面元素的动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
JavaScript比较同一天的时间大小实例代码
在项目开发中，经常会遇到同一天内的时间大小比较，下面小编给大家带来了JavaScript比较同一天的时间大小实例代码，需要的朋友参考下
2018-02-02
JS实现随机乱撞彩色圆球特效的方法
这篇文章主要介绍了JS实现随机乱撞彩色圆球特效的方法,可实现彩色小球的碰撞效果,涉及随机函数与页面样式的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-05-05
js表单元素checked、radio被选中的几种方法(详解)
下面小编就为大家带来一篇js表单元素checked、radio被选中的几种方法(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
一文带你理解JavaScript 观察者模式
观察者模式（Observer Pattern）是一种行为型设计模式，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象，本文将带你详细了解JavaScript 观察者模式，,需要的朋友可以参考下
2023-05-05
SyntaxHighlighter自动识别并加载脚本语言
SyntaxHighlighter是一个使用JavaScript编写的支持多种编程语言语法高亮的JS插件，很多大型网站或博客都在使用。现在给大家介绍一下如何让它自动识别加载我们添加的代码语言
2017-02-02
javascript制作的cookie封装及使用指南
这篇文章主要介绍了javascript制作的cookie封装及使用指南,需要的朋友可以参考下
2015-01-01