Embed

<!DOCTYPE html>
<html>
<head>
<title>Pointless Pursuit</title>
<style>
  body { margin:0; background:black; color:white; font-family:monospace; }
  canvas { display:block; margin:auto; background:black; }
</style>
</head>
<body>
<canvas id="gameCanvas" width="600" height="400"></canvas>
<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// Player
let player = { x: 300, y: 200, size: 10, speed: 2 };

// Meaning point
let point = { x: Math.random()*600, y: Math.random()*400, size: 8 };

// Score (meaningless)
let score = 0;

// Nihilistic quotes
const quotes = [
  "Nothing matters.",
  "The void is indifferent.",
  "Your existence is temporary.",
  "This score means nothing.",
  "Entropy always wins."
];
let currentQuote = quotes[Math.floor(Math.random()*quotes.length)];
let quoteTimer = 0;

// Input
let keys = {};
document.addEventListener('keydown', e => keys[e.key] = true);
document.addEventListener('keyup', e => keys[e.key] = false);

function update() {
  // Movement
  if(keys['ArrowUp'] || keys['w']) player.y -= player.speed;
  if(keys['ArrowDown'] || keys['s']) player.y += player.speed;
  if(keys['ArrowLeft'] || keys['a']) player.x -= player.speed;
  if(keys['ArrowRight'] || keys['d']) player.x += player.speed;

  // Boundaries
  player.x = Math.max(0, Math.min(canvas.width, player.x));
  player.y = Math.max(0, Math.min(canvas.height, player.y));

  // Collision with point
  if(Math.hypot(player.x - point.x, player.y - point.y) < player.size + point.size) {
    score++;
    point.x = Math.random()*canvas.width;
    point.y = Math.random()*canvas.height;
  }

  // Quote change timer
  quoteTimer++;
  if(quoteTimer > 300) { // every 5 seconds
    currentQuote = quotes[Math.floor(Math.random()*quotes.length)];
    quoteTimer = 0;
  }
}

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

  // Player
  ctx.fillStyle = "white";
  ctx.beginPath();
  ctx.arc(player.x, player.y, player.size, 0, Math.PI*2);
  ctx.fill();

  // Point
  ctx.fillStyle = "gray";
  ctx.beginPath();
  ctx.arc(point.x, point.y, point.size, 0, Math.PI*2);
  ctx.fill();

  // Score
  ctx.fillStyle = "white";
  ctx.fillText("Score: " + score + " (meaningless)", 10, 20);

  // Quote
  ctx.fillText(currentQuote, 10, canvas.height - 10);
}

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

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


Audio player