<!DOCTYPE html>
<html>
<head>
    <title>Strawberry Slicing Game with Flying Squirrel</title>
    <style>
        body { margin: 0; overflow: hidden; }
        canvas { display: block; }
        #scoreboard {
            position: absolute;
            top: 10px;
            left: 10px;
            color: white;
            font-family: Arial, sans-serif;
            font-size: 20px;
            z-index: 1;
        }
    </style>
</head>
<body>
<div id="scoreboard">
    Strawberries Left: <span id="strawberriesLeft">50</span><br>
    Your Score: <span id="score">0</span>
</div>
<canvas id="gameCanvas"></canvas>

<script>
// Get the canvas and context
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// Set canvas to full screen
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// Load images
const strawberryImg = new Image();
strawberryImg.src = 'strawberry.png';

const squirrelImg = new Image();
squirrelImg.src = 'squirrel.png';

// Variables
let strawberries = [];
let particles = [];
let texts = [];
let isDrawing = false;
let lastPos = null;
let totalStrawberries = 50;
let strawberriesSpawned = 0;
let strawberriesLeft = 50;
let gameOver = false;
let squirrel;
let score = 0;

// Update scoreboard
const strawberriesLeftDisplay = document.getElementById('strawberriesLeft');
const scoreDisplay = document.getElementById('score');

// Background gradient
let gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
gradient.addColorStop(0, '#1e3c72');
gradient.addColorStop(1, '#2a5298');

// Strawberry class
class Strawberry {
    constructor(x, y, dx, dy) {
        this.x = x;
        this.y = y;
        this.dx = dx; // Velocity in x
        this.dy = dy; // Velocity in y
        this.radius = 20;
        this.sliced = false;
        this.eaten = false; // If the strawberry is eaten by the squirrel
        this.angle = Math.random() * Math.PI * 2;
        this.leftHalf = null;
        this.rightHalf = null;
    }

    draw() {
        if (!this.sliced && !this.eaten) {
            ctx.save();
            ctx.translate(this.x, this.y);
            ctx.rotate(this.angle);
            ctx.drawImage(strawberryImg, -this.radius, -this.radius, 40, 40);
            ctx.restore();
        } else if (this.sliced) {
            // Draw sliced halves
            this.leftHalf.draw();
            this.rightHalf.draw();
        }
    }

    update() {
        if (!this.sliced && !this.eaten) {
            this.x += this.dx;
            this.y += this.dy;
            this.dy += 0.1; // Gravity

            // Remove strawberries that fall off the bottom
            if (this.y > canvas.height + this.radius) {
                // Strawberry missed by player and squirrel
                strawberriesLeft -= 1;
                updateScoreboard();
                this.eaten = true; // Remove from game
            }
        } else if (this.sliced) {
            this.leftHalf.update();
            this.rightHalf.update();
        }
    }

    slice() {
        this.sliced = true;
        score += 1;
        strawberriesLeft -= 1;
        updateScoreboard();

        // Create left half
        this.leftHalf = new StrawberryHalf(
            this.x,
            this.y,
            this.dx - 2,
            this.dy - 2,
            this.radius,
            this.angle,
            'left'
        );

        // Create right half
        this.rightHalf = new StrawberryHalf(
            this.x,
            this.y,
            this.dx + 2,
            this.dy - 2,
            this.radius,
            this.angle,
            'right'
        );

        // Create particles for juice effect
        createParticles(this.x, this.y, 20);
    }
}

// StrawberryHalf class for sliced pieces
class StrawberryHalf {
    constructor(x, y, dx, dy, radius, angle, side) {
        this.x = x;
        this.y = y;
        this.dx = dx;
        this.dy = dy;
        this.radius = radius;
        this.angle = angle;
        this.rotationSpeed = (Math.random() - 0.5) * 0.2;
        this.side = side; // 'left' or 'right'
    }

    draw() {
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.angle);

        if (this.side === 'left') {
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.arc(0, 0, this.radius, Math.PI / 2, (3 * Math.PI) / 2);
            ctx.closePath();
            ctx.clip();
        } else { // right side
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.arc(0, 0, this.radius, -Math.PI / 2, Math.PI / 2);
            ctx.closePath();
            ctx.clip();
        }

        ctx.drawImage(strawberryImg, -this.radius, -this.radius, 40, 40);
        ctx.restore();
    }

    update() {
        this.x += this.dx;
        this.y += this.dy;
        this.dy += 0.1; // Gravity
        this.angle += this.rotationSpeed;
    }
}

// Particle class for juice effect
class Particle {
    constructor(x, y) {
        this.x = x;
        this.y = y;
        this.dx = (Math.random() - 0.5) * 4;
        this.dy = (Math.random() - 0.5) * 4;
        this.radius = Math.random() * 5 + 2;
        this.life = Math.random() * 30 + 30;
        this.alpha = 1;
        // Random reddish color
        let r = 200 + Math.random() * 55;
        let g = Math.random() * 50;
        let b = Math.random() * 50;
        this.color = rgba(${r}, ${g}, ${b}, 1);
    }

    draw() {
        ctx.save();
        ctx.globalAlpha = this.alpha;
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
        ctx.fill();
        ctx.restore();
    }

    update() {
        this.x += this.dx;
        this.y += this.dy;
        this.dy += 0.05; // Gravity effect on particles
        this.life -= 1;
        this.alpha = this.life / 60;
    }
}

// Text effect class
class TextEffect {
    constructor(text, x, y) {
        this.text = text;
        this.x = x;
        this.y = y;
        this.life = 60;
        this.alpha = 1;
    }

    draw() {
        ctx.save();
        ctx.globalAlpha = this.alpha;
        ctx.fillStyle = 'yellow';
        ctx.font = 'bold 24px Arial';
        ctx.textAlign = 'center';
        ctx.fillText(this.text, this.x, this.y);
        ctx.restore();
    }

    update() {
        this.y -= 0.5;
        this.life -= 1;
        this.alpha = this.life / 60;
    }
}

// Squirrel class
class Squirrel {
    constructor() {
        this.x = canvas.width + 50; // Start off-screen to the right
        this.y = canvas.height / 2; // Start at middle height
        this.speed = 4;
        this.target = null; // The strawberry it's moving toward
        this.angle = 0; // Rotation angle for visual effect
        this.eating = false;
        this.eatTimer = 0;
        this.eatDuration = 60; // Frames to display eating effect
        this.strawberriesEaten = 0;
    }

    draw() {
        ctx.save();
        ctx.translate(this.x, this.y);
        ctx.rotate(this.angle + Math.PI / 2); // Rotate to face movement direction

        // Draw squirrel image
        ctx.drawImage(squirrelImg, -30, -30, 60, 60);

        ctx.restore();
    }

    update() {
        if (this.eating) {
            this.eatTimer -= 1;
            if (this.eatTimer <= 0) {
                this.eating = false;
                if (this.strawberriesEaten >= 5) {
                    gameOver = true;
                    setTimeout(() => {
                        alert('Game Over! The squirrel ate 5 strawberries and wins.');
                    }, 100);
                } else {
                    this.findTarget();
                }
            }
        } else {
            // Find the nearest strawberry that's not sliced or eaten
            if (!this.target || this.target.sliced || this.target.eaten) {
                this.findTarget();
            }

            if (this.target) {
                // Move towards the target
                let dx = this.target.x - this.x;
                let dy = this.target.y - this.y;
                let distance = Math.hypot(dx, dy);

                if (distance < 5) {
                    // Eat the strawberry
                    this.target.eaten = true;
                    strawberriesLeft -= 1;
                    this.strawberriesEaten += 1;
                    updateScoreboard();
                    this.target = null;
                    this.eating = true;
                    this.eatTimer = this.eatDuration;

                    // Add text effect
                    texts.push(new TextEffect('Yum!', this.x, this.y - 40));
                } else {
                    // Normalize direction
                    this.x += (dx / distance) * this.speed;
                    this.y += (dy / distance) * this.speed;

                    // Update angle to face target
                    this.angle = Math.atan2(dy, dx);
                }
            } else {
                // No target, hover off-screen
                this.x += this.speed * -1;
                if (this.x < -50) {
                    this.x = canvas.width + 50;
                    this.y = Math.random() * canvas.height;
                }
            }
        }
    }

    findTarget() {
        let minDistance = Infinity;
        let closestStrawberry = null;
        for (let strawberry of strawberries) {
            if (!strawberry.sliced && !strawberry.eaten) {
                let dx = strawberry.x - this.x;
                let dy = strawberry.y - this.y;
                let distance = Math.hypot(dx, dy);
                if (distance < minDistance) {
                    minDistance = distance;
                    closestStrawberry = strawberry;
                }
            }
        }
        this.target = closestStrawberry;
    }
}

// Function to create particles at the position of the sliced strawberry
function createParticles(x, y, count) {
    for (let i = 0; i < count; i++) {
        particles.push(new Particle(x, y));
    }
}

// Spawn strawberries periodically until totalStrawberries is reached
function spawnStrawberry() {
    if (strawberriesSpawned < totalStrawberries) {
        let x = Math.random() * (canvas.width - 80) + 40;
        let y = canvas.height + 20;
        let dx = (Math.random() - 0.5) * 8;
        let dy = - (10 + Math.random() * 5); // Upward velocity
        strawberries.push(new Strawberry(x, y, dx, dy));
        strawberriesSpawned += 1;
    }
}

// Set interval for strawberry spawning
let spawnInterval = setInterval(spawnStrawberry, 1000);

// Handle mouse/touch events
function startDrawing(e) {
    isDrawing = true;
    lastPos = getPos(e);
}

function stopDrawing() {
    isDrawing = false;
    lastPos = null;
}

function draw(e) {
    if (!isDrawing) return;
    let pos = getPos(e);
    checkSlice(lastPos, pos);
    lastPos = pos;
}

function getPos(e) {
    let rect = canvas.getBoundingClientRect();
    if (e.touches) {
        return {
            x: e.touches[0].clientX - rect.left,
            y: e.touches[0].clientY - rect.top
        };
    } else {
        return {
            x: e.clientX - rect.left,
            y: e.clientY - rect.top
        };
    }
}

canvas.addEventListener('mousedown', startDrawing);
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mouseup', stopDrawing);

canvas.addEventListener('touchstart', startDrawing);
canvas.addEventListener('touchmove', draw);
canvas.addEventListener('touchend', stopDrawing);

// Check for slicing
function checkSlice(p1, p2) {
    strawberries.forEach(function(strawberry) {
        if (!strawberry.sliced && !strawberry.eaten && lineIntersectsCircle(p1, p2, strawberry)) {
            strawberry.slice();
        }
    });
}

function lineIntersectsCircle(p1, p2, circle) {
    // Calculate the distance from the line segment to the center of the circle
    let A = p2.x - p1.x;
    let B = p2.y - p1.y;
    let C = circle.x - p1.x;
    let D = circle.y - p1.y;

    let dot = A * C + B * D;
    let len_sq = A * A + B * B;
    let param = -1;
    if (len_sq !== 0) // in case of 0 length line
        param = dot / len_sq;

    let xx, yy;

    if (param < 0) {
        xx = p1.x;
        yy = p1.y;
    }
    else if (param > 1) {
        xx = p2.x;
        yy = p2.y;
    }
    else {
        xx = p1.x + param * A;
        yy = p1.y + param * B;
    }

    let dx = circle.x - xx;
    let dy = circle.y - yy;
    return (dx * dx + dy * dy) < (circle.radius * circle.radius);
}

// Update scoreboard
function updateScoreboard() {
    strawberriesLeftDisplay.textContent = strawberriesLeft;
    scoreDisplay.textContent = score;

    if (gameOver) {
        // Stop spawning new strawberries
        clearInterval(spawnInterval);
        // Show game over message
        setTimeout(() => {
            if (squirrel.strawberriesEaten >= 5) {
                alert("Game Over! The squirrel ate 5 strawberries and wins.");
            } else {
                alert("Game Over! You scored ${score} points.");
            }
        }, 100);
    } else if (strawberriesLeft <= 0) {
        gameOver = true;
        setTimeout(() => {
            alert("Game Over! You scored ${score} points.");
        }, 100);
    }
}

// Main game loop
function gameLoop() {
    // Draw the background gradient
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    if (gameOver) return;

    // Update and draw particles
    for (let i = particles.length - 1; i >= 0; i--) {
        let particle = particles[i];
        particle.update();
        particle.draw();

        if (particle.life <= 0) {
            particles.splice(i, 1);
        }
    }

    // Update and draw texts
    for (let i = texts.length - 1; i >= 0; i--) {
        let text = texts[i];
        text.update();
        text.draw();

        if (text.life <= 0) {
            texts.splice(i, 1);
        }
    }

    // Update and draw strawberries
    for (let i = strawberries.length - 1; i >= 0; i--) {
        let strawberry = strawberries[i];
        strawberry.update();
        strawberry.draw();

        // Remove strawberries that are off-screen or eaten
        if ((strawberry.y > canvas.height + 50 && strawberry.sliced) || strawberry.eaten) {
            strawberries.splice(i, 1);
        }
    }

    // Update and draw squirrel
    if (squirrel) {
        squirrel.update();
        squirrel.draw();
    }

    // Draw slicing line (with trail effect)
    if (isDrawing && lastPos) {
        ctx.beginPath();
        ctx.strokeStyle = 'white';
        ctx.lineWidth = 8;
        ctx.lineCap = 'round';
        ctx.shadowBlur = 10;
        ctx.shadowColor = 'white';
        ctx.moveTo(lastPos.x, lastPos.y);
        ctx.lineTo(lastPos.x + 1, lastPos.y + 1);
        ctx.stroke();
        ctx.shadowBlur = 0;
    }

    requestAnimationFrame(gameLoop);
}

// Start the game after images are loaded
strawberryImg.onload = function() {
    squirrelImg.onload = function() {
        squirrel = new Squirrel();
        gameLoop();
    };
};

// Adjust canvas size on window resize
window.addEventListener('resize', function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Update the background gradient
    gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
    gradient.addColorStop(0, '#1e3c72');
    gradient.addColorStop(1, '#2a5298');
});
</script>
</body>
</html>

Uncaught SyntaxError: missing ) after argument list