Jeu HTML : Battle Royale simple avec construction/tir

733 31lhelton

Ouvrir dans l'éditeur Publiez votre code

Jeu HTML : Battle Royale simple avec construction/tir

Recommandé

20 March 2024

Modèle de page de destination HTML avec animations

19 January 2024

Formulaire de connexion avec validation des entrées

21 April 2026

Port Web du jeu HTML5 CloverPit

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