画像表示の仕方、当たり判定 p5 js ジャンプゲーム(2)


画像表示の仕方、当たり判定 p5 js ジャンプゲーム(2)

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;

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


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

function draw() {
  background(220);
  x = x + sp;
  y = y + spy;
  //rect(x,y,s,s);
  image(img, x, y, s, s); //主人公

  //rect(tx,ty,ts,ts);
  image(img2, tx, ty, ts, ts); //敵1
  tx = tx + tsp;
  if (tx < -50) { //敵が左端に行ったら
    tx = 500; //右から出てくる
  }


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

  if (x + s > tx && x < tx + ts && y + s > ty && y < ty + ts) { //当たり判定
    
    fill(0);
    text("game over", 200, 200);
    noLoop();
  }

//右に進んでいる時
  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;
  }
}

カテゴリー: p5js

コメントを残す

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