この記事では、p5.js 入門チュートリアルのキーボード インタラクションを主に紹介し、参考として提供します。
1. キーボード操作に関連するキーワードと関数
keyIsPressed: キーワード、キーが押された場合は true、それ以外の場合は false
keyCode: キーワード、どのキーが押されたかを決定するために使用されます
keyPressed(): 関数、キーが押されたときに 1 回トリガーされます
keyReleased(): 関数、キーが放されたときに 1 回トリガーされます
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
2 番目のキーと keyCode
次の場合は、画面上で押したキーと 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); } }
以上は、皆さんのお役に立てれば幸いです。未来のみんなへ。
関連記事:
Angular CLIを使用してブループリントからコードを生成する詳細な説明
Vueドキュメントの見落とされやすいいくつかの部分の詳細な分析
以上がp5.js 入門チュートリアルのキーボード操作の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。