![見出し画像](https://assets.st-note.com/production/uploads/images/129531223/rectangle_large_type_2_1220650de13aa254e729eba7db75bbeb.png?width=1200)
Hello! p5.js. - p5playで動かす。
表示ができたら次は動かします。矢印キーで動かします。
矢印キーは上下左右あるので
if(kb.presses("left")){
// 左に進む処理
}
if(kb.presses("right")){
// 右に進む処理
}
if(kb.presses("up")){
// 上に進む処理
}
if(kb.presses("down")){
// 下に進む処理
}
キーボードを認識させる
上記サイトでキーボードの"スペース"押せばいろんな動作を見ることができます。押す動作では、"presses(押した瞬間)"、"pressing(押している間)"、"released(話した瞬間)"などのタイミングで動作させることができます。
今回はpressesを使います。
(kb.presses("キーボードの種類")
そして処理の内容ですが、
velocity
"vel"を使うと、一回押すと動き続けます。以下はx軸の動作を指定しています。
sprite.vel.x = -2;
sprite.vel.y = 0;
は"-2"なので画面左方向に動く動作となります。上下左右全て入れると
if(kb.presses("left")){
sprite.vel.x = -2;
sprite.vel.y = 0;
}
if(kb.presses("right")){
sprite.vel.x = 2;
sprite.vel.y = 0;
}
if(kb.presses("up")){
sprite.vel.x = 0;
sprite.vel.y = -2;
}
if(kb.presses("down")){
sprite.vel.x = 0;
sprite.vel.y = 2;
}
全コードは
let sprite;
function setup(){
new Canvas(500, 500);
sprite = new Sprite();
sprite.width = 50;
sprite.height = 50;
sprite.color = 'orange';
}
function draw(){
background("silver");
if(kb.presses("left")){
sprite.vel.x = -2;
sprite.vel.y = 0;
}
if(kb.presses("right")){
sprite.vel.x = 2;
sprite.vel.y = 0;
}
if(kb.presses("up")){
sprite.vel.x = 0;
sprite.vel.y = -2;
}
if(kb.presses("down")){
sprite.vel.x = 0;
sprite.vel.y = 2;
}
}
move
"move"を使います。一回押すと一定量動きます。
move(一回の動く距離,方向,スピード)
となっています。
let sprite;
function setup(){
new Canvas(500, 500);
sprite = new Sprite();
sprite.width = 50;
sprite.height = 50;
sprite.color = 'orange';
}
function draw(){
background("silver");
if(kb.presses("left")){
sprite.move(30, 'left', 1);
}
if(kb.presses("right")){
sprite.move(30, 'right', 1);
}
if(kb.presses("up")){
sprite.move(30, 'up', 1);
}
if(kb.presses("down")){
sprite.move(30, 'down', 1);
}
}
キーボードを押すことで指定の物体が動くようになりました。
この記事が気に入ったらサポートをしてみませんか?