ChatGPTを使ったタイピングゲームの作り方を学ぼう！— セミナーで作成したプログラムを配布

こんにちは、皆さん！

6月11日(火)に開催されたAI Contents LabのDiscordボイスチャンネルでのセミナーにご参加いただき、ありがとうございました。今回のセミナーでは、gakushi(ガクシ)が講師を務め、ChatGPTを活用したタイピングゲームの作り方を解説しました。

セミナー概要

日時: 6月11日(火) 20:00〜21:00
場所: AI Contents LabのDiscordボイスチャンネル
講師: gakushi(ガクシ)
内容: ChatGPTを使ったタイピングゲームの作り方を解説
参加費: 無料

セミナー内容のハイライト

今回のセミナーでは、ChatGPTを使った簡単なタイピングゲームの作り方をステップバイステップで解説しました。セミナーに参加できなかった方も、こちらの記事で当日作成したプログラムをダウンロードし、自分で試してみることができます。

アーカイブ動画

セミナーのYoutube動画になります。

セミナー資料

6月11日ぷち講座資料

1 ファイル 1.91 MB

ダウンロード

配布するプログラム

以下のファイルを配布いたします。

index.html: HTMLファイル。タイピングゲームの基本構造を定義します。
style.css: CSSファイル。ゲームの見た目をスタイリングします。
script.js: JavaScriptファイル。ゲームの動作を実装します。

ダウンロードリンク

以下のリンクから各ファイルをダウンロードしてください。　

index.html
style.css
script.js

typinggame

1 ファイル 1.90 KB

ダウンロード

コード

index.html

<!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>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Typing Game</h1>
        <div id="word-display">Click "Start Game" to begin</div>
        <input type="text" id="word-input" placeholder="Type the word here..." disabled>
        <button id="start-btn">Start Game</button>
        <div id="score">Score: 0</div>
        <div id="time">Time Left: 30</div>
    </div>
    <script src="script.js"></script>
</body>
</html>

styles.css

body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.container {
    text-align: center;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

#word-display {
    font-size: 24px;
    margin-bottom: 20px;
}

#word-input {
    padding: 10px;
    font-size: 18px;
    width: 80%;
    margin-bottom: 20px;
}

button {
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
    border: none;
    background-color: #007bff;
    color: #fff;
    border-radius: 5px;
}

button:disabled {
    background-color: #ccc;
}

#score, #time {
    font-size: 18px;
    margin-top: 10px;
}

script.js

document.addEventListener('DOMContentLoaded', (event) => {
    const words = [
        'programming', 'javascript', 'interface', 'challenge', 'developer', 
        'function', 'variable', 'framework', 'database', 'algorithm'
    ];
    let currentWord;
    let score = 0;
    let timeLeft = 30;
    let isPlaying = false;
    let countdownInterval;
    let usedWords = [];

    const wordDisplay = document.getElementById('word-display');
    const wordInput = document.getElementById('word-input');
    const scoreDisplay = document.getElementById('score');
    const timeDisplay = document.getElementById('time');
    const startButton = document.getElementById('start-btn');

    startButton.addEventListener('click', startGame);

    wordInput.addEventListener('input', checkInput);

    function startGame() {
        score = 0;
        timeLeft = 30;
        isPlaying = true;
        usedWords = [];
        wordInput.disabled = false;
        wordInput.focus();
        startButton.disabled = true;
        updateScore();
        updateTime();
        showNewWord();
        countdownInterval = setInterval(countdown, 1000);
    }

    function showNewWord() {
        let availableWords = words.filter(word => !usedWords.includes(word));
        if (availableWords.length === 0) {
            endGame();
            return;
        }
        currentWord = availableWords[Math.floor(Math.random() * availableWords.length)];
        usedWords.push(currentWord);
        wordDisplay.textContent = currentWord;
        wordInput.value = '';
    }

    function checkInput() {
        if (currentWord.startsWith(wordInput.value)) {
            wordDisplay.textContent = currentWord.substring(wordInput.value.length);
        } else {
            wordDisplay.textContent = currentWord;
        }

        if (wordInput.value === currentWord) {
            score++;
            updateScore();
            showNewWord();
            wordInput.value = ''; // 入力フィールドをクリア
        }
    }

    function countdown() {
        if (timeLeft > 0) {
            timeLeft--;
            updateTime();
        } else {
            clearInterval(countdownInterval);
            endGame();
        }
    }

    function updateScore() {
        scoreDisplay.textContent = `Score: ${score}`;
    }

    function updateTime() {
        timeDisplay.textContent = `Time Left: ${timeLeft}`;
    }

    function endGame() {
        isPlaying = false;
        wordInput.disabled = true;
        startButton.disabled = false;
        wordDisplay.textContent = 'Game Over! Click "Start Game" to play again.';
    }
});

プログラムの使用方法

配布されたプログラムを使用するには、以下の手順に従ってください。

レンタルサーバーにアップロード: 上記のファイルをレンタルサーバーにアップロードします。アップロード方法については、各レンタルサーバーのマニュアルを参照してください。
ブラウザでアクセス: アップロードしたファイルにブラウザからアクセスします。index.htmlファイルをブラウザで開くことで、タイピングゲームを楽しむことができます。