A Code by alejandrokundrah

Open In Editor Video Publish Your Code

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

A Code by alejandrokundrah

Recommended

CSS Gradient Button

Calculator UI -Neumorphism -Drak

Shooter Game HTML5 Canvas with Leaderboard

HTML

CSS

JS

Recommended

CSS Gradient Button

Calculator UI -Neumorphism -Drak

Shooter Game HTML5 Canvas with Leaderboard

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS