Jeu HTML : Battle Royale simple avec construction/tir

1,013 31lhelton

Ouvrir dans l'éditeur Publiez votre code

Jeu HTML : Battle Royale simple avec construction/tir

Recommandé

16 July 2025

Scène CSS avec guirlandes lumineuses et escaliers

12 December 2025

Jeu HTML5 Friday Night Funkin' Intégration

29 September 2025

Animation de chargement CSS avec image d'arrière-plan

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Battle Royale: The Simple Drop</title>
    <style>
        body {
            margin: 0;
            background-color: #1a1a2e; /* Dark theme */
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: 'Arial', sans-serif;
            color: white;
        }

#game-container {
            position: relative;
            width: 700px;
            height: 500px;
            background-color: #88B04B; /* Grass/Map base */
            border: 10px solid #4B5320;
            overflow: hidden;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
        }

#player {
            position: absolute;
            width: 25px;
            height: 25px;
            background-color: #FF6347; /* Player color */
            border: 3px solid #A52A2A;
            border-radius: 5px;
            transition: left 0.05s linear, top 0.05s linear;
            z-index: 50;
        }

.wall {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #A0522D; /* Wood structure */
            border: 2px solid #654321;
            box-sizing: border-box;
            opacity: 0.8;
            z-index: 10;
        }

.shot {
            position: absolute;
            width: 8px;
            height: 3px;
            background-color: yellow;
            border-radius: 1px;
            z-index: 100;
        }

#messages {
            position: absolute;
            top: 10px;
            left: 10px;
            color: #fff;
            background: rgba(0, 0, 0, 0.8);
            padding: 8px;
            border-radius: 5px;
            font-size: 14px;
            z-index: 200;
        }
    </style>
</head>
<body>

<div id="game-container">
        <div id="player"></div>
        <div id="messages">Welcome to the Zone! WASD to move, SPACE to shoot, B to build.</div>
    </div>

function updatePlayerPosition() {
            player.style.left = playerX + 'px';
            player.style.top = playerY + 'px';
        }

function handleMovement(key) {
            switch (key) {
                case 'w': playerY = Math.max(0, playerY - playerSpeed); break;
                case 's': playerY = Math.min(maxH, playerY + playerSpeed); break;
                case 'a': playerX = Math.max(0, playerX - playerSpeed); break;
                case 'd': playerX = Math.min(maxW, playerX + playerSpeed); break;
            }
            updatePlayerPosition();
        }

function buildWall() {
            const wall = document.createElement('div');
            wall.className = 'wall';
            // Place wall slightly offset from the player position
            wall.style.left = (playerX + 30) + 'px';
            wall.style.top = (playerY) + 'px';
            container.appendChild(wall);

document.getElementById('messages').textContent = 'Wall constructed! (Decays in 4s)';
            setTimeout(() => {
                wall.style.opacity = 0;
                setTimeout(() => wall.remove(), 500); // Remove after fade
            }, 4000); // Walls decay after 4 seconds
        }

function shoot() {
            const shot = document.createElement('div');
            shot.className = 'shot';
            // Start shot slightly in front of the player
            let shotX = playerX + 28;
            let shotY = playerY + 11;
            shot.style.left = shotX + 'px';
            shot.style.top = shotY + 'px';
            container.appendChild(shot);

const shotInterval = setInterval(() => {
                shotX += 20; // Move quickly to the right
                shot.style.left = shotX + 'px';

if (shotX > 700) {
                    clearInterval(shotInterval);
                    shot.remove();
                }

// Simple collision check with walls (Highly rudimentary)
                document.querySelectorAll('.wall').forEach(wall => {
                    const wallRect = wall.getBoundingClientRect();
                    const shotRect = shot.getBoundingClientRect();

if (shotRect.right > wallRect.left && shotRect.left < wallRect.right &&
                        shotRect.bottom > wallRect.top && shotRect.top < wallRect.bottom) {
                        
                        clearInterval(shotInterval);
                        shot.remove();
                        wall.style.backgroundColor = '#FFD700'; // Indicate hit
                        document.getElementById('messages').textContent = 'Hit! Wall damaged.';
                        setTimeout(() => wall.remove(), 500); // Wall destroyed on hit
                    }
                });

}, 30);

document.getElementById('messages').textContent = 'BLAM! (Shot fired)';
        }

// Initialize player position
        updatePlayerPosition();
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Character HTML Editor</title>
    
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
    <style>
        body {
            display: flex;
            margin: 0;
            padding: 0;
            height: 100vh;
            font-family: sans-serif;
            background-color: #2c3e50;
        }

.panel {
            flex: 1;
            padding: 15px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
        }

/* Editor Panel Styling */
        .editor-panel {
            background-color: #1e1e1e;
            color: #d4d4d4;
        }

#html-editor {
            flex-grow: 1;
            width: 100%;
            border: none;
            padding: 15px;
            box-sizing: border-box;
            font-family: 'Consolas', 'Monospace';
            font-size: 14px;
            background-color: #1e1e1e;
            color: #d4d4d4;
            resize: none;
            outline: none;
        }

/* 3D Viewer Panel Styling */
        .viewer-panel {
            background-color: #ecf0f1;
        }

model-viewer {
            width: 100%;
            height: 100%;
            border: 1px solid #bdc3c7;
            border-radius: 8px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

h1 {
            color: #ecf0f1;
            font-size: 1.5em;
            margin-top: 0;
            margin-bottom: 10px;
        }
        .viewer-panel h1 {
            color: #2c3e50;
        }
    </style>
</head>
<body>

<div class="panel editor-panel">
        <h1></> HTML Code Editor</h1>
        <input id="html-editor" placeholder="Start typing your HTML code..."
<!DOCTYPE html>
<html>
<head>
    <title>My Awesome Page</title>
</head>
<body>
    <h1>Code Like a Pro!</h1>
    <p>This is your code area.</p>
</body>
</html>
        />
    </div>

<div class="panel viewer-panel">
        <h1>3D Code Assistant</h1>
        
        <model-viewer
            src="https://modelviewer.dev/shared-assets/models/Astronaut.glb"
            alt="A friendly 3D astronaut assistant"
            auto-rotate
            camera-controls
            interaction-prompt="none"
            shadow-intensity="1"
            exposure="1.5"
            background-color="#ecf0f1"
        ></model-viewer>
    </div>

</body>
</html>

CSS