Word Drop Game

by BlazeOwl32

145 lines3.0 KB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Word Drop Game</title>
<style>
    body {
        margin: 0;
        background: #111;
        color: white;
        font-family: Arial, sans-serif;
        text-align: center;
    }

    #game {
        position: relative;
        width: 400px;
        height: 600px;
        margin: 20px auto;
        background: #222;
        overflow: hidden;
        border: 3px solid white;
    }

    .word {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        font-size: 20px;
        background: #444;
        padding: 8px 12px;
        border-radius: 8px;
    }

    #options {
        margin-top: 15px;
    }

    button {
        margin: 5px;
        padding: 10px 15px;
        font-size: 16px;
        cursor: pointer;
    }

    #score {
        font-size: 20px;
    }
</style>
</head>
<body>

<h2>Catch the Word!</h2>
<div id="score">Score: 0</div>

<div id="game"></div>

<div id="options"></div>

<script>
const words = [
    {en: "apple", ru: "яблоко"},
    {en: "dog", ru: "собака"},
    {en: "house", ru: "дом"},
    {en: "car", ru: "машина"},
    {en: "sun", ru: "солнце"},
    {en: "water", ru: "вода"}
];

let current;
let wordDiv;
let y = 0;
let speed = 1;
let score = 0;

function newWord() {
    y = 0;
    current = words[Math.floor(Math.random() * words.length)];

    wordDiv = document.createElement("div");
    wordDiv.className = "word";
    wordDiv.innerText = current.en;
    wordDiv.style.top = "0px";

    document.getElementById("game").innerHTML = "";
    document.getElementById("game").appendChild(wordDiv);

    createOptions();
}

function createOptions() {
    const optionsDiv = document.getElementById("options");
    optionsDiv.innerHTML = "";

    let answers = [current.ru];

    while (answers.length < 4) {
        let rand = words[Math.floor(Math.random() * words.length)].ru;
        if (!answers.includes(rand)) {
            answers.push(rand);
        }
    }

    answers.sort(() => Math.random() - 0.5);

    answers.forEach(ans => {
        let btn = document.createElement("button");
        btn.innerText = ans;

        btn.onclick = () => {
            if (ans === current.ru) {
                score++;
                speed += 0.2;
                document.getElementById("score").innerText = "Score: " + score;
                newWord();
            } else {
                alert("Game Over! Score: " + score);
                location.reload();
            }
        };

        optionsDiv.appendChild(btn);
    });
}

function update() {
    if (!wordDiv) return;

    y += speed;
    wordDiv.style.top = y + "px";

    if (y > 550) {
        alert("Too slow! Game Over");
        location.reload();
    }

    requestAnimationFrame(update);
}

newWord();
update();
</script>

</body>
</html>

Game Source: Word Drop Game

Creator: BlazeOwl32

Libraries: none

Complexity: moderate (145 lines, 3.0 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: word-drop-game-blazeowl32-mopqgmwk" to link back to the original. Then publish at arcadelab.ai/publish.