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

アドベンチャーゲーム

始める前に

今回作るもの

この教材を終えると、このようなアドベンチャーゲームが作れるよ！

img02.png

対象者

  • 「配列」を勉強しようとしている人

必要な知識

  • 変数
  • 条件分岐
  • テキストの表示
  • 画像の表示

約束事

コピペ禁止！書こう。

では開始！

まずは基本の型

もうこれくらい見なくても書けるよね？

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

「こんにちは」と表示しよう

text()という命令を使うよ。

img01.png

void setup(){
  size(600, 400);
}
void draw(){
  background(255);
  fill(0);
  text("こんにちは", 100, 100);
}

「こんにちは」を変数にしておこう

変数はわかるかな？

String message01 = "こんにちは";
void setup(){
  size(600, 400);
}
void draw(){
  background(255);
  fill(0);
  text(message01, 100, 100);
}

画面をクリックしたら「こんばんは」に変わるようにしよう

答えを見ないで、自分で考えてみよう。ヒントは条件分岐だよ。

String message01 = "こんにちは";
String message02 = "こんばんは";
void setup(){
  size(600, 400);
}
void draw(){
  background(255);
  fill(0);
  text(message01, 100, 100);
}
void mousePressed(){
  // 画面をクリックしたら「こんばんは」を表示させたい。どうしようか？
}

（答え）こんな感じのプログラムになったかな？

全く同じじゃなくてもいいよ。

String message01 = "こんにちは";
String message02 = "こんばんは";
int bango = 0; // bangoという変数を追加
void setup(){
  size(600, 400);
}
void draw(){
  background(255);
  fill(0);
  // bangoの数値で条件分岐
  if(bango == 0){
    text(message01, 100, 100);
  }
  if(bango == 1){
    text(message02, 100, 100);
  }
}
void mousePressed(){
  bango = 1; // クリックされたらbangoを1にする
}

次は3つ目のメッセージ「さようなら」を表示させよう

さ、もう一度復習。メッセージを1つ追加するよ。

String message03 = "さようなら";
// さあ後は自分でできるかな？

じゃあ今度は「おはよう」「おやすみ」を追加しよう！・・・え？めんどくさい？

ね。めんどくさいよね。たくさんの条件分岐が必要になっちゃう。 実は「配列」を使うと簡単になるんだ。 配列はたくさんの変数が入る、スーパーな変数だよ。

String[] messageList = new String[5]; // 5個の変数が入るぜ！という宣言
int bango = 0;
void setup(){
  size(600, 400);
  // 5個の変数は、0〜4という番号が振られているよ。
  messageList[0] = "こんにちは";
  messageList[1] = "こんばんは";
  messageList[2] = "さようなら";
  messageList[3] = "おはよう";
  messageList[4] = "おやすみ";
}
void draw(){
  background(255);
  fill(0);
  text(messageList[bango], 100, 100);
}
void mousePressed(){
  bango += 1;
}

エラーを回避しよう

きっと、「おやすみ」の後にクリックしたら赤い文字のエラーが出たんじゃないかな？ なぜだかわかるかな？

ヒント：messageList[5]、つまり6番目の変数は存在しないよね。

void mousePressed(){
  bango += 1;
  // ここにエラーを回避するプログラムを書いてみよう
}

エラーの回避方法はわかったかな？

じゃあ、もう一つ「いただきます」を追加してみよう。

// 自分でやってみよう

じゃあ、もう二つ「おいしい」「もぐもぐ」を追加・・・え？めんどくさいって？

メッセージを増やす度に、修正しないといけない箇所が複数できてしまうのはめんどくさいよね。 こういう書き方にすることで、メッセージを増やしても修正しなくてよくなるぞ！

// いちいち番号を振らなくてもこうやって一括で設定できる
String[] messageList = new String[]{
  "こんにちは", "こんばんは", "さようなら", "おはよう", "おやすみ",
  "いただきます", "おいしい", "もぐもぐ"
};
int bango = 0;
void setup(){
  size(600, 400);
}
void draw(){
  background(255);
  fill(0);
  text(messageList[bango], 100, 100);
}
void mousePressed(){
  bango += 1;
  // メッセージの数が取得できるよ。
  int messageCount = messageList.length;
  if(bango == messageCount){
    bango = messageCount - 1;
  }
}

ここからは自由創作！

メッセージを自由に編集してみよう

どれだけメッセージの数を増やしても、動作することを確認してね。

String[] messageList = new String[]{
  // きみのオリジナルストーリーを考えてみよう
};

画面を装飾してみよう

このチュートリアルを作った先生はRPGが好きなので、RPGっぽい感じにしてみたよ。サンプルコードも載せておくね。

img02.png

String[] messageList = new String[]{
  "モンスターが現れた！",
  "勇者の攻撃！10のダメージ！",
  "モンスターの攻撃！勇者に3のダメージ！",
  "勇者の攻撃！会心の一撃！",
  "モンスターに999のダメージ！モンスターを倒した！",
};
int bango = 0;
PImage monster;
void setup(){
  size(600, 400);
  monster = loadImage("monster.png");
}
void draw(){
  background(0);


  imageMode(CENTER);
  image(monster, 300, 100);


  rectMode(CENTER);
  stroke(255);
  fill(0);
  rect(300, 300, 500, 150);


  fill(255);
  text(messageList[bango], 100, 300);
}
void mousePressed(){
  bango += 1;
  int messageCount = messageList.length;
  if(bango == messageCount){
    bango = messageCount - 1;
  }
}

BGMを追加してみよう

一気にゲームっぽくなるぞ。どこからBGMを探したら良いかは先生に相談してみよう。

import ddf.minim.*;
void setup(){
  size(600, 400);
  new Minim(this).loadFile("bgm.mp3").play();
}

背景やキャラクターなどどんどん追加して、見た目を強化しよう！

後は君のセンス次第だ！ どうしたらかっこよく、かわいくなるか、考えたり、周りの人に相談したりしてみよう。 完成したら色んな人に見せてみよう！