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


Posted in Javascript onMarch 19, 2018

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript js cookie的存储,获取和删除
Dec 29 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 Javascript
javascript字符串函数汇总
Dec 06 Javascript
分析js闭包引起的事件注册问题
Mar 29 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
解决Vue项目中tff报错的问题
Oct 21 Javascript
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
Javascript的promise,async和await的区别详解
Mar 24 Javascript
vue 实现的树形菜的实例代码
Mar 19 #Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 #Javascript
jQuery替换节点元素的操作方法
Mar 18 #jQuery
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 #Javascript
分析javascript原型及原型链
Mar 18 #Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 #jQuery
jQuery中each方法的使用详解
Mar 18 #jQuery
You might like
zend api扩展的php对象的autoload工具
2011/04/18 PHP
国外PHP程序员的13个好习惯小结
2012/02/20 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
PHP中ini_set与ini_get用法实例
2014/11/04 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
PHP单链表的实现代码
2016/07/05 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
IE 上下滚动展示模仿Marquee机制
2009/12/20 Javascript
javascript字符串拼接的效率问题
2010/12/25 Javascript
js字符串转成JSON
2013/11/07 Javascript
js的隐含参数(arguments,callee,caller)使用方法
2014/01/28 Javascript
javascript获取wx.config内部字段解决微信分享
2016/03/09 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
微信小程序实现美团菜单
2018/06/06 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
推荐一个基于Node.js的表单验证库
2019/02/15 Javascript
基于vue通用表单解决方案的思考与分析
2019/03/16 Javascript
生成无限制的微信小程序码的示例代码
2019/09/20 Javascript
Vue快速实现通用表单验证的方法
2020/02/24 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
python通过线程实现定时器timer的方法
2015/03/16 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
Django1.11自带分页器paginator的使用方法
2019/10/31 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
python爬取音频下载的示例代码
2020/10/19 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
高效课堂标语
2014/06/26 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
我的生日感言
2015/08/03 职场文书