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动态调整iframe高度的方法
Mar 06 Javascript
jquery 图片Silhouette Fadeins渐显效果
Feb 07 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 Javascript
用js+iframe形成页面的一种遮罩效果的具体实现
Dec 31 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
微信小程序动态显示项目倒计时效果
Jun 13 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
node跨域请求方法小结
Aug 25 Javascript
详解Chai.js断言库API中文文档
Jan 31 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
Apr 15 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
php使用curl访问https示例分享
2014/01/17 PHP
浅谈ThinkPHP5.0版本和ThinkPHP3.2版本的区别
2017/06/17 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
php生成短网址/短链接原理和用法实例分析
2020/05/29 PHP
Js动态创建div
2008/09/25 Javascript
jquery让指定的元素闪烁显示的方法
2015/03/17 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
基于js实现投票的实例代码
2015/08/04 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
vue-loader教程介绍
2017/06/14 Javascript
JavaScript转换数据库DateTime字段类型方法
2017/06/27 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
[02:41]DOTA2英雄基础教程 谜团
2013/12/10 DOTA
Python实现截屏的函数
2015/07/25 Python
关于python的list相关知识(推荐)
2017/08/30 Python
python编程通过蒙特卡洛法计算定积分详解
2017/12/13 Python
Python元组知识点总结
2019/02/18 Python
python中re模块知识点总结
2021/01/17 Python
赫里福德的一家乡村零售商店:Philip Morris & Son
2017/06/25 全球购物
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
物业管理毕业生的自我评价
2014/02/17 职场文书
积极贯彻学习两会精神总结
2014/03/17 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
水利专业大学生职业生涯规划书范文
2014/09/17 职场文书
高中校园广播稿
2014/10/21 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
世界红十字日活动总结
2015/02/10 职场文书
教师学习心得体会范文
2016/01/21 职场文书
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript
Python中生成随机数据安全性、多功能性、用途和速度方面进行比较
2022/04/14 Python