【AIアシスタント】知識ゼロからゲームプログラミング【GPT-4】

スポンサーリンク
AI
この記事は約15分で読めます。

私のアシスタントはAIです。

 

どうもヨスケです。

 

最近は、毎日記念日を記事にしていますが、

全て、bing AI君が調べて記事を作ってくれています。

 

また、プログラミングで作りたいものが出てきた際も、

要件を伝えればGPT-4君がコーディングしてくれます。

 

今回はブログに簡単な「じゃんけんゲーム」を実装することが、

どれくらいのやり取りでできるのか、

実際に試してみました。

 

スポンサーリンク
スポンサーリンク

GPT-4にゲームを作ってもらう

今回は、HTML, CSS, JavaScriptのコードを

ChatGPTのGPT-4君に作ってもらいました。

 

やり取りをそのまま載せます。

参考になればと思います。

 

ヨスケ
ヨスケ

自分のブログページに簡単なゲームを実装したいです。
やり方が全く分からないので、step by stepで教えてください。

ChatGPT(GPT-4)

ブログページに簡単なゲームを実装する方法をstep by stepで説明します。ここでは、HTML、CSS、JavaScriptを使用して、ブログページに実装できる簡単なゲームを作成します。

  1. ゲームのアイデアを決める まずは簡単なゲームのアイデアを決めてください。例えば、じゃんけんゲームや簡単なクイズゲームなどが考えられます。
  2. HTMLを作成する ゲームの基本的な構造を作るために、HTMLを記述します。例えば、じゃんけんゲームの場合、以下のようなHTMLを作成します。
  3. CSSを作成する
    ゲームの見た目を整えるために、CSSを記述します。例えば、以下のようなCSSを作成します。
  4. JavaScriptを作成する
    ゲームの動作を実装するために、JavaScriptを記述します。例えば、以下のようなJavaScriptを作成します。
  5. 記事を公開する
    ブログ記事または固定ページを公開または更新します。これで、ブログページに簡単なゲームが実装されました。

生成されたコード

ステップに合わせてコードが出てきました。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>じゃんけんゲーム</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>じゃんけんゲーム</h1>
    <div id="game">
        <button id="rock">グー</button>
        <button id="scissors">チョキ</button>
        <button id="paper">パー</button>
    </div>
    <div id="result"></div>
    <script src="script.js"></script>
</body>
</html>
body {
    font-family: 'Arial', sans-serif;
    text-align: center;
}

button {
    font-size: 24px;
    padding: 10px 20px;
    margin: 0 10px;
}

#result {
    font-size: 24px;
    margin-top: 20px;
}
const rock = document.getElementById('rock');
const scissors = document.getElementById('scissors');
const paper = document.getElementById('paper');
const result = document.getElementById('result');

function janken(playerChoice) {
    const choices = ['グー', 'チョキ', 'パー'];
    const computerChoice = choices[Math.floor(Math.random() * choices.length)];

    if (playerChoice === computerChoice) {
        result.textContent = '引き分け!';
    } else if (
        (playerChoice === 'グー' && computerChoice === 'チョキ') ||
        (playerChoice === 'チョキ' && computerChoice === 'パー') ||
        (playerChoice === 'パー' && computerChoice === 'グー')
    ) {
        result.textContent = 'あなたの勝ち!';
    } else {
        result.textContent = 'あなたの負け…';
    }
}

rock.addEventListener('click', () => janken('グー'));
scissors.addEventListener('click', () => janken('チョキ'));
paper.addEventListener('click', () => janken('パー'));

ホントにこれで動くのでしょうか??

 

 

動くか試してみた

作ったHTML, CSS, JSを簡単に試せるサイトがありますので、

そこで動作確認してみました。

 

今回使用したサイトはReplit.comというサイトです。

 

細かい使用方法はYouTube動画もたくさん上がっているので、

そちらをご覧ください。

 

なんかできてる!

とはいえ、

 

やってみると、相手が何を出したとか、

連続で遊べないとか

色々改善したいところも出たので、

改善要望もGPTさんに出します。

 

修正依頼

ヨスケ
ヨスケ

相手の出した手がわかるように、ボタンを押すと同時に表示するようにしてください。
また、ボタンを押すと、何度でもじゃんけんができるようにしてください。

 

 

ChatGPT(GPT-4)
GPT-4

ボタンを押すと同時に相手の出した手がわかるように表示し、何度でもじゃんけんができるようにするには、以下のようにJavaScriptを修正します。

const rock = document.getElementById('rock');
const scissors = document.getElementById('scissors');
const paper = document.getElementById('paper');
const result = document.getElementById('result');
const computerChoiceDisplay = document.createElement('div');

function janken(playerChoice) {
    const choices = ['グー', 'チョキ', 'パー'];
    const computerChoice = choices[Math.floor(Math.random() * choices.length)];

    computerChoiceDisplay.textContent = `相手の手: ${computerChoice}`;
    result.appendChild(computerChoiceDisplay);

    if (playerChoice === computerChoice) {
        result.textContent = '引き分け!';
    } else if (
        (playerChoice === 'グー' && computerChoice === 'チョキ') ||
        (playerChoice === 'チョキ' && computerChoice === 'パー') ||
        (playerChoice === 'パー' && computerChoice === 'グー')
    ) {
        result.textContent = 'あなたの勝ち!';
    } else {
        result.textContent = 'あなたの負け…';
    }
}

rock.addEventListener('click', () => janken('グー'));
scissors.addEventListener('click', () => janken('チョキ'));
paper.addEventListener('click', () => janken('パー'));

ここでちょっと問題発生

修正コードが出てきたんですが、

相手のじゃんけんの手が表示されないところが修正できず、

何度かやり取り。

JavaScriptだけじゃなくて、htmlも修正が必要なのでは?

と聞くと、「あっ」みたいな感じで修正コードを出してきましたw

 

ちょっとかわいい。

 

ヨスケ
ヨスケ

ん?出ませんよ。

ChatGPT(GPT-4)
GPT-4

申し訳ありません。正しく動作するコードを以下に示します。

ヨスケ
ヨスケ

index.htmlとかscript.jsを修正しなくても良いのですか?

ChatGPT(GPT-4)
GPT-4

失礼しました。index.htmlの修正も必要です。以下に修正後のindex.htmlを示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>じゃんけんゲーム</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>じゃんけんゲーム</h1>
    <div id="game">
        <button id="rock">グー</button>
        <button id="scissors">チョキ</button>
        <button id="paper">パー</button>
    </div>
    <div id="result">
        <div id="computer-choice"></div>
        <div id="game-result"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

 

ChatGPT(GPT-4)
GPT-4

次に、script.jsを以下のように修正してください。

const rock = document.getElementById('rock');
const scissors = document.getElementById('scissors');
const paper = document.getElementById('paper');
const gameResult = document.getElementById('game-result');
const computerChoiceDisplay = document.getElementById('computer-choice');

function janken(playerChoice) {
    const choices = ['グー', 'チョキ', 'パー'];
    const computerChoice = choices[Math.floor(Math.random() * choices.length)];

    computerChoiceDisplay.textContent = `相手の手: ${computerChoice}`;

    if (playerChoice === computerChoice) {
        gameResult.textContent = '引き分け!';
    } else if (
        (playerChoice === 'グー' && computerChoice === 'チョキ') ||
        (playerChoice === 'チョキ' && computerChoice === 'パー') ||
        (playerChoice === 'パー' && computerChoice === 'グー')
    ) {
        gameResult.textContent = 'あなたの勝ち!';
    } else {
        gameResult.textContent = 'あなたの負け…';
    }
}

rock.addEventListener('click', () => janken('グー'));
scissors.addEventListener('click', () => janken('チョキ'));
paper.addEventListener('click', () => janken('パー'));

最終的な実行結果

さて、動くのか!?

やりました!動いた!

 

ここまで、所要時間10分。

 

トラブルがなかったら、もっと早かったですね。

 

マジすごい。。。

 

 

作ったゲームをWordPressに貼り付けます。

さて、最終目標は作ったゲームをブログ記事に載せたいので、

どうやるか教えてもらいました。

 

ヨスケ
ヨスケ

ブログはWordPress、テーマはCocoonで書いています。
どのように実装すればよいでしょうか?

 

 

GPT-4
GPT-4

WordPressでCocoonテーマを使用している場合、以下の手順でゲームを実装できます。

  1. ファイルの準備 作成したindex.htmlgame.htmlにリネームしてください。また、game.htmlstyle.cssscript.jsをウェブサーバーにアップロードします。これらのファイルは、WordPressのインストールディレクトリの中のwp-contentディレクトリ内にあるuploadsディレクトリにアップロードすることをお勧めします。アップロードが完了したら、game.htmlのURLをメモしておいてください。
  2. WordPressで新しいページを作成 WordPressの管理画面にログインし、「ページ」>「新規追加」をクリックして、新しいページを作成します。もちろん、既存のページに追加することもできます。
  3. ショートコードを使用してiframeを追加 Cocoonテーマでは、iframeの埋め込みが制限されていますが、ショートコードを使用してiframeを追加することができます。新しいページの本文エディタに以下のショートコードを追加してください。
    1. ページを公開 新しいページの「公開」ボタンをクリックしてページを公開します。

    これで、WordPressのCocoonテーマを使用したブログページに簡単なゲームが実装されました。公開されたページにアクセスして、ゲームが正しく表示されるか確認してください。

 

 

[cocoon-iframe src="https://your-web-server.com/path/to/game.html" width="100%" height="500"]
GPT-4
GPT-4

ここで、https://your-web-server.com/path/to/game.htmlを、アップロードしたgame.htmlのURLに置き換えてください。また、widthheightの値を、ゲームの表示サイズに合わせて調整してください。

 

よし、埋め込むぞ。

 

サイドバーにじゃんけんゲームを埋め込んでみましたので、

 

暇な方、遊んでみてください。

 

 

【お知らせ】ココナラでサービス販売しております。

ビジネスの場面で多くある面倒な作業をサポートいたします。

一度ご相談ください。

長時間でさらにお得!動画・音声から文字起こしします 丁寧・迅速をモットーに!中間報告など報連相を大事にします!

SNSで営業DMの送信代行をいたします インスタ/Twitter、重要でも大変な営業をサポートします

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

タイトルとURLをコピーしました