まるぼ実験場

今年専門を卒業したけど就活サボってしまいました（関係ない職種でフリーター生活中）。どうすんだよこれ。

ChatGPTを使って一瞬で作ったJavaScriptタイピングゲーム

ChatGPT

久しぶりにChatGPT使ったら応答がすげー早くなっててびっくりした。
次回作るゲームのたたき台にするためにこのコードを書いて貰ったんだけど、これだけでも結構遊べる気がした。日本語で指示しただけでこれができるとは、すごい……。
AIがイラストの方面で物議を醸しているところで、AIが作成したソースコードを丸々載せるって著作権的にはどうなんだろう……と思うところはあるんだけども、
こんな感じで、なにかしら作る時のベースになるコードをサクッと出させるのにAIを活用するのは良いなぁと思っていたり。

主に指示した仕様
・JavascriptでCanvasに描画
・方向キーも入力に使えるようにする
・お題を全20題からランダムに設定
・途中で入力に失敗した場合、最初からやり直しにさせる
・クリアしたらお題に手をつけてからクリアするまでの経過秒数をCanvas内に0.5秒間表示してから次のお題を出す

指示してない機能のコードを削らせることにちょっと気を遣ったかもしれない（^_^;

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Typing Game</title>
<style>
    canvas {
        border: 1px solid black;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="200"></canvas>
<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    const topics = ['apple', 'banana', 'cherry', 'orange', 'grape', 'melon', 'pear', 'strawberry', 'watermelon', 'pineapple', 'kiwi', 'mango', 'blueberry', 'peach', 'apricot', 'plum', 'fig', 'coconut', 'lime', 'lemon'];
    let currentTopicIndex = -1;
    let currentTopic = '';
    let inputText = 'input: ';
    let userInput = '';
    let startTime = null;

    function chooseRandomTopic() {
        currentTopicIndex = Math.floor(Math.random() * topics.length);
        currentTopic = topics[currentTopicIndex];
        userInput = '';
        startTime = new Date().getTime();
        draw();
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.font = '20px Arial';
        ctx.fillText(inputText + currentTopic, 10, 30);
        ctx.fillText(inputText + userInput, 10, 60);
        if (userInput === currentTopic) {
            const elapsedTime = (new Date().getTime() - startTime) / 1000;
            ctx.fillText(`Clear! Time: ${elapsedTime.toFixed(1)} seconds`, 10, 90);
        }
    }

    function handleInput(event) {
        const key = event.key;
        const keyCode = event.keyCode;

        if (key.length === 1) {
            userInput += key;
        } else if (keyCode >= 37 && keyCode <= 40) { // Arrow keys
            userInput += handleArrowKeys(keyCode);
        }

        if (!currentTopic.startsWith(userInput)) {
            userInput = '';
        }

        if (userInput === currentTopic) {
            setTimeout(() => {
                chooseRandomTopic();
            }, 500); // 0.5秒後に次のお題に進む
        }

        draw();
    }

    function handleArrowKeys(keyCode) {
        switch (keyCode) {
            case 37: // Left arrow
                return '←';
            case 38: // Up arrow
                return '↑';
            case 39: // Right arrow
                return '→';
            case 40: // Down arrow
                return '↓';
            default:
                return '';
        }
    }

    document.addEventListener('keydown', handleInput);

    chooseRandomTopic();
</script>
</body>
</html>

サンプル
3ka.me