From 9f7e45e6b1160719d90b6a8d276caa50472c1620 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 23 Oct 2025 05:24:36 +0000
Subject: [PATCH 1/2] Initial plan


From 8396b3dfdbb064ab743e1b8b946beb79d61d9ee0 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Thu, 23 Oct 2025 05:30:50 +0000
Subject: [PATCH 2/2] Add interactive marble game with physics and scoring
 system

Co-authored-by: abundancemarble <166725072+abundancemarble@users.noreply.github.com>
---
 README.md        |  35 +++-
 index.html       |  13 ++
 marble-game.html | 483 +++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 530 insertions(+), 1 deletion(-)
 create mode 100644 index.html
 create mode 100644 marble-game.html
diff --git a/README.md b/README.md
index ca78562..a3f44b3 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,35 @@
 # .github
-Abundance Marble &amp; Ceramic Works:  1. Phone/WhatsApp: 08137665702   2. Email: abundancemarble@gmail.com   3. Location: Nigeria Osogbo, Osun State   
+
+## Marble Game 🎯
+
+Welcome to the Abundance Marble & Ceramic Works interactive marble game! Test your aim and strategy in this fun physics-based game.
+
+### How to Play
+
+1. Open `marble-game.html` in your web browser
+2. Click "Start Game" to begin
+3. Click anywhere on the canvas to shoot marbles from the bottom
+4. Hit the colored target marbles to score points
+5. Each level adds more targets and increases your score multiplier
+6. You have 10 marbles to start - use them wisely!
+
+### Features
+
+- **Physics-based gameplay** with realistic marble movement and collisions
+- **Progressive difficulty** - advance through levels by clearing all targets
+- **Score tracking** - compete for high scores
+- **Responsive design** - works on desktop and mobile devices
+- **Beautiful graphics** - smooth animations and particle effects
+
+### Play Now
+
+Simply open the `marble-game.html` file in your browser, or visit the deployed version.
+
+---
+
+## Abundance Marble & Ceramic Works
+
+**Contact Information:**
+- 📱 Phone/WhatsApp: 08137665702
+- 📧 Email: abundancemarble@gmail.com
+- 📍 Location: Osogbo, Osun State, Nigeria
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..43146c7
--- /dev/null
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="refresh" content="0; url=marble-game.html">
+    <title>Redirecting to Marble Game...</title>
+</head>
+<body>
+    <p>Redirecting to the Marble Game...</p>
+    <p>If you are not redirected, <a href="marble-game.html">click here</a>.</p>
+</body>
+</html>
diff --git a/marble-game.html b/marble-game.html
new file mode 100644
index 0000000..92ea814
--- /dev/null
+++ b/marble-game.html
@@ -0,0 +1,483 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Marble Game - Abundance Marble & Ceramic Works</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Arial', sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+            padding: 20px;
+        }
+        
+        .game-container {
+            background: white;
+            border-radius: 20px;
+            padding: 30px;
+            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+            max-width: 800px;
+            width: 100%;
+        }
+        
+        h1 {
+            text-align: center;
+            color: #667eea;
+            margin-bottom: 10px;
+            font-size: 2.5em;
+        }
+        
+        .subtitle {
+            text-align: center;
+            color: #666;
+            margin-bottom: 20px;
+            font-size: 0.9em;
+        }
+        
+        .game-info {
+            display: flex;
+            justify-content: space-around;
+            margin-bottom: 20px;
+            padding: 15px;
+            background: #f5f5f5;
+            border-radius: 10px;
+        }
+        
+        .info-item {
+            text-align: center;
+        }
+        
+        .info-label {
+            font-size: 0.8em;
+            color: #666;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        
+        .info-value {
+            font-size: 2em;
+            font-weight: bold;
+            color: #667eea;
+            margin-top: 5px;
+        }
+        
+        #gameCanvas {
+            border: 3px solid #667eea;
+            border-radius: 10px;
+            display: block;
+            margin: 0 auto;
+            background: #ffffff;
+            cursor: crosshair;
+        }
+        
+        .controls {
+            margin-top: 20px;
+            display: flex;
+            gap: 10px;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        
+        button {
+            background: #667eea;
+            color: white;
+            border: none;
+            padding: 12px 30px;
+            border-radius: 25px;
+            font-size: 1em;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-weight: bold;
+        }
+        
+        button:hover {
+            background: #764ba2;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
+        }
+        
+        button:active {
+            transform: translateY(0);
+        }
+        
+        .instructions {
+            margin-top: 20px;
+            padding: 15px;
+            background: #f9f9f9;
+            border-radius: 10px;
+            border-left: 4px solid #667eea;
+        }
+        
+        .instructions h3 {
+            color: #667eea;
+            margin-bottom: 10px;
+        }
+        
+        .instructions ul {
+            margin-left: 20px;
+            color: #555;
+        }
+        
+        .instructions li {
+            margin: 5px 0;
+        }
+        
+        .company-info {
+            margin-top: 20px;
+            text-align: center;
+            padding: 15px;
+            background: #f0f0f0;
+            border-radius: 10px;
+            font-size: 0.9em;
+            color: #555;
+        }
+    </style>
+</head>
+<body>
+    <div class="game-container">
+        <h1>🎯 Marble Game</h1>
+        <div class="subtitle">by Abundance Marble & Ceramic Works</div>
+        
+        <div class="game-info">
+            <div class="info-item">
+                <div class="info-label">Score</div>
+                <div class="info-value" id="score">0</div>
+            </div>
+            <div class="info-item">
+                <div class="info-label">Marbles</div>
+                <div class="info-value" id="marbleCount">10</div>
+            </div>
+            <div class="info-item">
+                <div class="info-label">Level</div>
+                <div class="info-value" id="level">1</div>
+            </div>
+        </div>
+        
+        <canvas id="gameCanvas" width="700" height="500"></canvas>
+        
+        <div class="controls">
+            <button id="startBtn">Start Game</button>
+            <button id="resetBtn">Reset</button>
+            <button id="pauseBtn">Pause</button>
+        </div>
+        
+        <div class="instructions">
+            <h3>How to Play:</h3>
+            <ul>
+                <li><strong>Click</strong> on the canvas to shoot a marble</li>
+                <li><strong>Goal:</strong> Hit the target marbles (colored circles) to score points</li>
+                <li>Each successful hit increases your score</li>
+                <li>You have 10 marbles to use - make them count!</li>
+                <li>Avoid missing targets to maximize your score</li>
+                <li>Progress through levels by scoring high</li>
+            </ul>
+        </div>
+        
+        <div class="company-info">
+            <strong>Abundance Marble & Ceramic Works</strong><br>
+            📱 Phone/WhatsApp: 08137665702<br>
+            📧 Email: abundancemarble@gmail.com<br>
+            📍 Location: Osogbo, Osun State, Nigeria
+        </div>
+    </div>
+    
+    <script>
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        
+        // Game state
+        let gameState = {
+            score: 0,
+            marblesLeft: 10,
+            level: 1,
+            isPlaying: false,
+            isPaused: false,
+            targets: [],
+            playerMarbles: [],
+            lastShot: 0
+        };
+        
+        // Marble class
+        class Marble {
+            constructor(x, y, vx, vy, radius, color, isTarget = false) {
+                this.x = x;
+                this.y = y;
+                this.vx = vx;
+                this.vy = vy;
+                this.radius = radius;
+                this.color = color;
+                this.isTarget = isTarget;
+                this.gravity = 0.2;
+                this.friction = 0.99;
+                this.alive = true;
+            }
+            
+            update() {
+                if (!gameState.isPaused) {
+                    // Apply physics
+                    this.vy += this.gravity;
+                    this.vx *= this.friction;
+                    this.vy *= this.friction;
+                    
+                    this.x += this.vx;
+                    this.y += this.vy;
+                    
+                    // Bounce off walls
+                    if (this.x - this.radius < 0 || this.x + this.radius > canvas.width) {
+                        this.vx *= -0.7;
+                        this.x = this.x - this.radius < 0 ? this.radius : canvas.width - this.radius;
+                    }
+                    
+                    if (this.y - this.radius < 0 || this.y + this.radius > canvas.height) {
+                        this.vy *= -0.7;
+                        this.y = this.y - this.radius < 0 ? this.radius : canvas.height - this.radius;
+                        
+                        // Stop if moving very slowly
+                        if (Math.abs(this.vy) < 0.5 && this.y + this.radius >= canvas.height - 1) {
+                            this.vy = 0;
+                            this.vx *= 0.95;
+                        }
+                    }
+                }
+            }
+            
+            draw() {
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+                ctx.fillStyle = this.color;
+                ctx.fill();
+                ctx.strokeStyle = this.isTarget ? '#fff' : '#333';
+                ctx.lineWidth = 2;
+                ctx.stroke();
+                
+                // Add shine effect
+                ctx.beginPath();
+                ctx.arc(this.x - this.radius/3, this.y - this.radius/3, this.radius/4, 0, Math.PI * 2);
+                ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
+                ctx.fill();
+            }
+        }
+        
+        // Initialize targets
+        function createTargets() {
+            gameState.targets = [];
+            const colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8'];
+            const targetCount = 5 + gameState.level;
+            
+            for (let i = 0; i < targetCount; i++) {
+                const x = Math.random() * (canvas.width - 100) + 50;
+                const y = Math.random() * (canvas.height - 200) + 50;
+                const color = colors[Math.floor(Math.random() * colors.length)];
+                gameState.targets.push(new Marble(x, y, 0, 0, 20, color, true));
+            }
+        }
+        
+        // Check collision between two marbles
+        function checkCollision(m1, m2) {
+            const dx = m1.x - m2.x;
+            const dy = m1.y - m2.y;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            return distance < m1.radius + m2.radius;
+        }
+        
+        // Handle collisions
+        function handleCollisions() {
+            for (let i = gameState.playerMarbles.length - 1; i >= 0; i--) {
+                const playerMarble = gameState.playerMarbles[i];
+                
+                for (let j = gameState.targets.length - 1; j >= 0; j--) {
+                    const target = gameState.targets[j];
+                    
+                    if (checkCollision(playerMarble, target)) {
+                        // Hit! Remove target and add score
+                        gameState.targets.splice(j, 1);
+                        gameState.score += 10 * gameState.level;
+                        updateScore();
+                        
+                        // Create particle effect
+                        createParticles(target.x, target.y, target.color);
+                    }
+                }
+            }
+            
+            // Check if level complete
+            if (gameState.targets.length === 0 && gameState.isPlaying) {
+                levelUp();
+            }
+        }
+        
+        // Create particle effect
+        function createParticles(x, y, color) {
+            for (let i = 0; i < 8; i++) {
+                const angle = (Math.PI * 2 * i) / 8;
+                const vx = Math.cos(angle) * 5;
+                const vy = Math.sin(angle) * 5;
+                const particle = new Marble(x, y, vx, vy, 5, color, false);
+                gameState.playerMarbles.push(particle);
+            }
+        }
+        
+        // Level up
+        function levelUp() {
+            gameState.level++;
+            gameState.marblesLeft += 5;
+            updateMarbleCount();
+            updateLevel();
+            createTargets();
+        }
+        
+        // Update display
+        function updateScore() {
+            document.getElementById('score').textContent = gameState.score;
+        }
+        
+        function updateMarbleCount() {
+            document.getElementById('marbleCount').textContent = gameState.marblesLeft;
+        }
+        
+        function updateLevel() {
+            document.getElementById('level').textContent = gameState.level;
+        }
+        
+        // Shoot marble
+        function shootMarble(x, y) {
+            if (!gameState.isPlaying || gameState.isPaused || gameState.marblesLeft <= 0) {
+                return;
+            }
+            
+            const now = Date.now();
+            if (now - gameState.lastShot < 200) return;
+            gameState.lastShot = now;
+            
+            // Calculate direction from bottom center to click point
+            const startX = canvas.width / 2;
+            const startY = canvas.height - 30;
+            const dx = x - startX;
+            const dy = y - startY;
+            const distance = Math.sqrt(dx * dx + dy * dy);
+            const speed = 15;
+            const vx = (dx / distance) * speed;
+            const vy = (dy / distance) * speed;
+            
+            const marble = new Marble(startX, startY, vx, vy, 15, '#667eea', false);
+            gameState.playerMarbles.push(marble);
+            gameState.marblesLeft--;
+            updateMarbleCount();
+            
+            // Check game over
+            if (gameState.marblesLeft === 0 && gameState.targets.length > 0) {
+                setTimeout(() => {
+                    if (gameState.targets.length > 0) {
+                        alert(`Game Over! Final Score: ${gameState.score}\nLevel Reached: ${gameState.level}`);
+                        resetGame();
+                    }
+                }, 3000);
+            }
+        }
+        
+        // Game loop
+        function gameLoop() {
+            if (!gameState.isPlaying) return;
+            
+            // Clear canvas
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            
+            // Draw shooter position
+            ctx.beginPath();
+            ctx.arc(canvas.width / 2, canvas.height - 30, 18, 0, Math.PI * 2);
+            ctx.fillStyle = '#667eea';
+            ctx.fill();
+            ctx.strokeStyle = '#333';
+            ctx.lineWidth = 3;
+            ctx.stroke();
+            
+            // Update and draw targets
+            gameState.targets.forEach(target => {
+                target.update();
+                target.draw();
+            });
+            
+            // Update and draw player marbles
+            for (let i = gameState.playerMarbles.length - 1; i >= 0; i--) {
+                const marble = gameState.playerMarbles[i];
+                marble.update();
+                marble.draw();
+                
+                // Remove marbles that are out of bounds or stopped
+                if (marble.y > canvas.height + 50 || 
+                    (Math.abs(marble.vx) < 0.1 && Math.abs(marble.vy) < 0.1)) {
+                    gameState.playerMarbles.splice(i, 1);
+                }
+            }
+            
+            // Handle collisions
+            handleCollisions();
+            
+            requestAnimationFrame(gameLoop);
+        }
+        
+        // Start game
+        function startGame() {
+            if (!gameState.isPlaying) {
+                gameState.isPlaying = true;
+                gameState.isPaused = false;
+                createTargets();
+                gameLoop();
+            }
+        }
+        
+        // Reset game
+        function resetGame() {
+            gameState.score = 0;
+            gameState.marblesLeft = 10;
+            gameState.level = 1;
+            gameState.isPlaying = false;
+            gameState.isPaused = false;
+            gameState.targets = [];
+            gameState.playerMarbles = [];
+            
+            updateScore();
+            updateMarbleCount();
+            updateLevel();
+            
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+        }
+        
+        // Toggle pause
+        function togglePause() {
+            if (gameState.isPlaying) {
+                gameState.isPaused = !gameState.isPaused;
+                document.getElementById('pauseBtn').textContent = gameState.isPaused ? 'Resume' : 'Pause';
+            }
+        }
+        
+        // Event listeners
+        document.getElementById('startBtn').addEventListener('click', startGame);
+        document.getElementById('resetBtn').addEventListener('click', resetGame);
+        document.getElementById('pauseBtn').addEventListener('click', togglePause);
+        
+        canvas.addEventListener('click', (e) => {
+            const rect = canvas.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            shootMarble(x, y);
+        });
+        
+        // Initial draw
+        ctx.font = '24px Arial';
+        ctx.fillStyle = '#667eea';
+        ctx.textAlign = 'center';
+        ctx.fillText('Click "Start Game" to begin!', canvas.width / 2, canvas.height / 2);
+    </script>
+</body>
+</html>
