Click here for free DL of the app version that can save data.

No:821

229

←

Prev Next

→

n-back
Developer User3153｜Date and time 23/6/17 19:46:48
Build time 27.838 sec｜Game capacity 2.922KB｜

Script

というゲームを実装しました。

n-back

2-backに挑戦しよう！

過去2回前と同じ絵文字が表示されたら、「YES」を押そう！

実際にプレイする場合は、2つの絵文字が表示された際に、その中で2つ前と同じ絵文字があった場合にYESをクリックするゲームです。スマホでも遊べるように、ボタンサイズやフォントサイズ、配置には注意しています。また、絵文字を多めに使っています。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

Click here for free DL of the app version that can save data.

というゲームを実装しました。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>n-back</title>
    <style>
        body {
            font-size: 20px;
            text-align: center;
        }
        button {
            margin: 10px;
            font-size: 20px;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>n-back</h1>
    <p>2-backに挑戦しよう！</p>
    <p>過去2回前と同じ絵文字が表示されたら、「YES」を押そう！</p>
    <p id="question"></p>
    <button id="yes">YES</button>
    <button id="no">NO</button>
    <p id="result"></p>
    <script>
        const emojis = ["😀", "😍", "🤔", "🤯", "🤢", "👊", "🏄‍♀️", "🎉", "🚀", "🔥"];

let currentIndex = -1;
        let history = [];
        let score = 0;

const question = document.getElementById("question");
        const result = document.getElementById("result");
        const yes = document.getElementById("yes");
        const no = document.getElementById("no");

function getRandomIndex() {
            const index = Math.floor(Math.random() * emojis.length);
            return index === currentIndex ? getRandomIndex() : index;
        }

function generateQuestion() {
            currentIndex = getRandomIndex();
            question.textContent = emojis[currentIndex];
            history.unshift(currentIndex);
            if (history.length > 2) {
                history.pop();
            }
        }

function reset() {
            history = [];
            score = 0;
            result.textContent = "";
        }

yes.addEventListener("click", function() {
            checkAnswer();
            generateQuestion();
        });

no.addEventListener("click", function() {
            checkAnswer();
            generateQuestion();
        });

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