本記事は、めんどい太郎の Advent Calendar 2023 20日目の記事です。

はじめに

この記事は初心者が書いています。

今回はp5.jsで無理やり実装なじゃんけんゲームを作成しましたのでご紹介します。

p5.jsとは

まずそもそもp5.jsとはなにかです。

p5.jsというのはJavaのProcessingというライブラリをJavaScriptでも使えるようにするというライブラリです。

私はこのライブラリを使うと簡単にグラフィックが扱えると考えています。

p5.jsについては完全なにわかです。ほぼ理解していません。

じゃんけんゲーム

それでは早速じゃんけんゲームをご紹介します。

まぁとりあえず、実際にプレイしてみてください。

はい。ただじゃんけんするだけです。

それではクソゲーポイント。

クソゲーポイント

疑似乱数をそのまま使っている

プログラミング言語のランダム関数は大抵疑似乱数です。

このプログラムではじゃんけんで何を出すかをMath.random()関数で決めています。

Math.random() 関数は、 0 以上 1 未満 (0 は含むが、 1 は含まない) の範囲で浮動小数点の擬似乱数を返します。
mdn web docs

ということで、ドキュメントにもばっちり疑似乱数と書かれています。

そのため実際にプレイしていると気づくと思いますが出す手に偏りがあります。

まぁしょうがない。

スマホ非対応

この記事をスマートフォンで見ていた方、すみませんでした。このゲームはスマホ非対応です。

というか元々このゲームはPCでのみプレイされる予定でしたのでわざわざ対応させる必要がありません。

手が絵文字

手は絵文字を用いているので端末によっては正しく表示されないです。

フォントにもよりますし。

テキストがてきとう

テキストがてきとうすぎます。

負けたときには「お前の負け」なんて表示されます。

口が悪い。

無理やり実装

そうです。このゲームは無理やり実装でできています。

1年以上前に3日ほどで無理やり完成させたこのゲーム、無理やり実装なため今どんなふうに書かれているのか解析するのは非常に面倒です。

いわゆるクソコードの嵐。

もう何がなんだかわかりません。

p5.jsには便利なライブラリであるp5.playというものが存在するのですが当時の私は存在すら知らなかったので無理やり実装で構築されています。

ひどいところを一つ見てみましょう。

function draw() {
  if(s == "ope") {
    // オープニング描写
    background('#4169e1');
    textSize(100);
    textAlign(CENTER);
    text('じゃんけん', 600, 200);
    textSize(50);
    text('Please Press Enter Key', 600, 500);
    // キー入力判定(スタート)
    if(keyIsDown(ENTER)) {
      start();
    }
  }
  if(s == "start") {
    // 開始処理
  }
}

ここでひどいポイントがいくつかあります。

まずテキストの表示位置が固定です。

そう。解像度が変わるとレイアウトが崩れたり、画面外だったりします。

さらに、draw()内にてkeyIsDownでキー入力を受け付けています。

そのせいか画面がチカチカします。

目に悪いです。

そもそも

そもそもじゃんけんゲームなんてのはプログラムのデモとかで作られそうなゲームです。

遊んだって別に楽しくありません。

出す手に偏りがあればなおさら。

終わりに

今回は、p5.jsでじゃんけんゲームを作ったよという話でした。

部活の活動の一つで作ったのですが、他の方のゲームのクオリティが高くなんとも言えない気持ちになったことを覚えています。

ゲームは遊ぶ側も作る側もセンスが大事ですね...

私は遊ぶのも作るのも下手なので...