Jasne, oto podstawowa struktura gry typu Paper.io. Paper.io Clone

Paper.io Clone

body { display: flex; flex-direction: column; align-items: center; margin: 0; background-color: #f0f0f0; font-family: sans-serif; } canvas { border: 1px solid black; background-color: #ffffff; margin-top: 20px; } const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const gridSize = 20; const canvasSize = canvas.width; // Assuming square canvas const tileCount = canvasSize / gridSize; let player = { x: Math.floor(tileCount / 2), y: Math.floor(tileCount / 2), dx: 0, dy: 0, color: 'blue', trail: [], territory: [], // Store owned territory coordinates {x, y} isOutsideTerritory: false }; // Initial territory (e.g., a small square around the start) function initializeTerritory() { player.territory = []; // Clear existing territory const startSize = 1; // Size of the initial square (1x1 tile around the player) const startX = player.x - Math.floor(startSize / 2); const startY = player.y - Math.floor(startSize / 2); for (let i = 0; i < startSize; i++) { for (let j = 0; j < startSize; j++) { const tileX = startX + i; const tileY = startY + j; if (tileX >= 0 && tileX < tileCount && tileY >= 0 && tileY < tileCount) { player.territory.push({ x: tileX, y: tileY }); } } } // Ensure player start position is part of territory if (!isTileInTerritory(player.x, player.y)) { player.territory.push({ x: player.x, y: player.y }); } } function isTileInTerritory(x, y) { return player.territory.some(tile => tile.x === x && tile.y === y); } function isTileInTrail(x, y) { return player.trail.some(tile => tile.x === x && tile.y === y); } function gameLoop() { update(); draw(); setTimeout(gameLoop, 100); // Adjust speed as needed } function update() { // Store previous position const prevX = player.x; const prevY = player.y; // Move player player.x += player.dx; player.y += player.dy; // Boundary checks (simple wrap around for now) if (player.x < 0) player.x = tileCount - 1; if (player.x >= tileCount) player.x = 0; if (player.y < 0) player.y = tileCount - 1; if (player.y >= tileCount) player.y = 0; // Check if player moved const moved = player.x !== prevX || player.y !== prevY; if (moved) { const currentlyInTerritory = isTileInTerritory(player.x, player.y); // Left territory if (!currentlyInTerritory && !player.isOutsideTerritory) { player.isOutsideTerritory = true; player.trail = [{ x: prevX, y: prevY }]; // Start trail from the edge tile player.trail.push({ x: player.x, y: player.y }); // Add current pos to trail } // Moving outside territory else if (player.isOutsideTerritory) { // Check for collision with own trail if (isTileInTrail(player.x, player.y)) { // Game Over condition console.log("Game Over - Hit Trail!"); resetGame(); return; } player.trail.push({ x: player.x, y: player.y }); // Returned to territory - claim area if (currentlyInTerritory) { claimTerritory(); player.isOutsideTerritory = false; player.trail = []; } } } // Prevent moving back onto the immediately previous trail segment if (player.trail.length > 1) { const lastTrail = player.trail[player.trail.length - 2]; if (player.x === lastTrail.x && player.y === lastTrail.y) { // Effectively undo the move if it goes back immediately player.x = prevX; player.y = prevY; // Remove the invalid last step from trail if(player.trail.length > 0) player.trail.pop(); } } } function claimTerritory() { if (player.trail.length < 2) return; // Need at least two points to form a line // Add all trail tiles to the territory temporarily for flood fill player.trail.forEach(tile => { if (!isTileInTerritory(tile.x, tile.y)) { player.territory.push({ ...tile }); } }); // Find bounding box of the trail to limit flood fill area let minX = tileCount, maxX = 0, minY = tileCount, maxY = 0; player.trail.forEach(p => { minX = Math.min(minX, p.x); maxX = Math.max(maxX, p.x); minY = Math.min(minY, p.y); maxY = Math.max(maxY, p.y); }); // --- Flood Fill Logic --- // Choose a point inside the claimed area. This is tricky. // A simple approach: check neighbors of trail points. // A more robust approach might involve polygon filling algorithms. // Simple Flood Fill (potential issues with complex shapes) const fillQueue = []; const visited = new Set(); // Keep track of visited tiles during fill // Function to check if a tile is valid for flood fill start/propagation const isValidFillTile = (x, y) => { return x >= 0 && x < tileCount && y >= 0 && y < tileCount && !isTileInTerritory(x, y) && !visited.has(`${x},${y}`); }; // Try finding starting points for flood fill around the trail player.trail.forEach(tile => { const neighbors = [ { x: tile.x + 1, y: tile.y }, { x: tile.x - 1, y: tile.y }, { x: tile.x, y: tile.y + 1 }, { x: tile.x, y: tile.y - 1 } ]; neighbors.forEach(n => { if (isValidFillTile(n.x, n.y)) { // Check if this neighbor is likely "inside" // This check is basic and might fail on complex shapes. // A ray casting check would be more robust but complex. // For now, assume neighbors not part of the outer boundary are inside. if (!visited.has(`${n.x},${n.y}`)) { fillQueue.push(n); visited.add(`${n.x},${n.y}`); } } }); }); // Perform Flood Fill while (fillQueue.length > 0) { const current = fillQueue.shift(); // Add to territory if not already there if (!isTileInTerritory(current.x, current.y)) { player.territory.push({ ...current }); } // Check neighbors const neighbors = [ { x: current.x + 1, y: current.y }, { x: current.x - 1, y: current.y }, { x: current.x, y: current.y + 1 }, { x: current.x, y: current.y - 1 } ]; neighbors.forEach(n => { if (isValidFillTile(n.x, n.y)) { visited.add(`${n.x},${n.y}`); fillQueue.push(n); } }); } console.log(`Claimed area. New territory size: ${player.territory.length}`); } function draw() { // Clear canvas ctx.fillStyle = '#ffffff'; // Background ctx.fillRect(0, 0, canvasSize, canvasSize); // Draw territory ctx.fillStyle = 'lightblue'; // Territory color player.territory.forEach(tile => { ctx.fillRect(tile.x * gridSize, tile.y * gridSize, gridSize -1, gridSize -1); // -1 for grid lines }); // Draw trail ctx.fillStyle = 'orange'; // Trail color player.trail.forEach(tile => { ctx.fillRect(tile.x * gridSize, tile.y * gridSize, gridSize -1, gridSize -1); }); // Draw player ctx.fillStyle = player.color; ctx.fillRect(player.x * gridSize, player.y * gridSize, gridSize, gridSize); } function handleKeyDown(event) { // Prevent immediate reversal of direction switch (event.key) { case 'ArrowUp': if (player.dy === 0) { player.dx = 0; player.dy = -1; } break; case 'ArrowDown': if (player.dy === 0) { player.dx = 0; player.dy = 1; } break; case 'ArrowLeft': if (player.dx === 0) { player.dx = -1; player.dy = 0; } break; case 'ArrowRight': if (player.dx === 0) { player.dx = 1; player.dy = 0; } break; } } function resetGame() { player.x = Math.floor(tileCount / 2); player.y = Math.floor(tileCount / 2); player.dx = 0; player.dy = 0; player.trail = []; player.isOutsideTerritory = false; initializeTerritory(); // Reset to initial territory // Optionally stop the game loop or show a message // For now, just resets state and continues } // Event Listener document.addEventListener('keydown', handleKeyDown); // Start game initializeTerritory(); gameLoop();