Changed around line 1
+ // Game initialization
+ let canvas, ctx;
+ let gameLoop;
+ let player = {
+ x: 100,
+ y: 100,
+ angle: 0,
+ health: 100,
+ ammo: 50
+ };
+
+ // DOM Elements
+ document.addEventListener('DOMContentLoaded', () => {
+ canvas = document.getElementById('gameCanvas');
+ ctx = canvas.getContext('2d');
+
+ // Mobile menu toggle
+ const menuToggle = document.querySelector('.menu-toggle');
+ const navLinks = document.querySelector('.nav-links');
+
+ menuToggle.addEventListener('click', () => {
+ navLinks.classList.toggle('active');
+ });
+
+ // Start game button
+ const startButton = document.getElementById('startGame');
+ startButton.addEventListener('click', initGame);
+
+ // Set canvas size
+ resizeCanvas();
+ window.addEventListener('resize', resizeCanvas);
+ });
+
+ function resizeCanvas() {
+ const container = canvas.parentElement;
+ canvas.width = Math.min(800, container.clientWidth - 20);
+ canvas.height = canvas.width * 0.75;
+ }
+
+ function initGame() {
+ // Reset player stats
+ player.health = 100;
+ player.ammo = 50;
+ updateHUD();
+
+ // Start game loop
+ if (gameLoop) cancelAnimationFrame(gameLoop);
+ gameLoop = requestAnimationFrame(gameUpdate);
+
+ // Setup controls
+ setupControls();
+ }
+
+ function updateHUD() {
+ document.getElementById('healthValue').textContent = player.health;
+ document.getElementById('ammoValue').textContent = player.ammo;
+ }
+
+ function gameUpdate() {
+ // Clear canvas
+ ctx.fillStyle = '#000';
+ ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+ // Basic raycasting visualization
+ drawRaycastScene();
+
+ // Continue game loop
+ gameLoop = requestAnimationFrame(gameUpdate);
+ }
+
+ function drawRaycastScene() {
+ // Simple visualization with vertical lines
+ const numRays = 60;
+ const rayWidth = canvas.width / numRays;
+
+ for (let i = 0; i < numRays; i++) {
+ const rayAngle = (player.angle - 30 + (60 * i / numRays)) * Math.PI / 180;
+ const distance = calculateRayDistance(rayAngle);
+ const wallHeight = Math.min(canvas.height, (canvas.height * 500) / distance);
+
+ ctx.fillStyle = `rgb(${255 - distance}, 0, 0)`;
+ ctx.fillRect(
+ i * rayWidth,
+ (canvas.height - wallHeight) / 2,
+ rayWidth + 1,
+ wallHeight
+ );
+ }
+ }
+
+ function calculateRayDistance(angle) {
+ // Simplified distance calculation
+ return 500 + Math.cos(angle - player.angle * Math.PI / 180) * 100;
+ }
+
+ function setupControls() {
+ document.addEventListener('keydown', (e) => {
+ switch(e.key.toLowerCase()) {
+ case 'w':
+ player.y -= 5;
+ break;
+ case 's':
+ player.y += 5;
+ break;
+ case 'a':
+ player.x -= 5;
+ break;
+ case 'd':
+ player.x += 5;
+ break;
+ case ' ':
+ if (player.ammo > 0) {
+ player.ammo--;
+ updateHUD();
+ }
+ break;
+ }
+ });
+
+ canvas.addEventListener('mousemove', (e) => {
+ const rect = canvas.getBoundingClientRect();
+ const x = e.clientX - rect.left;
+ player.angle = (x / canvas.width) * 360;
+ });
+ }
