Processingでイライラ棒
九州産業大学 理工学部情報科学科
2025年8月23日 プチオープンキャンパス
このサイトのQRコード
このサイトへのQRコード
理工学部のHP
理工学部インスタグラム
Processingをインストール
上記サイトからダウンロード出来ます。
※寄付はしなくても大丈夫です！
テンプレートプログラムを実行してみよう
テンプレートファイルをダウンロード
回答し、Processingで sketch_irairabou.pde を開く。
プログラムを実行する
Processingの三角ボタンをクリックすると、ゲーム実行！
マウスに追従して四角形が動くだけ、まだ何も起こりません。
■ボタンで終了。
ゲームのルール
- プレイヤーは黒い四角形（最初に左上にいる）、マウスの方向に向かって動く
- 白い道以外に触れたらゲームオーバー（ゲームオーバー画面に移動）
- 緑、黄色、水色、紫は例外（ギミックとして利用可能な色）
- タイマーが０になってもゲームオーバー
- 青い色の図形にプレイヤーが触れたらゲームクリア（ゲームクリア画面に移動）
- 道(白)を外れないように、動く敵(黒)を避けながらゴール(青)を目指すゲーム
ゴールまで道をつなごう
（今は当たり判定がないから自由に動けますが）
プレイヤーが通れるのは白い道だけです。
1. ゴールまで道をつなごう の箇所のプログラムを変更して、ゴール（青色）まで白い道を繋げましょう。
rect(始点x座標, 始点y座標, 横幅, 縦幅);
は、四角形を表示する命令です。
rect(200, 200, 100, 100);
だと、 横に100 縦に100の座標を始点として、幅100 高さ100の四角形を表示する。命令になります。
試しに、rect(40, 40, 20, 50); の行を、
rect(40, 40, 20, 100); に変えてみましょう。
実行すると、四角形の一つが縦に長くなっているのが分かります。
同じように、rect(60,100, 20, 100); を変えてみると、別の四角形の大きさが変わります。
青色まで白い道を繋げてみましょう。道の形は自由です。
四角形が足りなければ新しく rect の命令を作って追加してみましょう！
ゴールまで行けるか試してみよう
今は白い道以外に出てもゲームオーバーになりません。これは、当たり判定のプログラムを実行しないようにしているためです。
boolean debugMode = true; のプログラムを探して、
boolean debugMode = false; と書き換えましょう。
道を出るとゲームオーバーになります。ゴールまでたどり着けるか試してみましょう。
ゲームオーバーまでの時間を変更しよう
ゲームオーバーになる時間は、
int time = 200; で設定しています。
時間が足りなければ、この数値を大きくして時間に余裕をもたせましょう。
道を調整しよう
道の位置や形を変えたり、四角形を増やして曲がり角を作ったりして、もう少し道を作り込んでみましょう。
じっくり道の形を考えたいときは、debugMode = true; にしておくと、ゲームオーバーにならないので便利です。
敵（動く四角形）の調整をしてみよう
左右と上下に往復している黒い丸は敵キャラクターです。白い道ではないので、これに当たってもゲームオーバーになります。
敵のプログラムは、このプログラムと
このプログラムです。
enemy1 が 1体目の敵（左右に動いている）、 enemy2が2体目のプログラム（上下に動いている）です。
まず、 enemy1が動く範囲を変更してみましょう。
if (enemy1.x >= 150 || enemy1.x <= 100) {
enemy1.vx *= -1;
}
このプログラムは、「もしも、 enemy1のxが150以上 または enemy2のxが100以下の場合に」
enemy1のx方向の移動速度を反転する（逆に動くようにする）プログラムです。
150 と 100 の値を変更すると、動く範囲を変えることが出来ます。
合わせて、 enemy1.x を 変更した範囲内に収まるように修正しましょう。
enemy1.y は敵が往復する高さです。これも道に合わせて変更してみましょう。
これで、1体目の敵の動く範囲を変えることが出来ます。
自分の道の位置に合わせて、敵の動く範囲を調整してみましょう。
2体目の敵の動く範囲も変更してみよう
enemy2 のプログラムは、enemy1と違って上下移動になっています。
左右(x)と上下(y)の違いに注意しながら、 enemy2 の移動範囲も調整してみましょう。
敵を増やす
敵を増やすときは、まず 敵用の変数を増やします。（変数は値を格納しておく入れ物のこと、何かを動かす場合にはまず変数を作る必要がある。）
Enemy enemy3 = new Enemy(); のプログラムを追加して、 ３体目の敵を作ります。
次に、初期値を設定しましょう。
enemy2.y = …
の下に enemy3のx座標とy座標の初期値を代入（変数に値を格納すること）して、敵が最初に出現する場所を決めます。
下記の画像でハイライトされている部分を選択して、プログラムをコピー
下の行に貼り付けます。
2 を 3 に書き換えて、動く範囲を調整すれば敵を増やすことが出来ます。
(たくさん書き換える箇所があるので、間違えないように気をつけましょう）
その他のギミック
余裕があったら、他のギミックを追加してみましょう。
最初からいる 緑色の四角形はスイッチの役割を持っています。
緑色の四角形に当たると、 (300, 250) の位置にいる黒い四角形が消えます。（当たると道が開くギミック）
下記のプログラムの値を変えて、緑の四角形や黒の四角形の位置を調整してみましょう。
別のスイッチとドアを作りたければ、黄色、水色、紫色を使えます。
黄色のスイッチを新しく作る場合には、このようなプログラムを書きます。
if(switch2 == false) { の行が赤波下線になっていますね。これは、 switch2 なんて変数はないよ！というエラーが出ているためです。
変数 switch2 を新しく作ってあげましょう。
色を決めているプログラム ( fill(255, 255, 0 ); ) は必ずこの数値にしてください。
今回のプログラムでは、色による当たり判定を行っていて、この数値の色でなければ当たり判定が正常に行われません。
自由にゲームを改善していこう！
白い道を複雑にして迷路のようにする
動く敵を増やす
スイッチを使ったギミックを増やす
自由にプログラムを変更して、追加して、ゲームを面白くしてみましょう！