Boss fight game the player can move on all four sides the boss is a big red thing that can summon enemies and has a health bar that says 300 the boss can also shoot out red projectiles Shooting's game

Sure! Here's a basic implementation of a boss fight game using JavaScript and HTML:

👤

🔴

This code will create a boss fight game where you can control the player using the arrow keys on your keyboard. The boss will periodically shoot red projectiles towards the player. If a projectile hits the player, the game is over. The player can reduce the boss's health by being in the game area. Once the boss's health reaches 0, the game will restart.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Sure! Here's a basic implementation of a boss fight game using JavaScript and HTML:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Boss Fight Game</title>
    <style>
        #player {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 40px;
            cursor: pointer;
        }
        
        #boss {
            position: absolute;
            top: 10px;
            left: 10px;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        #projectiles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        
        .projectile {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 10px;
            height: 10px;
            background-color: red;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div id="player">👤</div>
    <div id="boss">🔴<div>
    <div id="projectiles"></div>
    
    <script>
        // Configurations
        const speed = 10;
        const projectileSpeed = 5;
        
        // Game Elements
        const player = document.getElementById("player");
        const boss = document.getElementById("boss");
        const projectilesContainer = document.getElementById("projectiles");
        
        // Player movement
        let playerX = window.innerWidth / 2;
        let playerY = window.innerHeight / 2;
        
        document.addEventListener("keydown", (event) => {
            const key = event.key;
            
            if (key === "ArrowUp") {
                playerY -= speed;
            } else if (key === "ArrowDown") {
                playerY += speed;
            } else if (key === "ArrowLeft") {
                playerX -= speed;
            } else if (key === "ArrowRight") {
                playerX += speed;
            }
            
            player.style.top = playerY + "px";
            player.style.left = playerX + "px";
        });
        
        // Boss projectile shooting (unlimited)
        function shootProjectile() {
            const projectile = document.createElement("div");
            projectile.className = "projectile";
            
            projectilesContainer.appendChild(projectile);
            
            let projectileX = boss.offsetLeft;
            let projectileY = boss.offsetTop;
            
            const projectileInterval = setInterval(() => {
                projectileY += projectileSpeed;
                projectile.style.top = projectileY + "px";
                
                if (projectileY >= window.innerHeight) {
                    projectilesContainer.removeChild(projectile);
                    clearInterval(projectileInterval);
                }
            }, 10);
        }
        
        setInterval(shootProjectile, 3000); // Shoot every 3 seconds
        
        // Boss health bar
        let bossHealth = 300;
        const bossHealthBar = document.createElement("div");
        
        bossHealthBar.style.position = "absolute";
        bossHealthBar.style.top = "120px";
        bossHealthBar.style.left = "10px";
        bossHealthBar.style.width = "100px";
        bossHealthBar.style.height = "20px";
        bossHealthBar.style.backgroundColor = "green";
        
        document.body.appendChild(bossHealthBar);
        
        function updateBossHealth() {
            bossHealthBar.style.width = (bossHealth / 300) * 100 + "%";
            
            if (bossHealth <= 0) {
                alert("Congratulations! You defeated the boss!");
                location.reload(); // Restart the game
            }
        }
        
        // Collision detection
        function checkCollisions() {
            const projectiles = document.getElementsByClassName("projectile");
            
            Array.from(projectiles).forEach((projectile) => {
                const projectilePosition = projectile.getBoundingClientRect();
                const playerPosition = player.getBoundingClientRect();
                
                if (
                    projectilePosition.left < playerPosition.right &&
                    projectilePosition.right > playerPosition.left &&
                    projectilePosition.top < playerPosition.bottom &&
                    projectilePosition.bottom > playerPosition.top
                ) {
                    alert("Game Over! The boss defeated you.");
                    location.reload(); // Restart the game
                }
            });
        }
        
        setInterval(checkCollisions, 10); // Check collisions every 10 milliseconds
        
        function reduceBossHealth() {
            bossHealth -= 10;
            updateBossHealth();
        }
        
        setInterval(reduceBossHealth, 200); // Reduce boss health every 200 milliseconds
    </script>
</body>
</html>
```