Un código de alejandrokundrah

Abrir en el editor Publica tu código

Recomendado

27 November 2024

Contenedor de animación de mensajes HTML

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

Un código de alejandrokundrah

Recomendado

Productos de tarjetas

ki ok día de Nueva Jersey

Contenedor de animación de mensajes HTML

HTML

CSS

JS

Recomendado

Productos de tarjetas

ki ok día de Nueva Jersey

Contenedor de animación de mensajes HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS