クラスを使って敵をたくさんだしてみます。p5 js ジャンプゲーム(3)



P5jsで【class】を使う方法を紹介しています。

let x = 100;
let y = 200;
let s = 50;
let sp = 0;
let spy = 0;
let friction = 0.1;
let g = 0.1;

/*
let tx = 270;
let ty = 200;
let ts = 50;
let tsp = -1;
*/
let img;
let img2;

let teki1,teki2,teki3;

function preload() {
  img = loadImage("Knight.png");
  img2 = loadImage("Butterfly2-b.png");
}


function setup() {
  createCanvas(400, 400);
  teki1 = new Teki(270, 200, 50, -1);
   teki2 = new Teki(370, 200, 50, -1);
   teki3 = new Teki(470, 200, 50, -1);
}

function draw() {
  background(220);
  x = x + sp;
  y = y + spy;
  //rect(x,y,s,s);
  image(img, x, y, s, s); //主人公
  teki1.display();
  teki1.move();
  teki1.hit();
  
  teki2.display();
  teki2.move();
  teki2.hit();
  
  teki3.display();
  teki3.move();
  teki3.hit();


  line(0, 250, width, 250); //地面

  //右に進んでいる時
  if (sp > 0) {
    sp = sp - friction;
    if (sp < 0.1) {
      sp = 0;
    }
  }
  //左に進んでいる時
  if (sp < 0) {
    sp = sp + friction;
    if (sp > -0.1) {
      sp = 0;
    }
  }
  //地面についた時
  if (y < 200) {
    spy = spy + g;
  }
  //ジャンプしている時
  if (y > 200) {
    spy = 0;
    y = 200;
  }

}

function keyPressed() {
  if (keyCode == RIGHT_ARROW) {
    sp = 5;
  } else if (keyCode == LEFT_ARROW) {
    sp = -5;
  } else if (keyCode == UP_ARROW) {
    spy = -5;
  }
}


Teki class

class Teki {
  constructor(tx, ty, ts, tsp) {
    this.tx = tx;
    this.ty = ty;
    this.ts = ts;
    this.tsp = tsp;
  }
  display() {
    image(img2, this.tx, this.ty, this.ts, this.ts); //敵1
  }
  move() {
    this.tx = this.tx + this.tsp;
    if (this.tx < -50) {
      this.tx = 500;
    }
  }
  hit() {
    if (x + s > this.tx && x < this.tx + this.ts && y + s > this.ty && y < this.ty + this.ts) { //当たり判定
      if (y + s < this.ty + 10) { //自分の足が敵の高さから10下がったところまでに触れた時
        this.tx = 600;
        spy = -5;
      } else {

        fill(0);
        text("game over", 200, 200);
        noLoop();
      }
    }
  }

}

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です