Hello! p5.js. - 自由に動かす！

2024年1月24日 05:24

まず動かす準備です四角の位置と動くスピードを変数にします。

let x = 100
let y = 200
let speed = 1

あとはdraw()関数中で四角を変数を使って作って、スピードも更新するたびにスピード分を加算するようにします。

let x = 100
let y = 200
let speed = 1

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  rect(x,y,50,50)　　// 四角を作る
  
  x = x + speed　　　// 動くスピードを更新のたびに追加
}

これで実行するとx軸を動いていきます。

draw()関数では動かすものの処理を書きます

 background(220);
 rect(x,y,50,50)　　// 四角を作る
 x = x + speed

次に動き出したのでキーボード操作で進めたり左右反転させたりできるようにします。変数speedを"+"と"-"と入れ替えることで方向を変えることができます。

function keyPressed(){
if (keyCode == RIGHT_ARROW) {　・・・　右矢印のボタンを押した場合
speed = 1
}else if (keyCode == LEFT_ARROW){　・・左矢印のボタンを押した場合
speed = -1
}
}

speedの初期値は"0"なのでキーを押したタイミングでspeedに数字が入り動きが出ます。

let x = 100
let y = 200
let speed = 0

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  rect(x,y,50,50)
  
  x = x + speed
  
}
  
function keyPressed(){
   if (keyCode == RIGHT_ARROW) {
       speed = 1
    
    }else if (keyCode == LEFT_ARROW){
        speed = -1
    }
 }

このままではキーを押せばずっと止まることなく動くということになります。そこでスピードを弱める仕組みを作ります。

新しく変数"flic"を作り数字を入れます。この数字分をスタートと同時に減らしていって、最後は止まるようにします。

let flic = 0.1

speedが0よりも大きく又は小さくなったら、ということは動き出したらということで、その時点から"speed - flic"又" speed = speed + flic"はを実行します。結果speedの数字は増減し、"0"に向かって0.1を基準にして、条件によって"speed = 0"にして動きを止めます。

  if (speed > 0 ){
    speed = speed - flic
    if (speed < 0.1){
      speed = 0
    }
  }
  
  if (speed < 0 ){
    speed = speed + flic
    if (speed > 0.1){
      speed = 0
    }
  }

全てのコード

let x = 100
let y = 200
let speed = 5
let flic = 0.1

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  rect(x,y,50,50)
  
  x = x + speed

  if (speed > 0 ){
    speed = speed - flic
    if (speed < 0.1){
      speed = 0
    }
  }
  
  if (speed < 0 ){
    speed = speed + flic
    if (speed > 0.1){
      speed = 0
    }
  }
  

}
  
function keyPressed(){
  　if (keyCode == RIGHT_ARROW) {
    
   　　 speed = 5
    
 　 }else if (keyCode == LEFT_ARROW){
    　　speed = -5
    
 　 }
}

左右に自由に動くようになりました。

次はジャンプ。左右と基本は同じように作れば良いので変数を用意します。

let ySpeed = 5　　・・・　スピード
let g = -0.1　　・・・　重力的なもの

重力は常に力が作用していないといけないのでdraw()の中に書きます。

 y = y - ySpeed

ジャンプするということは上に上がってそして下がっていきます。いわゆる放物線状にならないといけません。y軸は下方向がプラスなので

  if (y <= 200){
     ySpeed = ySpeed + g
  }

として上に上がっていくとき、座標としては"-"(マイナス)となるので"+"プラスの重力をかけてやります。すると上に上がって下がっていく状態ができます。

下がりすぎを防ぐために最初、ジャンプする前の座標になるときに

  if (y >= 200){
       ySpeed = 0
        y = 200
  }

として座標を最初に戻してやります。これで上から落ちてくる時に一定のとこで止まるようになります。

全体としては、

let x = 100
let y = 200
let speed = 0
let flic = 0.1

let ySpeed = 5
let g = -0.1

function setup() {
  createCanvas(400, 400);
  
}

function draw() {
  background(220);
  line(0,250,width,250)
  rect(x,y,50,50) 
 
  x = x + speed

  y = y - ySpeed
  
  if (y <= 200){
     ySpeed = ySpeed + g
  }  
    if (y >= 200){
       ySpeed = 0
        y = 200
  }

  if (speed > 0 ){
    speed = speed - flic
    if (speed < 0.1){
      speed = 0
    }
  }
  
  if (speed < 0 ){
    speed = speed + flic
    if (speed > 0.1){
      speed = 0
    }
  }
}

function keyPressed(){
  if (keyCode == RIGHT_ARROW) {
    
    speed = 5
    
  }else if (keyCode == LEFT_ARROW){
    speed = -5
    
  }
  }

キーボードで操作。現状では上矢印を押せば上に上がり、さらに押せばもっと上がっていきます。

if (keyCode == UP_ARROW){       
       ySpeed = 5
}

少し改良し下にいる場合のみジャンプするようにします。

if (y >= 200){
　　　ySpeed = 5
}

y >= 200の条件(定位置)の場合にのみジャンプします。

if (keyCode == UP_ARROW){       
        if (y >= 200){
         ySpeed = 5
        }     
}

全体です。

let x = 100
let y = 200
let speed = 0
let flic = 0.1

let ySpeed = 0
let g = -0.1

function setup() {
  createCanvas(400, 400);
  
}

function draw() {
  background(220);
  
  line(0,250,width,250)
  rect(x,y,50,50)
  
  x = x + speed
  y = y - ySpeed
  
  if (y <= 200){
     ySpeed = ySpeed + g
  }
  
    if (y >= 200){
       ySpeed = 0
        y = 200
  }

  if (speed > 0 ){
    speed = speed - flic
    if (speed < 0.1){
      speed = 0
    }
  }
  
  if (speed < 0 ){
    speed = speed + flic
    if (speed > 0.1){
      speed = 0
    }
  }
  
}
  
  function keyPressed(){
  if (keyCode == RIGHT_ARROW) {  
      speed = 5    
     }else if (keyCode == LEFT_ARROW){
      speed = -5
     }else if (keyCode == UP_ARROW){
       
        if (y >= 200){
         ySpeed = 5
        }      
     }               
  }

参考動画　　https://www.youtube.com/watch?v=vdyapRNMFQw

この記事が気に入ったらサポートをしてみませんか？