Okay, let's tackle the "Claimed" percentage calculation and add some general improvements. Calculating and filling the claimed area accurately is the most significant change here. We'll implement: 1. **Actual Area Calculation:** When the player completes a shape, we'll determine the polygon formed by the Stix and the border, calculate its area, and update the percentage. 2. **Area Filling:** Visually fill the claimed areas on the canvas. 3. **Fuse:** Add a "Fuse" that travels along the Stix while the player is drawing. If the player stops moving while drawing, the Fuse appears and moves towards the player. Collision with the Fuse results in losing a life. 4. **Sparx:** Add simple "Sparx" enemies that patrol the border. Collision with Sparx results in losing a life. 5. **Refined Collision:** Improve collision checks slightly. 6. **Visual Tweaks:** Minor visual adjustments. This involves significant additions to the JavaScript logic. Qix Clone - Improved

Qix Clone - Improved

Score: 0

Claimed: 0%

Lives: 3

Arrow Keys: Move | Hold Arrow Key off border: Draw | P: Pause

body { display: flex; flex-direction: column; align-items: center; font-family: 'Arial', sans-serif; background-color: #1a1a1a; /* Darker background */ color: #e0e0e0; margin: 0; } h1 { margin-top: 15px; margin-bottom: 10px; color: #00ffff; /* Cyan title */ text-shadow: 0 0 5px #00ffff; } .game-container { display: flex; flex-direction: column; align-items: center; margin-top: 10px; border: 2px solid #444; background-color: #000; /* Black container bg */ box-shadow: 0 0 15px rgba(0, 255, 255, 0.3); } canvas { display: block; background-color: #050505; /* Slightly off-black game area */ /* Border is now drawn dynamically on canvas */ box-sizing: border-box; } .info { display: flex; justify-content: space-around; width: 100%; padding: 12px 0; background-color: #222; border-top: 1px solid #444; font-size: 1.1em; color: #fff; } .info span { font-weight: bold; color: #ffff00; /* Yellow values */ } .controls-info { font-size: 0.9em; color: #aaa; padding: 5px 0; width: 100%; text-align: center; background-color: #111; } // Game Configuration export const config = { canvasWidth: 600, canvasHeight: 400, borderWidth: 10, // Thicker border visually and logically playerSize: 8, playerSpeed: 2.5, // Slightly faster player playerColor: 'yellow', stixColor: 'magenta', stixWidth: 2, fuseColor: 'red', fuseSpeed: 1.5, // Speed fuse travels along stix fuseDelay: 1000, // Delay in ms before fuse appears after stopping qixColor: 'cyan', qixWidth: 3, qixSegments: 8, qixSpeed: 3.5, // Slightly faster Qix sparxColor: 'lime', sparxSize: 6, sparxSpeed: 1.5, initialLives: 3, targetClaimPercentage: 75, fillColor: '#303060', // Dark blue/purple fill borderColor: '#777', // Grey border color collisionThreshold: 3, // Pixel proximity for collisions }; // Utility Functions /** * Checks if a point is on the game border. * @param {number} x - X coordinate * @param {number} y - Y coordinate * @param {object} config - Game configuration * @returns {boolean} True if the point is on the border. */ export function isOnBorder(x, y, config) { const bw = config.borderWidth; const cw = config.canvasWidth; const ch = config.canvasHeight; // Use a small tolerance due to potential floating point inaccuracies const tolerance = 0.1; return x <= bw + tolerance || x >= cw - bw - tolerance || y <= bw + tolerance || y >= ch - bw - tolerance; } /** * Clamps a value between a minimum and maximum. * @param {number} value - The value to clamp. * @param {number} min - The minimum allowed value. * @param {number} max - The maximum allowed value. * @returns {number} The clamped value. */ export function clamp(value, min, max) { return Math.max(min, Math.min(max, value)); } /** * Calculates the distance between two points. * @param {object} p1 - First point {x, y} * @param {object} p2 - Second point {x, y} * @returns {number} The distance. */ export function distance(p1, p2) { return Math.hypot(p1.x - p2.x, p1.y - p2.y); } /** * Checks if two line segments intersect. * Uses the orientation method. * @param {object} seg1 - Line segment { p1: {x, y}, p2: {x, y} } * @param {object} seg2 - Line segment { p1: {x, y}, p2: {x, y} } * @returns {boolean} True if they intersect. */ export function lineIntersectsLine(seg1, seg2) { const p1 = seg1.p1, q1 = seg1.p2; const p2 = seg2.p1, q2 = seg2.p2; function orientation(p, q, r) { const val = (q.y - p.y) * (r.x - q.x) - (q.x - p.x) * (r.y - q.y); if (Math.abs(val) < 0.0001) return 0; // Collinear (with tolerance) return (val > 0) ? 1 : 2; // Clockwise or Counterclockwise } function onSegment(p, q, r) { return (q.x <= Math.max(p.x, r.x) && q.x >= Math.min(p.x, r.x) && q.y <= Math.max(p.y, r.y) && q.y >= Math.min(p.y, r.y)); } const o1 = orientation(p1, q1, p2); const o2 = orientation(p1, q1, q2); const o3 = orientation(p2, q2, p1); const o4 = orientation(p2, q2, q1); // General case if (o1 !== 0 && o2 !== 0 && o3 !== 0 && o4 !== 0 && o1 !== o2 && o3 !== o4) return true; // Special Cases (collinear and overlapping) if (o1 === 0 && onSegment(p1, p2, q1)) return true; if (o2 === 0 && onSegment(p1, q2, q1)) return true; if (o3 === 0 && onSegment(p2, p1, q2)) return true; if (o4 === 0 && onSegment(p2, q1, q2)) return true; return false; // Doesn't intersect } /** * Calculates the distance from a point to a line segment. * @param {object} point - The point {x, y}. * @param {object} lineSeg - The line segment { p1: {x, y}, p2: {x, y} }. * @returns {number} The minimum distance from the point to the segment. */ export function pointLineSegmentDistance(point, lineSeg) { const l2 = distance(lineSeg.p1, lineSeg.p2) ** 2; if (l2 === 0) return distance(point, lineSeg.p1); // Segment is a point let t = ((point.x - lineSeg.p1.x) * (lineSeg.p2.x - lineSeg.p1.x) + (point.y - lineSeg.p1.y) * (lineSeg.p2.y - lineSeg.p1.y)) / l2; t = Math.max(0, Math.min(1, t)); // Clamp t to [0, 1] const closestPoint = { x: lineSeg.p1.x + t * (lineSeg.p2.x - lineSeg.p1.x), y: lineSeg.p1.y + t * (lineSeg.p2.y - lineSeg.p1.y) }; return distance(point, closestPoint); } /** * Checks if a point is inside a polygon using the ray casting algorithm. * @param {object} point - The point {x, y} to check. * @param {Array