Fox Hunter Game

by BlazeKoala21
283 lines5.2 KB
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fox Hunter Game</title>

<style>
    * {
        box-sizing: border-box;
    }

    body {
        margin: 0;
        background: #111;
        font-family: Arial, sans-serif;
        overflow: hidden;
    }

    #game {
        position: relative;
        width: 100vw;
        height: 100vh;
        background: #72b84b;
        overflow: hidden;
    }

    #fox {
        position: absolute;
        font-size: 50px;
        z-index: 5;
        user-select: none;
    }

    .animal {
        position: absolute;
        font-size: 40px;
        user-select: none;
    }

    #hud {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 10;
        background: rgba(0,0,0,.65);
        color: white;
        padding: 10px 15px;
        border-radius: 12px;
        font-size: 18px;
    }

    #message {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        background: rgba(0,0,0,.75);
        padding: 20px;
        border-radius: 15px;
        font-size: 28px;
        display: none;
        z-index: 20;
        text-align: center;
    }

    #controls {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 15;
        display: grid;
        grid-template-columns: 60px 60px 60px;
        gap: 5px;
    }

    button {
        width: 60px;
        height: 55px;
        border: none;
        border-radius: 12px;
        background: rgba(0,0,0,.6);
        color: white;
        font-size: 25px;
    }

    .empty {
        visibility: hidden;
    }
</style>
</head>

<body>

<div id="game">

    <div id="hud">
        🦊 Level: <span id="level">1</span><br>
        ⭐ XP: <span id="xp">0</span> / <span id="need">5</span><br>
        🍗 Score: <span id="score">0</span>
    </div>

    <div id="fox">🦊</div>

    <div id="message"></div>

    <!-- Mobile Controls -->
    <div id="controls">
        <button class="empty"></button>
        <button onclick="move(0,-1)">⬆️</button>
        <button class="empty"></button>

        <button onclick="move(-1,0)">⬅️</button>
        <button onclick="move(0,1)">⬇️</button>
        <button onclick="move(1,0)">➡️</button>
    </div>

</div>

<script>

const game = document.getElementById("game");
const fox = document.getElementById("fox");

let foxX = 100;
let foxY = 100;

let level = 1;
let xp = 0;
let score = 0;

let animals = [];

const animalTypes = ["🐔", "🦆"];

function updateFox() {
    fox.style.left = foxX + "px";
    fox.style.top = foxY + "px";
}

function createAnimal() {

    const animal = document.createElement("div");

    animal.className = "animal";

    animal.innerText =
        animalTypes[Math.floor(Math.random() * animalTypes.length)];

    const x = Math.random() * (window.innerWidth - 60);
    const y = Math.random() * (window.innerHeight - 150) + 50;

    animal.style.left = x + "px";
    animal.style.top = y + "px";

    game.appendChild(animal);

    animals.push({
        element: animal,
        x: x,
        y: y
    });
}

function spawnAnimals() {

    animals.forEach(a => a.element.remove());

    animals = [];

    let amount = 8 + level * 2;

    for(let i = 0; i < amount; i++) {
        createAnimal();
    }
}

function move(dx, dy) {

    const speed = 25 + level * 3;

    foxX += dx * speed;
    foxY += dy * speed;

    // Screen boundary
    foxX = Math.max(0, Math.min(window.innerWidth - 60, foxX));
    foxY = Math.max(40, Math.min(window.innerHeight - 100, foxY));

    updateFox();

    checkCollision();
}

function checkCollision() {

    animals.forEach((animal, index) => {

        const distance = Math.sqrt(
            Math.pow(foxX - animal.x, 2) +
            Math.pow(foxY - animal.y, 2)
        );

        if(distance < 55) {

            animal.element.remove();

            animals.splice(index, 1);

            score += 10;
            xp += 1;

            updateHUD();

            if(xp >= level * 5) {
                levelUp();
            }

        }

    });

}

function levelUp() {

    xp = 0;
    level++;

    showMessage("🎉 LEVEL UP! 🎉<br>🦊 Level " + level);

    spawnAnimals();

    updateHUD();
}

function updateHUD() {

    document.getElementById("level").innerText = level;
    document.getElementById("xp").innerText = xp;
    document.getElementById("need").innerText = level * 5;
    document.getElementById("score").innerText = score;

}

function showMessage(text) {

    const msg = document.getElementById("message");

    msg.innerHTML = text;
    msg.style.display = "block";

    setTimeout(() => {
        msg.style.display = "none";
    }, 1200);
}

// Keyboard controls
document.addEventListener("keydown", function(e) {

    if(e.key === "ArrowUp" || e.key === "w")
        move(0,-1);

    if(e.key === "ArrowDown" || e.key === "s")
        move(0,1);

    if(e.key === "ArrowLeft" || e.key === "a")
        move(-1,0);

    if(e.key === "ArrowRight" || e.key === "d")
        move(1,0);

});

updateFox();
spawnAnimals();
updateHUD();

</script>

</body>
</html>
Game Source: Fox Hunter Game

Creator: BlazeKoala21
Libraries: none
Complexity: complex (283 lines, 5.2 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: fox-hunter-game-blazekoala21" to link back to the original. Then publish at arcadelab.ai/publish.