Cyberpunk Data Runner

body { margin: 0; overflow: hidden; background-color: #111; display: flex; justify-content: center; align-items: center; height: 100vh; } #gameCanvas { background-color: #000; border: 2px solid #0f0; /* Neon green border */ } const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const gridSize = 20; const gridWidth = canvas.width / gridSize; const gridHeight = canvas.height / gridSize; let player = { x: Math.floor(gridWidth / 2), y: Math.floor(gridHeight / 2), color: '#00ff00', // Neon green direction: 'right', score: 0 }; let dataPackets = []; let enemies = []; let obstacles = []; let gameRunning = true; let gameSpeed = 150; // milliseconds per frame function generateDataPacket() { dataPackets.push({ x: Math.floor(Math.random() * gridWidth), y: Math.floor(Math.random() * gridHeight), color: '#ff00ff' // Magenta }); } function generateEnemy() { enemies.push({ x: Math.floor(Math.random() * gridWidth), y: Math.floor(Math.random() * gridHeight), color: '#ff0000', // Red direction: 'left' // Initial direction }); } function generateObstacles() { for (let i = 0; i < 10; i++) { obstacles.push({ x: Math.floor(Math.random() * gridWidth), y: Math.floor(Math.random() * gridHeight), color: '#555' // Dark grey }); } } function initGame() { generateDataPacket(); generateEnemy(); generateObstacles(); } function update() { if (!gameRunning) return; // Player movement if (player.direction === 'left') player.x--; if (player.direction === 'right') player.x++; if (player.direction === 'up') player.y--; if (player.direction === 'down') player.y++; // Keep player within bounds if (player.x < 0) player.x = gridWidth - 1; if (player.x >= gridWidth) player.x = 0; if (player.y < 0) player.y = gridHeight - 1; if (player.y >= gridHeight) player.y = 0; // Enemy movement - very basic AI enemies.forEach(enemy => { // Simple AI: Move towards player's x position if (enemy.x < player.x) { enemy.x++; } else if (enemy.x > player.x) { enemy.x--; } // Sometimes move vertically if (Math.random() < 0.1) { if (enemy.y < player.y) { enemy.y++; } else if (enemy.y > player.y) { enemy.y--; } } }); // Data packet collection for (let i = dataPackets.length - 1; i >= 0; i--) { if (dataPackets[i].x === player.x && dataPackets[i].y === player.y) { player.score++; dataPackets.splice(i, 1); generateDataPacket(); // Generate new data packet } } // Enemy collision enemies.forEach(enemy => { if (enemy.x === player.x && enemy.y === player.y) { gameRunning = false; alert('Game Over! Score: ' + player.score); } }); // Obstacle collision - basic, just stops movement for now. Can be improved. obstacles.forEach(obstacle => { if (obstacle.x === player.x && obstacle.y === player.y) { // Basic obstacle collision: Reset player position slightly if (player.direction === 'left') player.x++; if (player.direction === 'right') player.x--; if (player.direction === 'up') player.y++; if (player.direction === 'down') player.y--; } }); } function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw obstacles obstacles.forEach(obstacle => { ctx.fillStyle = obstacle.color; ctx.fillRect(obstacle.x * gridSize, obstacle.y * gridSize, gridSize, gridSize); }); // Draw data packets dataPackets.forEach(packet => { ctx.fillStyle = packet.color; ctx.fillRect(packet.x * gridSize, packet.y * gridSize, gridSize, gridSize); }); // Draw enemies enemies.forEach(enemy => { ctx.fillStyle = enemy.color; ctx.fillRect(enemy.x * gridSize, enemy.y * gridSize, gridSize, gridSize); }); // Draw player ctx.fillStyle = player.color; ctx.fillRect(player.x * gridSize, player.y * gridSize, gridSize, gridSize); // Display score ctx.fillStyle = '#fff'; ctx.font = '16px monospace'; ctx.fillText('Score: ' + player.score, 10, 20); } function gameLoop() { update(); draw(); if (gameRunning) { setTimeout(gameLoop, gameSpeed); } } document.addEventListener('keydown', (event) => { switch (event.key) { case 'ArrowLeft': player.direction = 'left'; break; case 'ArrowRight': player.direction = 'right'; break; case 'ArrowUp': player.direction = 'up'; break; case 'ArrowDown': player.direction = 'down'; break; } }); initGame(); gameLoop();