久しぶりに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
クローンツールを起動したら、OKぽちぽちして内蔵
