Spaces:

CommanderLazarus
/

ufo-maze-runner

Running

Make the board more complex. Use 25 squares by 25 squares as the measurement.

b00966f verified 10 months ago

9.44 kB

document.addEventListener('DOMContentLoaded', () => {
    const canvas = document.getElementById('maze-canvas');
    const ctx = canvas.getContext('2d');
    const timeDisplay = document.getElementById('time');
    const movesDisplay = document.getElementById('moves');
    const difficultySelect = document.getElementById('difficulty');
    const startBtn = document.getElementById('start-btn');
    const upBtn = document.getElementById('up-btn');
    const downBtn = document.getElementById('down-btn');
    const leftBtn = document.getElementById('left-btn');
    const rightBtn = document.getElementById('right-btn');

    // Set canvas size
    function resizeCanvas() {
        const container = document.getElementById('maze-container');
        const size = Math.min(container.offsetWidth, container.offsetHeight);
        canvas.width = size;
        canvas.height = size;
    }
    // Game variables
    let maze = [];
    let cellSize = 0;
    let orientationEnabled = false;
let ufo = { x: 0, y: 0 };
    let exit = { x: 0, y: 0 };
    let moves = 0;
    let time = 0;
    let timer = null;
    let gameRunning = false;
    let mazeSize = 25;
// Handle device orientation
    function handleOrientation(event) {
        if (!gameRunning) return;
        
        const tiltThreshold = 15; // degrees
        const beta = event.beta;  // front-to-back tilt
        const gamma = event.gamma; // left-to-right tilt
        
        if (beta > tiltThreshold) {
            moveUfo(0, 1); // tilt forward = move down
        } else if (beta < -tiltThreshold) {
            moveUfo(0, -1); // tilt backward = move up
        }
        
        if (gamma > tiltThreshold) {
            moveUfo(1, 0); // tilt right = move right
        } else if (gamma < -tiltThreshold) {
            moveUfo(-1, 0); // tilt left = move left
        }
    }

    // Initialize game
    function initGame() {
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas);
        
        // Add device orientation listener
        if (window.DeviceOrientationEvent) {
            window.addEventListener('deviceorientation', handleOrientation);
        }
// Set maze size based on difficulty
        switch(difficultySelect.value) {
            case 'easy': mazeSize = 15; break;
            case 'medium': mazeSize = 25; break;
            case 'hard': mazeSize = 35; break;
}
        
        // Generate maze
        generateMaze();
        drawMaze();
        
        // Set up keyboard controls
        document.addEventListener('keydown', handleKeyPress);
        upBtn.addEventListener('click', () => moveUfo(0, -1));
        downBtn.addEventListener('click', () => moveUfo(0, 1));
        leftBtn.addEventListener('click', () => moveUfo(-1, 0));
        rightBtn.addEventListener('click', () => moveUfo(1, 0));
        
        // Start button
        startBtn.addEventListener('click', startGame);
    }

    // Generate maze using depth-first search
    function generateMaze() {
        // Initialize maze grid
        maze = Array(mazeSize).fill().map(() => Array(mazeSize).fill(1));
        
        // Start position (top-left corner)
        ufo = { x: 0, y: 0 };
        maze[ufo.y][ufo.x] = 0;
        
        // Exit position (bottom-right corner)
        exit = { x: mazeSize - 1, y: mazeSize - 1 };
        
        // Generate paths
        const stack = [{ x: ufo.x, y: ufo.y }];
        const directions = [
            { dx: 1, dy: 0 },
            { dx: -1, dy: 0 },
            { dx: 0, dy: 1 },
            { dx: 0, dy: -1 },
            { dx: 1, dy: 1 },
            { dx: -1, dy: -1 },
            { dx: 1, dy: -1 },
            { dx: -1, dy: 1 }
        ];
while (stack.length > 0) {
            const current = stack[stack.length - 1];
            const neighbors = [];
            
            // Find unvisited neighbors
            for (const dir of directions) {
                // For diagonal directions, make paths longer to prevent too many walls
                const step = (Math.abs(dir.dx) + Math.abs(dir.dy) === 2) ? 3 : 2;
                const nx = current.x + dir.dx * step;
                const ny = current.y + dir.dy * step;
if (nx >= 0 && nx < mazeSize && ny >= 0 && ny < mazeSize && maze[ny][nx] === 1) {
                    neighbors.push({ x: nx, y: ny, dir });
                }
            }
            
            if (neighbors.length > 0) {
                const next = neighbors[Math.floor(Math.random() * neighbors.length)];
                // Carve out the path
                for (let i = 1; i <= (Math.abs(next.dir.dx) + Math.abs(next.dir.dy) === 2 ? 3 : 2); i++) {
                    const pathX = current.x + next.dir.dx * i;
                    const pathY = current.y + next.dir.dy * i;
                    if (pathX >= 0 && pathX < mazeSize && pathY >= 0 && pathY < mazeSize) {
                        maze[pathY][pathX] = 0;
                    }
                }
stack.push({ x: next.x, y: next.y });
            } else {
                stack.pop();
            }
        }
        
        // Ensure exit is reachable
        maze[exit.y][exit.x] = 0;
    }

    // Draw maze on canvas
    function drawMaze() {
        cellSize = canvas.width / mazeSize;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Draw walls
        ctx.fillStyle = '#374151';
        ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
        ctx.shadowBlur = 5;
        ctx.shadowOffsetX = 2;
        ctx.shadowOffsetY = 2;
for (let y = 0; y < mazeSize; y++) {
            for (let x = 0; x < mazeSize; x++) {
                if (maze[y][x] === 1) {
                    ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
                }
            }
        }
        
        // Draw exit
        ctx.fillStyle = '#10B981';
        ctx.shadowColor = 'rgba(16, 185, 129, 0.5)';
        ctx.shadowBlur = 10;
ctx.fillRect(exit.x * cellSize, exit.y * cellSize, cellSize, cellSize);
        
        // Draw UFO
        drawUfo();
    }

    // Draw UFO
    function drawUfo() {
        const centerX = ufo.x * cellSize + cellSize / 2;
        const centerY = ufo.y * cellSize + cellSize / 2;
        const radius = cellSize * 0.3;
// UFO body
        ctx.beginPath();
        ctx.ellipse(centerX, centerY, radius, radius * 0.6, 0, 0, Math.PI * 2);
        ctx.fillStyle = '#7C3AED';
        ctx.shadowColor = 'rgba(124, 58, 237, 0.5)';
        ctx.shadowBlur = 10;
ctx.fill();
        
        // UFO dome
        ctx.beginPath();
        ctx.ellipse(centerX, centerY - radius * 0.2, radius * 0.7, radius * 0.4, 0, 0, Math.PI * 2);
        ctx.fillStyle = 'rgba(167, 139, 250, 0.7)';
ctx.fill();
        
        // UFO lights
        ctx.beginPath();
        for (let i = 0; i < 5; i++) {
            const lightX = centerX - radius * 0.6 + i * radius * 0.3;
            ctx.arc(lightX, centerY + radius * 0.3, radius * 0.1, 0, Math.PI * 2);
        }
        ctx.fillStyle = '#F59E0B';
        ctx.shadowColor = 'rgba(245, 158, 11, 0.5)';
        ctx.shadowBlur = 5;
ctx.fill();
    }

    // Handle keyboard input
    function handleKeyPress(e) {
        if (!gameRunning) return;
        
        switch(e.key) {
            case 'ArrowUp': moveUfo(0, -1); break;
            case 'ArrowDown': moveUfo(0, 1); break;
            case 'ArrowLeft': moveUfo(-1, 0); break;
            case 'ArrowRight': moveUfo(1, 0); break;
        }
    }

    // Move UFO
    function moveUfo(dx, dy) {
        if (!gameRunning || (orientationEnabled && dx === 0 && dy === 0)) return;
const newX = ufo.x + dx;
        const newY = ufo.y + dy;
        
        // Check if move is valid
        if (newX >= 0 && newX < mazeSize && newY >= 0 && newY < mazeSize && maze[newY][newX] === 0) {
            ufo.x = newX;
            ufo.y = newY;
            moves++;
            movesDisplay.textContent = moves;
            drawMaze();
            
            // Check if reached exit
            if (ufo.x === exit.x && ufo.y === exit.y) {
                endGame(true);
            }
        }
    }
    // Toggle tilt controls
    document.getElementById('tilt-control').addEventListener('change', function() {
        orientationEnabled = this.checked;
        if (orientationEnabled && !gameRunning) {
            alert('Tilt controls enabled! Tilt your device to move the UFO.');
        }
    });

    // Start game
    function startGame() {
        if (gameRunning) return;
// Reset game state
        moves = 0;
        time = 0;
        movesDisplay.textContent = moves;
        timeDisplay.textContent = '00:00';
        
        // Generate new maze
        generateMaze();
        drawMaze();
        
        // Start timer
        gameRunning = true;
        timer = setInterval(() => {
            time++;
            const minutes = Math.floor(time / 60).toString().padStart(2, '0');
            const seconds = (time % 60).toString().padStart(2, '0');
            timeDisplay.textContent = `${minutes}:${seconds}`;
        }, 1000);
        
        startBtn.textContent = 'Restart Game';
    }

    // End game
    function endGame(win) {
        gameRunning = false;
        clearInterval(timer);
        
        if (win) {
            setTimeout(() => {
                alert(`Congratulations! You escaped the maze in ${time} seconds with ${moves} moves!`);
            }, 100);
        }
    }

    // Initialize the game
    initGame();
});

	document.addEventListener('DOMContentLoaded', () => {
	const canvas = document.getElementById('maze-canvas');
	const ctx = canvas.getContext('2d');
	const timeDisplay = document.getElementById('time');
	const movesDisplay = document.getElementById('moves');
	const difficultySelect = document.getElementById('difficulty');
	const startBtn = document.getElementById('start-btn');
	const upBtn = document.getElementById('up-btn');
	const downBtn = document.getElementById('down-btn');
	const leftBtn = document.getElementById('left-btn');
	const rightBtn = document.getElementById('right-btn');

	// Set canvas size
	function resizeCanvas() {
	const container = document.getElementById('maze-container');
	const size = Math.min(container.offsetWidth, container.offsetHeight);
	canvas.width = size;
	canvas.height = size;
	}
	// Game variables
	let maze = [];
	let cellSize = 0;
	let orientationEnabled = false;
	let ufo = { x: 0, y: 0 };
	let exit = { x: 0, y: 0 };
	let moves = 0;
	let time = 0;
	let timer = null;
	let gameRunning = false;
	let mazeSize = 25;
	// Handle device orientation
	function handleOrientation(event) {
	if (!gameRunning) return;

	const tiltThreshold = 15; // degrees
	const beta = event.beta; // front-to-back tilt
	const gamma = event.gamma; // left-to-right tilt

	if (beta > tiltThreshold) {
	moveUfo(0, 1); // tilt forward = move down
	} else if (beta < -tiltThreshold) {
	moveUfo(0, -1); // tilt backward = move up
	}

	if (gamma > tiltThreshold) {
	moveUfo(1, 0); // tilt right = move right
	} else if (gamma < -tiltThreshold) {
	moveUfo(-1, 0); // tilt left = move left
	}
	}

	// Initialize game
	function initGame() {
	resizeCanvas();
	window.addEventListener('resize', resizeCanvas);

	// Add device orientation listener
	if (window.DeviceOrientationEvent) {
	window.addEventListener('deviceorientation', handleOrientation);
	}
	// Set maze size based on difficulty
	switch(difficultySelect.value) {
	case 'easy': mazeSize = 15; break;
	case 'medium': mazeSize = 25; break;
	case 'hard': mazeSize = 35; break;
	}

	// Generate maze
	generateMaze();
	drawMaze();

	// Set up keyboard controls
	document.addEventListener('keydown', handleKeyPress);
	upBtn.addEventListener('click', () => moveUfo(0, -1));
	downBtn.addEventListener('click', () => moveUfo(0, 1));
	leftBtn.addEventListener('click', () => moveUfo(-1, 0));
	rightBtn.addEventListener('click', () => moveUfo(1, 0));

	// Start button
	startBtn.addEventListener('click', startGame);
	}

	// Generate maze using depth-first search
	function generateMaze() {
	// Initialize maze grid
	maze = Array(mazeSize).fill().map(() => Array(mazeSize).fill(1));

	// Start position (top-left corner)
	ufo = { x: 0, y: 0 };
	maze[ufo.y][ufo.x] = 0;

	// Exit position (bottom-right corner)
	exit = { x: mazeSize - 1, y: mazeSize - 1 };

	// Generate paths
	const stack = [{ x: ufo.x, y: ufo.y }];
	const directions = [
	{ dx: 1, dy: 0 },
	{ dx: -1, dy: 0 },
	{ dx: 0, dy: 1 },
	{ dx: 0, dy: -1 },
	{ dx: 1, dy: 1 },
	{ dx: -1, dy: -1 },
	{ dx: 1, dy: -1 },
	{ dx: -1, dy: 1 }
	];
	while (stack.length > 0) {
	const current = stack[stack.length - 1];
	const neighbors = [];

	// Find unvisited neighbors
	for (const dir of directions) {
	// For diagonal directions, make paths longer to prevent too many walls
	const step = (Math.abs(dir.dx) + Math.abs(dir.dy) === 2) ? 3 : 2;
	const nx = current.x + dir.dx * step;
	const ny = current.y + dir.dy * step;
	if (nx >= 0 && nx < mazeSize && ny >= 0 && ny < mazeSize && maze[ny][nx] === 1) {
	neighbors.push({ x: nx, y: ny, dir });
	}
	}

	if (neighbors.length > 0) {
	const next = neighbors[Math.floor(Math.random() * neighbors.length)];
	// Carve out the path
	for (let i = 1; i <= (Math.abs(next.dir.dx) + Math.abs(next.dir.dy) === 2 ? 3 : 2); i++) {
	const pathX = current.x + next.dir.dx * i;
	const pathY = current.y + next.dir.dy * i;
	if (pathX >= 0 && pathX < mazeSize && pathY >= 0 && pathY < mazeSize) {
	maze[pathY][pathX] = 0;
	}
	}
	stack.push({ x: next.x, y: next.y });
	} else {
	stack.pop();
	}
	}

	// Ensure exit is reachable
	maze[exit.y][exit.x] = 0;
	}

	// Draw maze on canvas
	function drawMaze() {
	cellSize = canvas.width / mazeSize;
	ctx.clearRect(0, 0, canvas.width, canvas.height);

	// Draw walls
	ctx.fillStyle = '#374151';
	ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
	ctx.shadowBlur = 5;
	ctx.shadowOffsetX = 2;
	ctx.shadowOffsetY = 2;
	for (let y = 0; y < mazeSize; y++) {
	for (let x = 0; x < mazeSize; x++) {
	if (maze[y][x] === 1) {
	ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
	}
	}
	}

	// Draw exit
	ctx.fillStyle = '#10B981';
	ctx.shadowColor = 'rgba(16, 185, 129, 0.5)';
	ctx.shadowBlur = 10;
	ctx.fillRect(exit.x * cellSize, exit.y * cellSize, cellSize, cellSize);

	// Draw UFO
	drawUfo();
	}

	// Draw UFO
	function drawUfo() {
	const centerX = ufo.x * cellSize + cellSize / 2;
	const centerY = ufo.y * cellSize + cellSize / 2;
	const radius = cellSize * 0.3;
	// UFO body
	ctx.beginPath();
	ctx.ellipse(centerX, centerY, radius, radius * 0.6, 0, 0, Math.PI * 2);
	ctx.fillStyle = '#7C3AED';
	ctx.shadowColor = 'rgba(124, 58, 237, 0.5)';
	ctx.shadowBlur = 10;
	ctx.fill();

	// UFO dome
	ctx.beginPath();
	ctx.ellipse(centerX, centerY - radius * 0.2, radius * 0.7, radius * 0.4, 0, 0, Math.PI * 2);
	ctx.fillStyle = 'rgba(167, 139, 250, 0.7)';
	ctx.fill();

	// UFO lights
	ctx.beginPath();
	for (let i = 0; i < 5; i++) {
	const lightX = centerX - radius * 0.6 + i * radius * 0.3;
	ctx.arc(lightX, centerY + radius * 0.3, radius * 0.1, 0, Math.PI * 2);
	}
	ctx.fillStyle = '#F59E0B';
	ctx.shadowColor = 'rgba(245, 158, 11, 0.5)';
	ctx.shadowBlur = 5;
	ctx.fill();
	}

	// Handle keyboard input
	function handleKeyPress(e) {
	if (!gameRunning) return;

	switch(e.key) {
	case 'ArrowUp': moveUfo(0, -1); break;
	case 'ArrowDown': moveUfo(0, 1); break;
	case 'ArrowLeft': moveUfo(-1, 0); break;
	case 'ArrowRight': moveUfo(1, 0); break;
	}
	}

	// Move UFO
	function moveUfo(dx, dy) {
	if (!gameRunning \|\| (orientationEnabled && dx === 0 && dy === 0)) return;
	const newX = ufo.x + dx;
	const newY = ufo.y + dy;

	// Check if move is valid
	if (newX >= 0 && newX < mazeSize && newY >= 0 && newY < mazeSize && maze[newY][newX] === 0) {
	ufo.x = newX;
	ufo.y = newY;
	moves++;
	movesDisplay.textContent = moves;
	drawMaze();

	// Check if reached exit
	if (ufo.x === exit.x && ufo.y === exit.y) {
	endGame(true);
	}
	}
	}
	// Toggle tilt controls
	document.getElementById('tilt-control').addEventListener('change', function() {
	orientationEnabled = this.checked;
	if (orientationEnabled && !gameRunning) {
	alert('Tilt controls enabled! Tilt your device to move the UFO.');
	}
	});

	// Start game
	function startGame() {
	if (gameRunning) return;
	// Reset game state
	moves = 0;
	time = 0;
	movesDisplay.textContent = moves;
	timeDisplay.textContent = '00:00';

	// Generate new maze
	generateMaze();
	drawMaze();

	// Start timer
	gameRunning = true;
	timer = setInterval(() => {
	time++;
	const minutes = Math.floor(time / 60).toString().padStart(2, '0');
	const seconds = (time % 60).toString().padStart(2, '0');
	timeDisplay.textContent = `${minutes}:${seconds}`;
	}, 1000);

	startBtn.textContent = 'Restart Game';
	}

	// End game
	function endGame(win) {
	gameRunning = false;
	clearInterval(timer);

	if (win) {
	setTimeout(() => {
	alert(`Congratulations! You escaped the maze in ${time} seconds with ${moves} moves!`);
	}, 100);
	}
	}

	// Initialize the game
	initGame();
	});