Un code par alejandrokundrah

1,199 alejandrokundrah

Ouvrir dans l'éditeur Publiez votre code

Recommandé

24 July 2025

Code HTML du commutateur à bascule CSS

10 January 2026

Code HTML et CSS du formulaire de connexion animé

22 January 2026

Modèle HTML pour un mode de vie durable et une retraite en pleine nature

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BRUTALIST RACER</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="game-container">
    <div class="header">
      <h1 class="title">BRUTALIST RACER</h1>
      <div class="stats">
        <div class="stat-block">
          <span class="label">SPEED</span>
          <span id="speed" class="value">0</span>
        </div>
        <div class="stat-block">
          <span class="label">SCORE</span>
          <span id="score" class="value">0</span>
        </div>
      </div>
    </div>

<div class="controls">
      <div class="control-block">
        <span class="control-label">CONTROLS</span>
        <div class="control-row">
          <span class="key">←→</span>
          <span class="desc">STEER</span>
        </div>
        <div class="control-row">
          <span class="key">↑</span>
          <span class="desc">ACCELERATE</span>
        </div>
        <div class="control-row">
          <span class="key">↓</span>
          <span class="desc">BRAKE</span>
        </div>
      </div>
    </div>

<div id="gameOver" class="game-over hidden">
      <div class="game-over-content">
        <h2>GAME OVER</h2>
        <p>FINAL SCORE: <span id="finalScore">0</span></p>
        <button id="restartBtn" class="restart-btn">RESTART</button>
      </div>
    </div>
  </div>

CSS

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700;800&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'JetBrains Mono', monospace;
  background: #0a0a0a;
  color: #ffffff;
  overflow: hidden;
  user-select: none;
}

.game-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: linear-gradient(45deg, #0a0a0a 0%, #1a1a1a 100%);
}

.header {
  width: 100%;
  padding: 20px;
  background: #000000;
  border-bottom: 4px solid #ff0000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 8px 0 #330000;
}

.title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #ffffff;
  text-shadow: 4px 4px 0 #ff0000;
  letter-spacing: 4px;
}

.stats {
  display: flex;
  gap: 30px;
}

.stat-block {
  background: #ff0000;
  padding: 15px 25px;
  border: 3px solid #ffffff;
  box-shadow: 6px 6px 0 #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;
}

.label {
  font-size: 0.9rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 5px;
}

.value {
  font-size: 1.8rem;
  font-weight: 800;
  color: #ffffff;
}

#gameCanvas {
  background: #2a2a2a;
  border: 8px solid #ffffff;
  box-shadow: 0 0 0 4px #ff0000, 12px 12px 0 #000000;
  margin: 20px 0;
}

.controls {
  background: #000000;
  border: 4px solid #ffffff;
  padding: 20px;
  box-shadow: 8px 8px 0 #ff0000;
}

.control-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.control-label {
  font-size: 1.2rem;
  font-weight: 800;
  color: #ff0000;
  margin-bottom: 10px;
  text-align: center;
}

.control-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.key {
  background: #ff0000;
  color: #000000;
  padding: 8px 15px;
  font-weight: 800;
  border: 2px solid #ffffff;
  min-width: 60px;
  text-align: center;
}

.desc {
  color: #ffffff;
  font-weight: 700;
  flex: 1;
}

.game-over {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.game-over-content {
  background: #000000;
  border: 8px solid #ff0000;
  padding: 40px;
  text-align: center;
  box-shadow: 16px 16px 0 #ffffff;
}

.game-over h2 {
  font-size: 3rem;
  font-weight: 800;
  color: #ff0000;
  text-shadow: 4px 4px 0 #ffffff;
  margin-bottom: 20px;
}

.game-over p {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 30px;
}

.restart-btn {
  background: #ff0000;
  color: #000000;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1.2rem;
  font-weight: 800;
  padding: 15px 30px;
  border: 4px solid #ffffff;
  cursor: pointer;
  box-shadow: 6px 6px 0 #000000;
  transition: transform 0.1s;
}

.restart-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 #000000;
}

.restart-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000000;
}

.hidden {
  display: none !important;
}

@media (max-width: 900px) {
  .title {
    font-size: 1.8rem;
  }

.stats {
    gap: 15px;
  }

.stat-block {
    padding: 10px 15px;
    min-width: 80px;
  }

#gameCanvas {
    width: 90vw;
    height: auto;
  }
}

class BrutalistRacer {
  constructor() {
    this.canvas = document.getElementById('gameCanvas');
    this.ctx = this.canvas.getContext('2d');
    this.speedDisplay = document.getElementById('speed');
    this.scoreDisplay = document.getElementById('score');
    this.gameOverScreen = document.getElementById('gameOver');
    this.finalScoreDisplay = document.getElementById('finalScore');
    this.restartBtn = document.getElementById('restartBtn');

this.gameWidth = this.canvas.width;
    this.gameHeight = this.canvas.height;

this.init();
    this.setupEventListeners();
    this.gameLoop();
  }

init() {
    this.player = {
      x: this.gameWidth / 2 - 25,
      y: this.gameHeight - 100,
      width: 50,
      height: 80,
      speed: 0,
      maxSpeed: 8,
      acceleration: 0.3,
      friction: 0.05,
      turnSpeed: 0
    };

this.enemies = [];
    this.roadLines = [];
    this.score = 0;
    this.gameSpeed = 2;
    this.gameRunning = true;
    this.keys = {};

// Initialize road lines
    for (let i = 0; i < 10; i++) {
      this.roadLines.push({
        x: this.gameWidth / 2 - 5,
        y: i * 80,
        width: 10,
        height: 40
      });
    }

this.spawnEnemy();
  }

setupEventListeners() {
    document.addEventListener('keydown', (e) => {
      this.keys[e.key] = true;
    });

document.addEventListener('keyup', (e) => {
      this.keys[e.key] = false;
    });

this.restartBtn.addEventListener('click', () => {
      this.restart();
    });
  }

spawnEnemy() {
    if (Math.random() < 0.02 + this.gameSpeed * 0.001) {
      const lanes = [150, 250, 350, 450, 550];
      const lane = lanes[Math.floor(Math.random() * lanes.length)];

this.enemies.push({
        x: lane,
        y: -100,
        width: 50,
        height: 80,
        speed: 3 + Math.random() * 2
      });
    }
  }

update() {
    if (!this.gameRunning) return;

// Player controls
    if (this.keys['ArrowUp']) {
      this.player.speed = Math.min(this.player.speed + this.player.acceleration, this.player.maxSpeed);
    } else if (this.keys['ArrowDown']) {
      this.player.speed = Math.max(this.player.speed - this.player.acceleration * 2, -this.player.maxSpeed / 2);
    } else {
      this.player.speed *= (1 - this.player.friction);
    }

if (this.keys['ArrowLeft']) {
      this.player.turnSpeed = -5;
      if (this.player.x > 100) {
        this.player.x -= 5;
      }
    } else if (this.keys['ArrowRight']) {
      this.player.turnSpeed = 5;
      if (this.player.x < this.gameWidth - 150) {
        this.player.x += 5;
      }
    } else {
      this.player.turnSpeed = 0;
    }

// Update road lines
    this.roadLines.forEach(line => {
      line.y += this.gameSpeed + this.player.speed;
      if (line.y > this.gameHeight) {
        line.y = -40;
      }
    });

// Update enemies
    this.enemies.forEach((enemy, index) => {
      enemy.y += this.gameSpeed + this.player.speed;

if (enemy.y > this.gameHeight) {
        this.enemies.splice(index, 1);
        this.score += 10;
      }

// Collision detection
      if (this.checkCollision(this.player, enemy)) {
        this.gameOver();
      }
    });

// Spawn new enemies
    this.spawnEnemy();

// Increase game speed gradually
    this.gameSpeed += 0.001;
    this.score += Math.floor(this.player.speed);

// Update display
    this.speedDisplay.textContent = Math.floor(this.player.speed * 10);
    this.scoreDisplay.textContent = this.score;
  }

checkCollision(rect1, rect2) {
    return rect1.x < rect2.x + rect2.width &&
           rect1.x + rect1.width > rect2.x &&
           rect1.y < rect2.y + rect2.height &&
           rect1.y + rect1.height > rect2.y;
  }

render() {
    // Clear canvas
    this.ctx.fillStyle = '#1a1a1a';
    this.ctx.fillRect(0, 0, this.gameWidth, this.gameHeight);

// Draw road
    this.ctx.fillStyle = '#333333';
    this.ctx.fillRect(80, 0, this.gameWidth - 160, this.gameHeight);

// Draw road borders
    this.ctx.fillStyle = '#ffffff';
    this.ctx.fillRect(80, 0, 8, this.gameHeight);
    this.ctx.fillRect(this.gameWidth - 88, 0, 8, this.gameHeight);

// Draw road lines
    this.ctx.fillStyle = '#ffff00';
    this.roadLines.forEach(line => {
      this.ctx.fillRect(line.x, line.y, line.width, line.height);
    });

// Draw player car
    this.drawCar(this.player.x, this.player.y, '#ff0000', this.player.turnSpeed);

// Draw enemies
    this.enemies.forEach(enemy => {
      this.drawCar(enemy.x, enemy.y, '#0066ff', 0);
    });

// Draw side decorations
    this.ctx.fillStyle = '#ff0000';
    for (let i = 0; i < 20; i++) {
      this.ctx.fillRect(10, i * 40, 20, 20);
      this.ctx.fillRect(this.gameWidth - 30, i * 40, 20, 20);
    }
  }

drawCar(x, y, color, turn) {
    this.ctx.save();
    this.ctx.translate(x + 25, y + 40);
    this.ctx.rotate(turn * 0.1);

// Car body
    this.ctx.fillStyle = color;
    this.ctx.fillRect(-25, -40, 50, 80);

// Car outline
    this.ctx.strokeStyle = '#ffffff';
    this.ctx.lineWidth = 3;
    this.ctx.strokeRect(-25, -40, 50, 80);

// Car details
    this.ctx.fillStyle = '#000000';
    this.ctx.fillRect(-20, -30, 40, 20);
    this.ctx.fillRect(-20, 10, 40, 20);

// Wheels
    this.ctx.fillStyle = '#000000';
    this.ctx.fillRect(-30, -25, 10, 15);
    this.ctx.fillRect(20, -25, 10, 15);
    this.ctx.fillRect(-30, 10, 10, 15);
    this.ctx.fillRect(20, 10, 10, 15);

this.ctx.restore();
  }

gameOver() {
    this.gameRunning = false;
    this.finalScoreDisplay.textContent = this.score;
    this.gameOverScreen.classList.remove('hidden');
  }

restart() {
    this.gameOverScreen.classList.add('hidden');
    this.init();
  }

gameLoop() {
    this.update();
    this.render();
    requestAnimationFrame(() => this.gameLoop());
  }
}

// Start the game when the page loads
window.addEventListener('load', () => {
  new BrutalistRacer();
});