Un code par alejandrokundrah

325 alejandrokundrah

Ouvrir dans l'éditeur Publiez votre code

Recommandé

28 August 2024

Animation de défilement parallaxe

19 April 2025

Un code de Metehan

22 July 2025

Illustration d'œuf SVG : exemple de code

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;
  }
}

JS

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();
});

Recommandé

Animation de défilement parallaxe

Un code de Metehan

Illustration d'œuf SVG : exemple de code

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS