コンテンツにスキップ
プログラミング教材

HPがあるシューティング

0. つくるもの

img01.png

HPをもった大ボスを倒すシューティングです。

1. プレイヤーを動かそう

まずはお決まり

void setup(){
  size(600, 400);
}
void draw(){
  background(0);
}

プレイヤーを表示

よこ 100 たて 200 の位置に、30の大きさの四角形を表示するぞ。

void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  // ここ！
  rect(100, 200, 30, 30);
}

プレイヤーの位置を変数にする

よこ 100 たて 200 この位置情報を変数にしよう。

変数名は、「プレイヤーのx」「プレイヤーのy」ということで、 pxとpyにするぞ。

// 変数をつくった！
float px = 100;
float py = 200;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  // 変数を使って四角形を表示！
  rect(px, py, 30, 30);
}

マウスでプレイヤーを動かす

mouseX mouseY でマウスの位置情報が取れるんだ。

float px = 100;
float py = 200;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);
  px = mouseX;
  py = mouseY;
  rect(px, py, 30, 30);
}

2. 弾丸を発射しよう

弾丸を表示

とりあえず表示だけ。 よこ 200 たて 300 の位置に大きさ10の四角形を表示しよう。

float px;
float py;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);


  // 弾丸を表示！
  rect(200, 300, 10, 10);


  px = mouseX;
  py = mouseY;
  rect(px, py, 30, 30);
}

弾丸の位置情報を変数にしよう

ここでは「ダンガンのx」「ダンガンのy」ということでdxとdyという変数を使うよ。

float px;
float py;


// 弾丸の変数
float dx = 200;
float dy = 300;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);


  // 弾丸を変数を使って表示！
  rect(dx, dy, 10, 10);


  px = mouseX;
  py = mouseY;
  rect(px, py, 30, 30);
}

弾丸を上に飛ばそう

上に飛ばすということは、たての位置が小さくなるということ。 dyを少しずつ小さくすれば上に飛んでいくぞ！

float px;
float py;


// 弾丸の変数
float dx = 200;
float dy = 300;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);


  // 弾丸のyを少しずつ小さく
  dy = dy - 1;
  rect(dx, dy, 10, 10);


  px = mouseX;
  py = mouseY;
  rect(px, py, 30, 30);
}

弾丸のスピードをアップしよう

スピードが遅いですね。速くしましょう。 スピードも変数にしましょう。「ダンガンのスピード」でdsという変数にしました。

float px;
float py;


// 弾丸の変数
float dx = 200;
float dy = 300;
float ds = 5;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);


  // 弾丸のyをds分ずつ小さく
  dy = dy - ds;
  rect(dx, dy, 10, 10);


  px = mouseX;
  py = mouseY;
  rect(px, py, 30, 30);
}

弾丸を何度も発射できるようにしよう

画面の上までいったら、画面の下からまた出てくるようにするぞ。

float px;
float py;


float dx = 200;
float dy = 300;
float ds = 5;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);


  dy = dy - ds;
  // もし弾丸のyが0より小さくなったら
  if(dy < 0){
    // 画面の下である400に変数の中身を変更
    dy = 400;
  }
  rect(dx, dy, 10, 10);


  px = mouseX;
  py = mouseY;
  rect(px, py, 30, 30);
}

プレイヤーの位置から弾丸を打つようにしよう

float px;
float py;


// 弾丸の位置情報をゼロにした
float dx = 0;
float dy = 0;
float ds = 5;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);


  dy = dy - ds;
  if(dy < 0){
    // 弾丸の位置を、プレイヤーの位置と同じにした！
    dx = px;
    dy = py;
  }
  rect(dx, dy, 10, 10);


  px = mouseX;
  py = mouseY;
  rect(px, py, 30, 30);
}

3. 敵を出現させよう

敵を表示

よこ 300 たて 50 の位置に敵となる四角形を表示。

float px;
float py;


float dx;
float dy;
float ds = 5;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);


  dy -= ds;
  if(dy < 0){
    dx = px;
    dy = py;
  }
  rect(dx, dy, 10, 10);


  // 敵を表示
  rect(300, 50, 100, 100);


  px = mouseX;
  py = mouseY;
  rect(px, py, 30, 30);
}

敵の位置を変数にする

「エネミー（敵）のxとy」ということでexとeyという変数名にするぞ。

float px;
float py;


float dx;
float dy;
float ds = 5;


// 敵の位置情報
float ex = 300;
float ey = 50;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);


  dy -= ds;
  if(dy < 0){
    dx = px;
    dy = py;
  }
  rect(dx, dy, 10, 10);


  // 変数を使って敵を表示！
  rect(ex, ey, 100, 100);


  px = mouseX;
  py = mouseY;
  rect(px, py, 30, 30);
}

敵を動かそう

敵のスピードを変数esにして動かすぞ。

float px;
float py;


float dx;
float dy;
float ds = 5;


float ex = 300;
float ey = 50;
float es = 1;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);


  dy -= ds;
  if(dy < 0){
    dx = px;
    dy = py;
  }
  rect(dx, dy, 10, 10);


  // 敵のxを敵のスピード分プラス
  ex += es;
  rect(ex, ey, 100, 100);


  px = mouseX;
  py = mouseY;
  rect(px, py, 30, 30);
}

敵が往復移動するようにしよう

画面のはじまでいったら、敵のスピードをプラスマイナスを逆転させるんだ。

float px;
float py;


float dx;
float dy;
float ds = 5;


// 敵の位置情報
float ex = 300;
float ey = 50;
float es = 1;
void setup(){
  size(600, 400);
}
void draw(){
  background(0);


  dy -= ds;
  if(dy < 0){
    dx = px;
    dy = py;
  }
  rect(dx, dy, 10, 10);


  ex += es;
  // xが0より小さくなったら。あるいは、画面の横はばより大きくなったら
  if(ex < 0 || ex > width){
    // スピードをプラスマイナス逆転。-1をかけると逆転するぞ。
    es *= -1;
  }
  rect(ex, ey, 100, 100);


  px = mouseX;
  py = mouseY;
  rect(px, py, 30, 30);
}

4. 敵と弾丸の当たり判定をしよう

当たり判定のisHit関数

当たり判定は難しいので、こちらで用意したisHit関数を使おう。

int isHit(float x, float y, float w, float h, float ex, float ey, float ew, float eh){
  if(x < ex + ew && x + w > ex){
    if(y < ey + eh && y + h > ey){
      return 1;
    }
  }
  return 0;
}

敵に当たったら敵を赤色にしよう

敵のHP、ehpを100で変数にしておくよ。

float px;
float py;


float dx;
float dy;
float ds = 5;


float ex = 300;
float ey = 50;
float es = 1;


// 敵のヒットポイント
float ehp = 100;


void setup(){
  size(600, 400);
}


void draw(){
  background(0);


  dy -= ds;
  if(dy < 0){
    dx = px;
    dy = py;
  }
  // フィルを追加！
  fill(255);
  rect(dx, dy, 10, 10);


  // 敵との当たり判定
  fill(255);
  int hit = isHit(dx, dy, 10, 10, ex, ey, 100, 100);
  if(hit == 1){
    fill(255, 0, 0);
  }
  ex += es;
  if(ex < 0 || ex > width){
    es *= -1;
  }
  rect(ex, ey, 100, 100);


  px = mouseX;
  py = mouseY;
  // フィルを追加！
  fill(255);
  rect(px, py, 30, 30);
}


int isHit(float x, float y, float w, float h, float ex, float ey, float ew, float eh){
  if(x < ex + ew && x + w > ex){
    if(y < ey + eh && y + h > ey){
      return 1;
    }
  }
  return 0;
}

銃弾が敵に当たったら、銃弾を新しく発射しよう

float px;
float py;


float dx;
float dy;
float ds = 5;


float ex = 300;
float ey = 50;
float es = 1;


// 敵のヒットポイント
float ehp = 100;


void setup(){
  size(600, 400);
}


void draw(){
  background(0);


  dy -= ds;
  if(dy < 0){
    dx = px;
    dy = py;
  }
  // フィルを追加！
  fill(255);
  rect(dx, dy, 10, 10);


  // 敵との当たり判定
  fill(255);
  int hit = isHit(dx, dy, 10, 10, ex, ey, 100, 100);
  if(hit == 1){
    fill(255, 0, 0);
    dx = px;
    dy = py;
  }
  ex += es;
  if(ex < 0 || ex > width){
    es *= -1;
  }
  rect(ex, ey, 100, 100);


  px = mouseX;
  py = mouseY;
  // フィルを追加！
  fill(255);
  rect(px, py, 30, 30);
}


int isHit(float x, float y, float w, float h, float ex, float ey, float ew, float eh){
  if(x < ex + ew && x + w > ex){
    if(y < ey + eh && y + h > ey){
      return 1;
    }
  }
  return 0;
}

5. 敵にHPを持たせよう

敵のHP変数を作る

敵のHP、ehpを作るよ。

float px;
float py;


float dx;
float dy;
float ds = 5;


float ex = 300;
float ey = 50;
float es = 1;


// 敵のヒットポイント
float ehp = 100;


void setup(){
  size(600, 400);
}


void draw(){
  background(0);


  dy -= ds;
  if(dy < 0){
    dx = px;
    dy = py;
  }
  fill(255);
  rect(dx, dy, 10, 10);


  int hit = isHit(dx, dy, 10, 10, ex, ey, 100, 100);
  if(hit == 1){
    // 敵のHPを1つ減らす！
    ehp -= 1;
    dx = px;
    dy = py;
  }
  ex += es;
  if(ex < 0 || ex > width - 100){
    es *= -1;
  }
  fill(255);
  rect(ex, ey, 100, 100);


  px = mouseX;
  py = mouseY;
  fill(255);
  rect(px, py, 30, 30);
}


int isHit(float x, float y, float w, float h, float ex, float ey, float ew, float eh){
  if(x < ex + ew && x + w > ex){
    if(y < ey + eh && y + h > ey){
      return 1;
    }
  }
  return 0;
}

HPメーターを作ろう

敵があとどれぐらいで倒せるのか、わかりやすいようにメーターにしよう。

float px;
float py;


float dx;
float dy;
float ds = 5;


float ex = 300;
float ey = 50;
float es = 1;
float ehp = 100;


void setup(){
  size(600, 400);
}


void draw(){
  background(0);


  dy -= ds;
  if(dy < 0){
    dx = px;
    dy = py;
  }
  fill(255);
  rect(dx, dy, 10, 10);


  int hit = isHit(dx, dy, 10, 10, ex, ey, 100, 100);
  if(hit == 1){
    ehp -= 1;
    dx = px;
    dy = py;
  }
  ex += es;
  if(ex < 0 || ex > width - 100){
    es *= -1;
  }
  fill(255);
  rect(ex, ey, 100, 100);


  // 敵のHPメーター裏側
  fill(255);
  rect(ex, ey - 30, 100, 20);
  fill(255, 0, 0);
  // 敵のHPメーター表側。最大横幅100に対して、HPの残量パーセンテージをかける。
  rect(ex, ey - 30, 100 * ehp / 100, 20);


  px = mouseX;
  py = mouseY;
  fill(255);
  rect(px, py, 30, 30);
}


int isHit(float x, float y, float w, float h, float ex, float ey, float ew, float eh){
  if(x < ex + ew && x + w > ex){
    if(y < ey + eh && y + h > ey){
      return 1;
    }
  }
  return 0;
}

6. 後は自由にせよ。