前回作ったキーボードの矢印で動く四角にもう一つ四角を追加し、２つの物体を表示してみます。

let sprite;
let sprite2;

と変数も追加し、

    sprite = new Sprite(width/2-100, height/2);
    sprite.width = 50;
    sprite.height = 50;
    sprite.color = 'orange';
  
    sprite2 = new Sprite(width/2+100, height/2);
    sprite2.width = 50;
    sprite2.height = 50;
    sprite2.color = '#00BCD4';

スプライトも色だけ変えたものを作ります。オレンジの四角と青い四角が表示されます。

操作できるオレンジの四角を動かして青い四角にぶつけてみると、ブルーの四角は押されて動き始め枠外へと出てしまいます。

新しくスプライトを作った時にすでに物体としての認識がされていることになります。

物理演算

ゲームなどでは衝突判定として2つの物体が重なる時に何かしらアクションをつけるこがあります。

p5playでは2つの方法があり、

collides

  sprite.collides(sprite2, (a, b)=>{
		b.remove();// 敵を消す
	});

"sprite"が"sprite2"に触れたら"sprite2"は消えます。

overlap

 sprite.overLap(sprite2, (a, b)=>{
		b.remove();// 敵を消す
	});

同じく、"sprite"が"sprite2"に触れたら"sprite2"は消えます。

これをそれぞれ実行してやるとオレンジの四角を動かして青色の四角に触れた、重なった瞬間、青色の四角が消えます。

collides、overlapの命令を使うといわゆる衝突判定した時に何かを実行できるようになります。

全体です。

let sprite;
let sprite2;

function setup() {
    new Canvas(500, 500);
  
    sprite = new Sprite(width/2-100, height/2);
    sprite.width = 50;
    sprite.height = 50;
    sprite.color = 'orange';
  
    sprite2 = new Sprite(width/2+100, height/2);
    sprite2.width = 50;
    sprite2.height = 50;
    sprite2.color = '#00BCD4';
}

function draw() {
  background(220);
  
   sprite.overlap(sprite2, (a, b)=>{
		b.remove();// 敵を消す
	});
  
   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);
	}
}