メニュー 閉じる

【HTML】WordPressにChatGPTでミニゲームを実装してみた【コピペOK】

minigame-wordpress-chatgpt

※本サイトで紹介している商品・サービス等の外部リンクには、アフィリエイト広告が含まれる場合があります。
⚠お酒は二十歳になってから。

WordPressで作成したこのWebページに、カスタムHTMLを使用してミニゲームを実装してみました。

紹介しているコードをカスタムHTMLにコードをコピペするだけで動かすことができます。

アレンジして使ってみたり、ミニゲームをつくるときの動き方の参考にしてみてください。

ChatGPTを使っているなら、直接聞いてみるも良いわね！

スロットゲーム

「スピン」ボタンを押すと絵文字がランダムに抽選され、揃うと大当たりが表示されるミニゲームです。

スロットマシン
🌸
🌸
🌸


スロットゲームのコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>スロットマシン</title>
    <style>
        .slot-container {
            text-align: center;
            margin: 20px;
        }
        .slot {
            font-size: 2em;
            padding: 10px;
            display: inline-block;
            width: 60px;
            height: 60px;
            border: 1px solid #000;
        }
        #result {
            margin-top: 20px;
            font-size: 1.5em;
        }
    </style>
</head>
<body>
    <div class="slot-container">
        <div id="slot1" class="slot">🌸</div>
        <div id="slot2" class="slot">🌸</div>
        <div id="slot3" class="slot">🌸</div>
        <br>
        <br>
        <button onclick="spinSlots()">スピン</button>
        <div id="result"></div>
    </div>

    <script>
        const symbols = ['🍶', '🍷', '🍺', '🥃', '🌸'];

        function spinSlots() {
            const slot1 = document.getElementById('slot1');
            const slot2 = document.getElementById('slot2');
            const slot3 = document.getElementById('slot3');
            slot1.textContent = symbols[Math.floor(Math.random() * symbols.length)];
            slot2.textContent = symbols[Math.floor(Math.random() * symbols.length)];
            slot3.textContent = symbols[Math.floor(Math.random() * symbols.length)];

            const result = document.getElementById('result');
            if (slot1.textContent === slot2.textContent && slot2.textContent === slot3.textContent) {
                result.textContent = '大当たり！';
                result.style.color = 'green';
            } else {
                result.textContent = '残念！';
                result.style.color = 'red';
            }
        }
    </script>
</body>
</html>

表示される絵文字を変えるだけで独自性が出せそうね！

タイピングゲーム

入力ボックスの上部に表示されている文字を入力すると、スコアが加算されていくタイピングゲームです。

タイピングゲーム
スタート
スコア: 0

タイピングゲームのコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>タイピングゲーム</title>
    <style>
        .container {
            text-align: center;
            margin-top: 50px;
        }
        .word {
            font-size: 2em;
            margin-bottom: 20px;
        }
        .input {
            font-size: 1.5em;
            padding: 10px;
            width: 300px;
        }
        .score {
            font-size: 1.2em;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div id="word" class="word">スタート</div>
        <input id="input" class="input" type="text" placeholder="上に表示されている文字をここに入力">
        <div id="score" class="score">スコア: 0</div>
    </div>

    <script>
        const words = ['お酒', 'ワイン', 'チューハイ', '日本酒', 'カクテル', 'ビール', 'ウイスキー'];
        let currentWord = '';
        let score = 0;

        function getRandomWord() {
            return words[Math.floor(Math.random() * words.length)];
        }

        function setNewWord() {
            currentWord = getRandomWord();
            document.getElementById('word').textContent = currentWord;
            document.getElementById('input').value = '';
            document.getElementById('input').focus();
        }

        document.getElementById('input').addEventListener('input', function() {
            if (this.value === currentWord) {
                score++;
                document.getElementById('score').textContent = 'スコア: ' + score;
                setNewWord();
            }
        });

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

タイマーを設けたり、スタートボタンが欲しくなるわね…

ジャンプランナー

ランナーに向かって障害物が迫るので、タイミングよくジャンプボタンを押すゲームです。

なお、当たり判定やスコアはありません…

ジャンプゲーム
🏃

ジャンプランナーのコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ジャンプゲーム</title>
    <style>
        .game-container-unique {
            position: relative;
            width: 600px;
            height: 200px;
            border: 1px solid #000;
            background-color: #fff;
        }
        .runner-unique {
            position: absolute;
            bottom: 10px;
            right: 50px;
            font-size: 2em;
            animation: run-unique 1s steps(4) infinite;
        }
        .obstacle-unique {
            position: absolute;
            bottom: 10px;
            left: 0;
            width: 20px;
            height: 20px;
            background-color: red;
            animation: move-unique 2s linear infinite;
        }
        .button-unique {
            margin-top: 20px;
            margin-left: 45%;
            padding: 10px 20px;
            font-size: 1em;
            color: #fff;
            background-color: #007BFF;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .button-unique:hover {
            background-color: #0056b3;
        }
        @keyframes run-unique {
            from { content: '🏃'; }
            to { content: '🏃'; }
        }
        @keyframes move-unique {
            from { left: 0; }
            to { left: 600px; }
        }
        @keyframes jump-unique {
            0% { bottom: 10px; }
            50% { bottom: 100px; }
            100% { bottom: 10px; }
        }
    </style>
</head>
<body>
    <div class="game-container-unique">
        <div id="runner-unique" class="runner-unique">🏃</div>
        <div class="obstacle-unique"></div>
    </div>
    <button class="button-unique" onclick="jumpUnique()">ジャンプ</button>

    <script>
        function jumpUnique() {
            const runner = document.getElementById('runner-unique');
            runner.style.animation = 'jump-unique 0.5s';
            setTimeout(() => {
                runner.style.animation = 'run-unique 1s steps(4) infinite';
            }, 500);
        }
    </script>
</body>
</html>

ミニゲームというよりアニメーションだわ…でも考え方次第では面白いギミックにできそうね！

これらのミニゲームはChatGPTに質問して出力してもらっています。

質問した内容はは、「WordpressのカスタムHTMLで実装できるスロットゲームを教えてください」です。

聞き方やミニゲームを変えるだけで、もっと多くの答えが返ってくることでしょう。

この記事がChatGPTや生成AIの使い方の一例として役に立つと幸いです。

ChatGPTや生成AIは、目まぐるしいスピードで進化しています。

少しでも気になった方は、すぐにでも触ってみてください！

今後も役立つ情報を発信していきますので、お楽しみにしていてください！
また、Xのフォロー（@haizakura32）やYouTubeで生成AI関連の動画を見てくれると嬉しいです！

⏫️ついつい飲みすぎちゃうときには、サプリに頼るのも良いわね！
🌸送料無料でたった『540円』で購入できるわ！Amazonアカウントも使えるわよ！

タグ:, ,

関連投稿