Home > Web Front-end > JS Tutorial > body text

How to use p5.js keyboard interaction in a project

php中世界最好的语言
Release: 2018-06-15 15:17:53
Original
1891 people have browsed it

This time I will show you how to use p5.js keyboard interaction in the project, and what are the precautions for using p5.js keyboard interaction in the project. The following is a practical case, let's take a look.

1. Keywords and functions related to keyboard interaction

keyIsPressed: Keyword, true when the key is pressed, false otherwise

keyCode: keyword, used to determine which key is pressed

keyPressed(): function, triggered once when the key is pressed

keyReleased(): function, triggered when the key is released Trigger once

keyIsDown(): function, returns true when the specified key is pressed, otherwise false

The following is a more comprehensive case, using wsad and zxcv to control the movement of the ball:

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; 
 } 
}
Copy after login

View the effect: http://alpha.editor.p5js.org/full/S1YQvEFIZ

2. Key and keyCode

The following case will output the key and keyCode of the key you pressed on the screen. You can use this method to quickly find the keyCode when writing a program:

function setup() {  
 createCanvas(400, 400); 
}  
 
function draw() {  
 background(220); 
 textAlign(CENTER); 
 textSize(30); 
 if(keyIsPressed){ 
  text(key,200,180);  
  text(keyCode,200,220);  
 } 
}
Copy after login

I believe you have mastered the method after reading the case in this article. For more exciting content, please pay attention to other related articles on the php Chinese website!

Recommended reading:

jquery fullpage Add header and copyright in the interface

preload() function and image upload use

The above is the detailed content of How to use p5.js keyboard interaction in a project. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template