AIと作る100のゲーム実験室（*＾ｖ＾*）

続きを読む

歩くパンダとAI初心者

■ ゲーム作り始めました（＝ｖ＝*）

初めまして、”みー”です。どうぞよろしくお願いいたします。（*＾ｖ＾*）

　AIチャットは何年か前に話題になってて、面白そうと思って使ってみました。けど、質問することが思いつかず、気づいたら使わずじまい（＾＾；）　

　昨年（令和7年）の12月に仕事でAIを活用する研修があって、今まで活用しなかったのもったいなかったと気づかされました（＞＜）

　AIの使い方や能力とか、分からない現状を変えたい→まずは使うことで、経験値アップを目指してAIの体験を始めたのでした・・・

■ AIとのやりとり

（＾＾）ゲームを作ったことがない人でも作れる？

（AI）結論から言うと、「作れます！」。しかも、今はこのアイデアを実現するのに最高の時代です。

「まずはパンダを歩かせる」というのを見てみたくて、おすすめのゲーム作りの方法を聞いてみると・・

（AI）「まずは動く感覚を10分で味わいたい」**なら → Scratch

・・・やってみました。パンダ自体が選択の中にいない（＞ｘ＜）

（AI）失礼しました！確認したところ、Scratchの標準ライブラリ（最初から入っているリスト）には、なんと「Panda」という名前のキャラクターがデフォルトでは入っていなかったようです。ネコやクマはいるのに、パンダがいないのは意外ですよね。

（￣~￣；）簡単といってたけどスムーズにできないね。

（AI）「メモアプリ（ブラウザ）ですぐ動くコード」をお出しします。
メモ帳に貼り付けて保存するだけで、「2足歩行のパンダ（のようなもの）が、キーボードの左右でトコトコ歩く」様子を再現しました。

使い方
１.PCの「メモ帳」を開き、下のコードを全部コピーして貼り付ける。
２.ファイル名を panda.html として保存する。
３.保存したファイルをブラウザ（ChromeやEdge）にドラッグ＆ドロップする。
（コード：下に掲載）

言われたとおりにやってみる。
確かにパンダっぽいのを動かせた！　Σ（* ゜o　゜*）
ＡＩに相談するだけで思っていたことを再現できる楽しさに気づき、一気にテンションアップ！

■ 実際の動作

■ 今回できたコード

　コードの意味は全くわかりませんが・・・（＞＜；）
　今回の記事では、まだゲームじゃありませんが、AI と相談しながら作った「歩くパンダ」の HTML コードを公開します。

このコードは、ブラウザだけで動くシンプルなもので、
パンダの手足やしっぽが左右キーに合わせて動くようになっています。
PCの「メモ帳」を開いて、
下のコードを **全部コピーして「panda.html」などの名前で保存**し、
ブラウザで開くとそのまま遊べます。

AI が作ってくれたコードをそのまま載せているので、
自分で改造したり、動きを変えたり、色を変えたりして遊んでみてください。（＾＾*）

▼ここからコード▼

<!DOCTYPE html>
<html>
<head>
  <title>組み立てパンダ</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background: #87CEEB;
      overflow: hidden;
    }
    #game-screen {
      width: 500px;
      height: 300px;
      background: #90EE90;
      border-bottom: 10px solid #555;
      position: relative;
    }
    /* パンダのパーツ共通設定 */
    #panda {
      position: absolute;
      bottom: 50px;
      left: 50px;
      width: 60px;
      height: 80px;
      transition: 0.1s;
    }
    .part {
      position: absolute;
      background: black;
      border-radius: 50%;
    }
    /* 各パーツの見た目 */
    .body {
      width: 50px;
      height: 45px;
      background: white;
      border: 2px solid black;
      top: 25px;
      left: 5px;
      z-index: 2;
    }
    .head {
      width: 45px;
      height: 40px;
      background: white;
      border: 2px solid black;
      top: -10px;
      left: 7px;
      z-index: 3;
    }
    .ear {
      width: 15px;
      height: 15px;
      top: -12px;
    }
    .eye {
      width: 10px;
      height: 12px;
      background: black;
      top: 10px;
      border-radius: 50%;
    }
    .hand {
      width: 15px;
      height: 25px;
      top: 30px;
      z-index: 4;
      transform-origin: top;
    }
    .foot {
      width: 18px;
      height: 20px;
      top: 60px;
      z-index: 1;
      transform-origin: top;
    }
    .tail {
      width: 12px;
      height: 12px;
      background: #ccc;
      bottom: 15px;
      right: -5px;
      z-index: 1;
    }
    /* 初期位置調整 */
    .ear.l { left: 5px; }
    .ear.r { right: 5px; }
    .eye.l { left: 10px; }
    .eye.r { right: 10px; }
    .hand.l { left: 0px; }
    .hand.r { right: 0px; }
    .foot.l { left: 10px; }
    .foot.r { right: 25px; }
  </style>
</head>
<body>
  <div id="game-screen">
    <div id="panda">
      <div class="part tail" id="tail"></div>
      <div class="part foot l" id="footL"></div>
      <div class="part foot r" id="footR"></div>
      <div class="part body"></div>
      <div class="part hand l" id="handL"></div>
      <div class="part hand r" id="handR"></div>
      <div class="part head">
        <div class="part ear l"></div>
        <div class="part ear r"></div>
        <div class="part eye l"></div>
        <div class="part eye r"></div>
      </div>
    </div>
  </div>
  <script>
    let x = 50;
    let count = 0;
    const panda = document.getElementById('panda');
    const hL = document.getElementById('handL');
    const hR = document.getElementById('handR');
    const fL = document.getElementById('footL');
    const fR = document.getElementById('footR');
    const tail = document.getElementById('tail');
    document.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {
        // 移動計算
        if (e.key === 'ArrowRight') {
          x += 10;
          panda.style.transform = 'scaleX(1)';
        } else {
          x -= 10;
          panda.style.transform = 'scaleX(-1)';
        }
        // アニメーション用のカウント
        count++;
        const angle = Math.sin(count * 0.5) * 30; // 振り子の動き
        // 手足としっぽを動かす
        hL.style.transform = `rotate(${angle}deg)`;
        hR.style.transform = `rotate(${-angle}deg)`;
        fL.style.transform = `rotate(${-angle}deg)`;
        fR.style.transform = `rotate(${angle}deg)`;
        tail.style.transform = `rotate(${angle * 2}deg)`;
        panda.style.left = x + 'px';
      }
    });
  </script>
</body>
</html>

■ 今日の学び

　学びのために始めたけれど、やり取りの楽しさと、何よりゲームを自分で作れる！
　その嬉しさからまず目標を決めてみました。( ‘v’*)

　今年（令和8年）の1月の終わりごろにAIとのゲーム作りを始めて、毎日1個ゲームを作る！と作り始めて・・・

　実は、このブログを作っている現在、ゲームのジャンルは思いつくままバラバラで、3２個ぐらい作っちゃっています。♪～（＾。＾₌）

　ゲーム自体は、自分が想像したものをAIと相談して、どんなものがどこまでできるかな…（＠_＠*）と、実験的な要素を入れながら、まずはアイデアを（動かせるゲームにする）所まで形に残すようにしました。

　どこまでアイデアが出てくるのかはわかりませんが、100個出来たら1から、さらに良いものを目指して改良する予定（*｀ｖ ´）o”

　1か月ぐらいAIと相談しながらやってきて、AIとのやり取りもうまくできるようになってきたタイミングで、せっかく作ってきた記録を発信したい！と思って、AIさんの協力をもらってブログをはじめてみました。

仕事とゲーム創作も同時進行ですが、これから少しずつ記事を出していきますね！
ブログづくりも慣れるまで少しかかりそうですが、応援よろしくお願いします。
（*＾o＾）ノシ

次回（予定）：AIと壁。

コメントを残す