こんにちは、コーダー道場神山の本橋です！

10月のコーダー道場神山では、ChatGPTと話しながら「太鼓の達人風ゲーム」を作ったり、AからZまでタイプして遊ぶゲームをしたり、いつものようにswitchでゲームしてたり、という光景が見られました。

僕は主にChatGPTとお話しながらのゲーム作りに挑戦していました。コードは全く書かないまま、結構ゲームになる要素が揃いました。

でも『気持ちよさ』の部分が難しいので、人に遊んでもらうゲームを作るにはこんな要素が足りないな、というのがよく理解できた時間となりました。

タイミングの達人

太鼓の達人風のゲーム、『タイミングの達人』はこんなゲーム画面です。

左のグレーゾーンに向かって移動していく赤い丸に合わせてスペースキーを連打するゲームです。

タイトル画面、ゲームプレイ画面、スコア表示画面、という画面遷移を実装できたことが今回の個人的な成功体験です。AIにお願いするだけでここまで作れるんだ！　というのが衝撃でした。

出来上がったゲーム『タイミングの達人』

実際のゲームはこちらから遊べます。『タイミングの達人』と題しました。右から移動してくる赤い丸が、グレーのエリアに入った瞬間にスペースキーを押してください。

スペースキーを押すタイミングが正しければ画面が白くひかり、"+1"と表示されます。悪ければ画面が赤く光って"-1"と表示されます。

30秒経過でゲームが終わり、その時点の獲得スコアが表示されます。

次はChatGPTが書いてくれたゲームのソースコード部分について見ていきましょう。

ChatGPTとの対話

⇧のリンクを辿るとChatGPTとの会話ログを見ることができます。

こんな会話だけでゲームのベースとなるプログラムが作成されたのはニンジャたちにとってもなかなか衝撃的な体験だったようです。でも今回は僕が勝手に進めてしまっていたので、もしかしたらよく分かっていなかったかも？

次回はぜひ、一緒にChatGPTと対話しながら作っていく過程を楽しんでもらいたいと思います。

実際のコードも貼り付けておきます。

let circles = [];
let circleSpeed = 5;
let isWhiteFlashing = false;
let isRedFlashing = false;
let score = 0;
let displayScore = "";
let gameStarted = false;
let gameEnded = false;
let gameEndTime = 30000; // 30 seconds in milliseconds
let disableInput = false;

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

function initiateGame() {
  circles = [];
  score = 0;
  // Set a random number of circles between 3 and 8
  numCircles = floor(random(3, 9));

  for (let i = 0; i < numCircles; i++) {
    circles.push({
      x: width + i * (width / numCircles), // Adjust spacing based on the number of circles
      y: height / 2
    });
  }
}

function draw() {
  background(220);

  // Draw box
  fill(150);
  rect(0, 0, 100, height);

  if (gameStarted) {
    // Draw moving circles
    for (let circle of circles) {
      fill(255, 0, 0);
      ellipse(circle.x, circle.y, 50);
      circle.x -= circleSpeed;

      // If the circle is out of the canvas, reset its position
      if (circle.x < -25) {
        circle.x = width + 25;
      }
    }

    // Flashing effects
    if (isWhiteFlashing) {
      background(255);
    } else if (isRedFlashing) {
      background(255, 0, 0);
    }

    // Display the temporary score (+1 or -1)
    fill(0);
    textSize(32);
    textAlign(CENTER, CENTER);
    text(displayScore, width / 2, height / 2);

    // Display the current score at top right
    textAlign(RIGHT, TOP);
    text("Score: " + score, width - 10, 10);
  } else if (gameEnded) {
    fill(0);
    textSize(48);
    textAlign(CENTER, CENTER);
    text("Score: " + score, width / 2, height / 2 - 20);
    textSize(32);
    text("Press SPACE to restart", width / 2, height / 2 + 40);
  } else {
    fill(0);
    textSize(32);
    textAlign(CENTER, CENTER);
    text("Press SPACE to start", width / 2, height / 2);
  }
}

function keyPressed() {
  if (disableInput) {
    return;
  }

  if (key == ' ' && !gameStarted && !gameEnded) {
    gameStarted = true;
    setTimeout(() => {
      gameStarted = false;
      gameEnded = true;
      disableInput = true;
      setTimeout(() => {
        disableInput = false;
      }, 5000);  // Disable input for 5 seconds
    }, gameEndTime);
    return;
  } else if (key == ' ' && gameEnded) {
    gameEnded = false;
    initiateGame();
    return;
  }

  if (gameStarted) {
    let isOverlapping = false;
    for (let circle of circles) {
      if (circle.x <= 100 && circle.x >= 50) {
        isOverlapping = true;
        break;
      }
    }

    if (isOverlapping) {
      isWhiteFlashing = true;
      setTimeout(() => {
        isWhiteFlashing = false;
      }, 100);
      score += 1;
      displayScore = "+1";
      setTimeout(() => {
        displayScore = "";
      }, 1000);
    } else {
      isRedFlashing = true;
      setTimeout(() => {
        isRedFlashing = false;
      }, 100);
      score -= 1;
      displayScore = "-1";
      setTimeout(() => {
        displayScore = "";
      }, 1000);
    }
  }
}

キープレスイベントの判定と、フラグによるゲームの進行管理をする設計になっていますね。ティンカリングして遊ぶベースとしては申し分ない、わかりやすいコードになっているとも思います。

ChatGPTはプログラミング学習に最適？

ChatGPTでこうして遊んでいるとプログラミングの速習にこれほど好適なツールは他にないのでは、と思わせてくれます。

『こんなふうに書き換えて！』と伝えるだけでコードを書き換えてくれますし、『変更部分をピックアップして教えて』といえば詳しく解説してくれます。

『プログラミングを学びたい』という要望が投げかけられたら、僕はもうほかの選択肢は無くChatGPTとのペアプロミングを提案するかと思います。入門者が学ぶのにこれ以上ないよくできた環境です。

その入門のスタートラインに並ぶ事自体がハードルが高い可能性もあります。小学校低学年の参加者が多いコーダー道場神山なので、遊びやゲームでコンピューターに触れる機会も提供しています。

IchigoJamでAからZまで順番にタイプして遊ぶ

小さなパソコン『IchigoJam』に興味を示したニンジャがいたので、AからZまで順番に探してごらんとそそのかして遊ばせてみました。そこそこ楽しんで取り組んでいたようです。

僕も小学生の頃に、覚えたばかりのアルファベットをA～Zまで叩いて遊んでいたことを思い出しました。タイムアタック化すると結構盛り上がるんです。

キーボードの付いているコンピューターならなんでもできる遊びなので大人の方もぜひ子供たちと対戦してみてください！

みんな大好きスイカゲーム

switch版のスイカゲームを持ち込んで遊んでいるニンジャがいました。

スイカゲームが話題になっていることは知ってましたが遊んでなかったので、ここで教えてもらって僕のSwitchにもインストールしています。

ローグライクゲームと同じヤバさを感じたのでほどほどにしておきます…

Scratchで遊ぶ

こちらはScratchで公開しているゲームで遊ぶ、というのもいつもの光景です。

毎回違うゲームで盛り上がっていて、どこで見つけてくるのか今度聞いてみたいと思います。彼らなりの情報源があるはず。

せっかくのScratchなので、どこかで『ゲームをいじって遊ぶ』も体験させてみたいですね。僕がプログラミングという遊びを知ったキッカケもそれでした。

次回のコーダー道場神山

11月のコーダー道場神山では、毎年恒例！　クリスマスに向けた3Dプリンタによるオーナメント作成をやりたいと思っています。

いつも12月にやっていましたが、その場でプリントしないでも間に合わせられるように今年は11月にオーナメント作りをして、12月には作ったオーナメントをプリントしてお渡ししたいと思います！