JavaScriptで跳ね返り！

ゲームなんかで画面を作ってその中でプレイする場合に使う技術です。画面から出ないように条件をつけて進む方向を変えてやります（跳ね返り）。

p5jsを使うと最初からある程度完成されているので跳ね返りも理解が進む気がします。

p5.js Web Editor

このエディタを使って試していきます。

x座標のみ使って動かすので

let x = 0; 

そして動きの方向と力を

let vel = 0

として、初期のセットアップ。描画領域を400*400として動きは"1"としています。

function setup() {
  createCanvas(400, 400);
  vel = 1 ; 
}

とします。実際に動かす命令は

function draw() {
　　　　処理
}

で決めていきます。

function draw() { 
  background(255);   
  fill(255);
  ellipse(x, height/2, 30, 30); 

  x = x + vel; 
    
  if(x > width || x < 0){ 
    vel = -vel; 
  } 
}

background(255);　　・・・　背景色
fill(255);　　・・・　マルの中の色
ellipse(x, height/2, 30, 30);　・・・　(x座標,y座標,半径(x方向),半径(y方向))

x = x + vel;　　・・・　velの加算分だけ動く

if(x > width || x < 0){　　　　・・・　端にぶつかったら
　　vel = -vel;　　　　　　   ・・・　方向を反転
}

全体のコードになります。p5jsエディタに貼り付けて実行すると動きます。

let x = 0; 
let vel = 0

function setup() {
  createCanvas(400, 400);
  vel = 1 ; 
}

function draw() {
 background(255); 
  
  x = x + vel; 
  
  fill(255);
  ellipse(x, height/2, 30, 30); 
  
  if(x > width || x < 0){ 
    vel = -vel; 
  } 

}

仕組みがわかれば、y方向の動きも今あるx方向と同じように追加してやれば動きが複雑になります。

例えば

let x = 0;
let y = 0
let velx = 0
let vely = 0

function setup() {
  createCanvas(400, 400);
  velx = 1 ; 
  vely = 2 ; 
}

function draw() {
 background(255); 
  
  x = x + velx; 
  y = y + vely; 
  
  fill(255);
  ellipse(x, y, 30, 30); 
  
  if(x > width || x < 0){ 
    velx = -velx; 
  } 
   if(y > height || y < 0){ 
    vely = -vely; 
  } 

}

とすると斜め方向にボールは進むようになります。velx とvelyの値を変えてやると角度、スピードが変わるのでいろいろ試すと面白いかも。