Meet Red Baron, the emoji boss with fiery determination! This formidable adversary boasts a crimson hue that radiates intensity. His primary attack involves hurling scorching emojis in rapid succession, leaving a trail of digital flames in their wake. To deplete his formidable 5-health bar, players must strategically target and hit the elusive blue orbs he sporadically summons. Precision and timing are key to overcoming Red Baron's relentless onslaught and emerging victorious in this vibrant emo's game

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

No:38546

106

←

Prev Next

→

Meet Red Baron, the emoji boss with fiery determin..ALL
Developer User17401｜Date and time 24/1/25 1:00:55
Build time 30.079 sec｜Game capacity 5.553KB｜

Script

joticonic battle.

←

Prev　Next

→ 　

Back　

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

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

joticonic battle.

<!DOCTYPE html>
<html>
<head>
    <title>Red Baron Emoji Battle</title>
    <style>
        #game-container {
            height: 400px;
            width: 400px;
            position: relative;
            background-color: black;
        }
        #red-baron {
            height: 100px;
            width: 100px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-image: url("red_baron.png");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }
        .shot {
            height: 20px;
            width: 20px;
            position: absolute;
            background-image: url("fireball.png");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }
        .orb {
            height: 20px;
            width: 20px;
            position: absolute;
            background-image: url("blue_orb.png");
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="red-baron"></div>
    </div>
    <script>
        // Game Constants
        const GAME_CONTAINER = document.getElementById('game-container');
        const RED_BARON = document.getElementById('red-baron');
        const SHOT_SPEED = 5;
        const ORB_DELAY = 2000;
        const MAX_HEALTH = 5;

// Game Variables
        let health = MAX_HEALTH;
        let orbs = [];
        let score = 0;

// Event Listeners
        GAME_CONTAINER.addEventListener('mousemove', moveRedBaron);
        GAME_CONTAINER.addEventListener('click', shoot);

// Functions
        function moveRedBaron(event) {
            const x = event.clientX - GAME_CONTAINER.offsetLeft;
            const y = event.clientY - GAME_CONTAINER.offsetTop;

RED_BARON.style.left = `${x}px`;
            RED_BARON.style.top = `${y}px`;
        }

function shoot(event) {
            const { clientX, clientY } = event;

const shot = document.createElement('div');
            shot.className = 'shot';
            shot.style.top = `${RED_BARON.offsetTop + RED_BARON.offsetHeight / 2}px`;
            shot.style.left = `${RED_BARON.offsetLeft + RED_BARON.offsetWidth}px`;

GAME_CONTAINER.appendChild(shot);

const interval = setInterval(() => {
                const projectiles = Array.from(document.getElementsByClassName('shot'));

projectiles.forEach((projectile, index) => {
                    const currentLeft = parseInt(projectile.style.left);
                    projectile.style.left = `${currentLeft + SHOT_SPEED}px`;

if (currentLeft > GAME_CONTAINER.offsetWidth) {
                        projectile.remove();
                        projectiles.splice(index, 1);
                    }
                });

const collisionOrb = orbs.find(orb => isColliding(shot, orb));

if (collisionOrb) {
                    collisionOrb.remove();
                    orbs = orbs.filter(orb => orb !== collisionOrb);
                    shot.remove();
                    clearInterval(interval);
                    score++;
                    updateScore();
                }

if (projectiles.length <= 0) {
                    clearInterval(interval);
                }
            }, 10);
        }

function isColliding(element1, element2) {
            const rect1 = element1.getBoundingClientRect();
            const rect2 = element2.getBoundingClientRect();

return !(
                rect1.top > rect2.bottom ||
                rect1.bottom < rect2.top ||
                rect1.right < rect2.left ||
                rect1.left > rect2.right
            );
        }

function createOrb() {
            const orb = document.createElement('div');
            orb.className = 'orb';
            orb.style.top = `${Math.random() * (GAME_CONTAINER.offsetHeight - 20)}px`;
            orb.style.left = `${GAME_CONTAINER.offsetWidth}px`;

GAME_CONTAINER.appendChild(orb);
            orbs.push(orb);

setTimeout(() => {
                orb.remove();
                orbs = orbs.filter(item => item !== orb);
                updateHealth();
            }, 3000);
        }

function updateHealth() {
            health--;
            document.getElementById('health').textContent = health;

if (health === 0) {
                gameOver();
            }
        }

function updateScore() {
            document.getElementById('score').textContent = score;

if (score === MAX_HEALTH) {
                victory();
            }
        }

function gameOver() {
            alert('Game Over!');
            resetGame();
        }

function victory() {
            alert('Congratulations! You have defeated Red Baron!');
            resetGame();
        }

function resetGame() {
            health = MAX_HEALTH;
            orbs.forEach(orb => orb.remove());
            orbs = [];
            score = 0;
            document.getElementById('score').textContent = 0;
            document.getElementById('health').textContent = health;
        }

// Start Game
        setInterval(createOrb, ORB_DELAY);
    </script>
</body>
</html>