jeu de parkour simple

81 0 Jeux k2007531 Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

5 August 2024

Ventilateur de bureau

18 February 2024

Bouton de confirmation

31 October 2026

Mise en page du portail de jeu en mode sombre avec HTML et CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS Parkour Obby</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      background: #1a1a1a;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      color: #fff;
      font-family: sans-serif;
      overflow: hidden;
    }
    h1 {
      margin-bottom: 10px;
      font-size: 1.5rem;
      color: #00ffcc;
    }
    canvas {
      background: #2b2b2b;
      border: 4px solid #00ffcc;
      box-shadow: 0 0 20px rgba(0, 255, 204, 0.3);
    }
    .instructions {
      margin-top: 10px;
      font-size: 0.9rem;
      color: #ccc;
    }
    span.key {
      background: #444;
      padding: 2px 6px;
      border-radius: 4px;
      color: #00ffcc;
      font-weight: bold;
    }
  </style>
</head>
<body>

<h1>BLOCK PARKUR: OBBY</h1>
  <canvas id="gameCanvas" width="800" height="400"></canvas>
  <div class="instructions">
    Use <span class="key">A</span> / <span class="key">D</span> to move left / right | 
    <span class="key">W</span> or <span class="key">Space</span> to jump (Double jump allowed!)
  </div>

// Player object
    const player = {
      x: 50,
      y: 200,
      width: 25,
      height: 25,
      vx: 0,
      vy: 0,
      speed: 4,
      gravity: 0.5,
      jumpStrength: -9,
      grounded: false,
      jumps: 0,
      maxJumps: 2
    };

// Controls
    const keys = {
      left: false,
      right: false
    };

window.addEventListener('keyup', (e) => {
      if (e.code === 'KeyA' || e.code === 'ArrowLeft') keys.left = false;
      if (e.code === 'KeyD' || e.code === 'ArrowRight') keys.right = false;
    });

// Platforms (Obstacle course blocks: {x, y, w, h, type})
    // types: 'normal', 'lava' (death), 'win' (goal)
    const platforms = [
      { x: 0, y: 350, w: 200, h: 50, type: 'normal' },
      { x: 250, y: 300, w: 100, h: 20, type: 'normal' },
      { x: 400, y: 250, w: 80, h: 20, type: 'normal' },
      { x: 350, y: 380, w: 150, h: 20, type: 'lava' }, // Watch out for lava!
      { x: 530, y: 200, w: 80, h: 20, type: 'normal' },
      { x: 670, y: 150, w: 100, h: 20, type: 'normal' },
      { x: 720, y: 130, w: 50, h: 20, type: 'win' }   // Win block
    ];

function resetPlayer() {
      player.x = 50;
      player.y = 200;
      player.vx = 0;
      player.vy = 0;
      player.jumps = 0;
    }

function update() {
      // Horizontal movement
      if (keys.left) player.vx = -player.speed;
      else if (keys.right) player.vx = player.speed;
      else player.vx = 0;

player.x += player.vx;

// Vertical movement & gravity
      player.vy += player.gravity;
      player.y += player.vy;

player.grounded = false;

// Collision detection with platforms
      platforms.forEach(p => {
        if (
          player.x < p.x + p.w &&
          player.x + player.width > p.x &&
          player.y < p.y + p.h &&
          player.y + player.height > p.y
        ) {
          if (p.type === 'lava') {
            alert('You hit the lava! Try again.');
            resetPlayer();
          } else if (p.type === 'win') {
            alert('🎉 You beat the Obby!');
            resetPlayer();
          } else {
            // Landing on top of platform
            if (player.vy > 0 && (player.y + player.height - player.vy) <= p.y + 10) {
              player.y = p.y - player.height;
              player.vy = 0;
              player.grounded = true;
              player.jumps = 0;
            }
          }
        }
      });

// Fall off canvas reset
      if (player.y > canvas.height) {
        resetPlayer();
      }
    }

function draw() {
      // Clear canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw platforms
      platforms.forEach(p => {
        if (p.type === 'lava') ctx.fillStyle = '#ff3333';
        else if (p.type === 'win') ctx.fillStyle = '#ffd700';
        else ctx.fillStyle = '#00ffcc';
        
        ctx.fillRect(p.x, p.y, p.w, p.h);
      });

// Draw player
      ctx.fillStyle = '#ffffff';
      ctx.fillRect(player.x, player.y, player.width, player.height);
    }

function gameLoop() {
      update();
      draw();
      requestAnimationFrame(gameLoop);
    }

gameLoop();
  </script>
</body>
</html>

CSS

Comments 0

…