ChatGPT 自動プログラミング実験: 「サイコロシミュレーター」を作らせてみた！

2023-05-05　

ChatGPTプログラム生成実験

自分が今まで理系の学問系中心に、内容を深く理解するためのシミュレータープログラムを作成してきました。このシミュレーター、簡単なものなら結構短いプログラムで書けてしまうこともあります。

「それなら、ChatGPTに全てプログラムを書かせるのも有り？」とふと思いました。ということで、様々なブラウザで動くようなシミュレーターやゲームをChatGPTに作成させる実験をしていきたいと思っています！

ChatGPT 自動プログラミング実験: 「サイコロシミュレーター」を作らせてみた！

1 今回のお題: サイコロを振るシミュレーター
2 ChatGPT 初回命令
3 おまけ：１～１０の目に改変してみる
4 結論：典型的なパターンを外れると急にプログラムを作れなくなる

今回のお題: サイコロを振るシミュレーター

今回はサイコロを振るプログラムを作成させてみました。以前に自分で↓のようにつくっているので、これと同じものを作らせたい感じですね。

webで振れるサイコロ！シンプルなサイコロシミュレーター！

ChatGPT 初回命令

ChatGPTへの命令

↓で簡易的に命令してみました

ボタンを押したらサイコロを振れるプログラムを作成して下さい。javascriptで作って、サイコロをcanvasで描画し、ブラウザで動く形式で出力して下さい。

コード

生成されたプログラムが↓です。

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>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<button id="roll-dice">サイコロを振る</button>
<canvas id="dice-canvas" width="200" height="200"></canvas>

<script>
    const canvas = document.getElementById('dice-canvas');
    const ctx = canvas.getContext('2d');
    const button = document.getElementById('roll-dice');

    function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    function drawCircle(x, y, radius) {
        ctx.beginPath();
        ctx.arc(x, y, radius, 0, 2 * Math.PI);
        ctx.fill();
    }

    function drawDiceFace(value) {
        clearCanvas();
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        const dotRadius = 10;
        ctx.fillStyle = 'black';

        if (value === 1 || value === 3 || value === 5) {
            drawCircle(canvas.width / 2, canvas.height / 2, dotRadius);
        }
        if (value > 1) {
            drawCircle(canvas.width / 4, canvas.height / 4, dotRadius);
            drawCircle(3 * canvas.width / 4, 3 * canvas.height / 4, dotRadius);
        }
        if (value > 3) {
            drawCircle(3 * canvas.width / 4, canvas.height / 4, dotRadius);
            drawCircle(canvas.width / 4, 3 * canvas.height / 4, dotRadius);
        }
        if (value === 6) {
            drawCircle(canvas.width / 4, canvas.height / 2, dotRadius);
            drawCircle(3 * canvas.width / 4, canvas.height / 2, dotRadius);
        }
    }

    function rollDice() {
        const value = Math.floor(Math.random() * 6) + 1;
        drawDiceFace(value);
    }

    button.addEventListener('click', rollDice);
</script>
</body>
</html>

生成されたサイコロ

初回からかなり優秀なものができました！これはサイコロというものが色んな人が既に作っているからだと思われます。
自分の作ったものと違って、コロコロ転がる要素がなくてさみしいですが、これはこれでありだと思います！

おまけ：１～１０の目に改変してみる

自分の以前のプログラムで↓のように自由にサイコロの目の数を変えられるものがあったので、それを真似させてみました。

ランダム選択ツール！選択肢で、どれにしようか迷ったらコレ！(色んな選択数に対応)

ChatGPTへの命令

↓で簡易的に命令してみました

1から6まででなく、1から10まで目のあるサイコロにしてほしいです。

コード

生成されたプログラムが↓です。やっぱり10の目などは既存にないので早々諦め、数字で出力する形になりました。

1から10までの目があるサイコロを実装するには、サイコロの描画方法を変更する必要があります。以下のコードは、1から10までの目があるサイコロを実装したものです。

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>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
<button id="roll-dice">サイコロを振る</button>
<canvas id="dice-canvas" width="200" height="200"></canvas>

<script>
    let canvas = document.getElementById('dice-canvas');
    const ctx = canvas.getContext('2d');
    const button = document.getElementById('roll-dice');

    function clearCanvas() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

    function drawText(text, x, y, fontSize) {
        ctx.font = `${fontSize}px Arial`;
        ctx.fillText(text, x, y);
    }

    function drawDiceFace(value) {
        clearCanvas();
        ctx.fillStyle = 'white';
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = 'black';
        drawText(value, canvas.width / 2 - 10, canvas.height / 2 + 10, 30);
    }

    function rollDice() {
        const value = Math.floor(Math.random() * 10) + 1;
        drawDiceFace(value);
    }

    button.addEventListener('click', rollDice);
</script>
</body>
</html>