Spaces:

smjain
/

game

Running

App Files Files Community

smjain commited on Mar 29

Commit

de875ad

verified ·

1 Parent(s): 50b95df

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +665 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Game
-emoji: 🐢
-colorFrom: pink
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: game
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,665 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Modi vs Kejriwal Cricket Battle</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Arial', sans-serif;
+            background: linear-gradient(to right, #ff9933, #ffffff, #138808);
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+        }
+        #gameCanvas {
+            background-color: #1e8449;
+            border: 10px solid #800080;
+            border-radius: 15px;
+            box-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
+        }
+        #scoreboard {
+            position: absolute;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: white;
+            font-size: 28px;
+            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.8);
+            padding: 15px 30px;
+            background: rgba(0, 0, 0, 0.7);
+            border-radius: 15px;
+            border: 3px solid gold;
+            font-weight: bold;
+        }
+        #gameOver {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            color: white;
+            font-size: 60px;
+            text-align: center;
+            display: none;
+            text-shadow: 5px 5px 10px rgba(0, 0, 0, 0.9);
+            background: rgba(139, 0, 0, 0.9);
+            padding: 40px;
+            border-radius: 25px;
+            border: 5px solid #ffd700;
+            z-index: 100;
+        }
+        #restartBtn {
+            margin-top: 30px;
+            padding: 15px 30px;
+            font-size: 28px;
+            background: linear-gradient(to right, #ff9933, #ffffff, #138808);
+            border: 3px solid #000080;
+            border-radius: 15px;
+            cursor: pointer;
+            box-shadow: 0 0 20px rgba(255, 255, 255, 0.7);
+            transition: all 0.3s;
+            font-weight: bold;
+        }
+        #restartBtn:hover {
+            transform: scale(1.1);
+            box-shadow: 0 0 30px rgba(255, 255, 255, 0.9);
+        }
+        #controls {
+            position: absolute;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: white;
+            font-size: 22px;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
+            text-align: center;
+            background: rgba(0, 0, 0, 0.7);
+            padding: 15px;
+            border-radius: 15px;
+            border: 3px solid #ff0000;
+        }
+        #title {
+            position: absolute;
+            top: -70px;
+            left: 50%;
+            transform: translateX(-50%);
+            color: #000080;
+            font-size: 40px;
+            text-shadow: 3px 3px 6px rgba(255, 255, 255, 0.7);
+            font-weight: bold;
+            white-space: nowrap;
+        }
+        /* Cheering crowd element */
+        .crowd {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 20%;
+            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20"><circle cx="10" cy="10" r="5" fill="%23fff"/><circle cx="30" cy="8" r="4" fill="%23ff9933"/><circle cx="50" cy="12" r="5" fill="%23fff"/><circle cx="70" cy="9" r="4" fill="%23138808"/><circle cx="90" cy="11" r="5" fill="%23fff"/></svg>');
+            background-repeat: repeat-x;
+            opacity: 0.6;
+            z-index: -1;
+        }
+        .speech-bubble {
+            position: absolute;
+            background: white;
+            border-radius: 20px;
+            padding: 10px 15px;
+            font-size: 14px;
+            color: black;
+            text-align: center;
+            box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
+            display: none;
+            white-space: nowrap;
+            z-index: 10;
+        }
+        .bubble-bat {
+            bottom: 100px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        .bubble-ball {
+            top: 150px;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+    </style>
+</head>
+<body>
+    <div id="title">Modi Cricket Bat vs Kejriwal Ball</div>
+    <div class="crowd"></div>
+    <canvas id="gameCanvas"></canvas>
+    <div id="scoreboard">🏏 Score: 0 | 🎳 Balls: 0 | ⚡ Speed: 1x</div>
+    <div id="gameOver">
+        <h1>Game Over!</h1>
+        <p id="finalScore" style="font-size: 36px; margin: 20px 0;">Your score: 0</p>
+        <button id="restartBtn">🚩 Play Again</button>
+    </div>
+    <div id="controls">🕹️ Use <strong>LEFT ←</strong> and <strong>RIGHT →</strong> arrow keys to move</div>
+    <!-- Speech bubbles -->
+    <div class="speech-bubble bubble-bat" id="modiSpeech">Mitron!</div>
+    <div class="speech-bubble bubble-ball" id="kejriwalSpeech">Kya bekaar bowling hai!</div>
+    <script>
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        const scoreboard = document.getElementById('scoreboard');
+        const gameOverScreen = document.getElementById('gameOver');
+        const finalScore = document.getElementById('finalScore');
+        const restartBtn = document.getElementById('restartBtn');
+        const modiSpeech = document.getElementById('modiSpeech');
+        const kejriwalSpeech = document.getElementById('kejriwalSpeech');
+        // Set canvas size
+        canvas.width = 800;
+        canvas.height = 600;
+        // Game variables
+        let score = 0;
+        let ballsFaced = 0;
+        let gameActive = false;
+        let gameSpeed = 1;
+        let lastDirection = 'right';
+        // Bat (Modi)
+        const bat = {
+            x: canvas.width / 2 - 75,
+            y: canvas.height - 40,
+            width: 150,
+            height: 30,
+            speed: 15
+        };
+        // Ball (Kejriwal)
+        const ball = {
+            x: 0,
+            y: 0,
+            radius: 20,
+            speedX: 0,
+            speedY: 0,
+            active: false
+        };
+        // Targets (Kejriwal scams as bricks)
+        const scams = [
+            "Liquor Scam", "CS Bus Scam", "Water Tanker Scam",
+            "PWD Scam", "Excise Scam", "Classroom Scam",
+            "Hospitals Scam", "Mohalla Clinics", "DJB Scam",
+            "Wifi Scam", "Waste Mgmt Scam", "Electricity Scam"
+        ];
+        const brickRowCount = 3;
+        const brickColumnCount = 4;
+        const brickWidth = 170;
+        const brickHeight = 35;
+        const brickPadding = 15;
+        const brickOffsetTop = 80;
+        const brickOffsetLeft = 60;
+        const bricks = [];
+        for (let c = 0; c < brickColumnCount; c++) {
+            bricks[c] = [];
+            for (let r = 0; r < brickRowCount; r++) {
+                const scamIndex = (c * brickRowCount + r) % scams.length;
+                bricks[c][r] = {
+                    x: 0,
+                    y: 0,
+                    status: 1,
+                    scam: scams[scamIndex]
+                };
+            }
+        }
+        // Modi animation states (emotes)
+        const modiFrames = [
+            "🙂", "😊", "🤩", "😎", "😡", "🤬", "😁", "🤑"
+        ];
+        let currentModiFrame = 0;
+        let frameCounter = 0;
+        // Kejriwal animation states (reactions)
+        const kejriwalFrames = [
+            "😐", "😕", "😲", "😨", "😵", "😤", "😷", "🥵"
+        ];
+        let currentKejriwalFrame = 0;
+        // Sound effects
+        const sounds = {
+            hit: ["Mann ki baat", "Mitron!", "Achhe din!", "Sabka saath sabka vikas!"],
+            miss: ["Main bhagwan ka diya hua PM hun!", "Inhe kuchh nahi aata!", "Besharmi ki hadd hai!"]
+        };
+        // Initialize the game
+        function init() {
+            score = 0;
+            ballsFaced = 0;
+            gameActive = true;
+            gameSpeed = 1;
+            // Reset bat position
+            bat.x = canvas.width / 2 - bat.width / 2;
+            // Reset bricks
+            for (let c = 0; c < brickColumnCount; c++) {
+                for (let r = 0; r < brickRowCount; r++) {
+                    bricks[c][r].status = 1;
+                }
+            }
+            // Start with a new ball
+            resetBall();
+            // Hide game over screen and speech bubbles
+            gameOverScreen.style.display = 'none';
+            modiSpeech.style.display = 'none';
+            kejriwalSpeech.style.display = 'none';
+            // Start the game loop
+            requestAnimationFrame(gameLoop);
+        }
+        // Reset ball position
+        function resetBall() {
+            ball.x = canvas.width / 2;
+            ball.y = 50;
+            ball.speedX = (Math.random() * 6 - 3) * gameSpeed;
+            ball.speedY = 3 * gameSpeed;
+            ball.active = true;
+            ballsFaced++;
+            currentKejriwalFrame = Math.floor(Math.random() * kejriwalFrames.length);
+            updateScoreboard();
+        }
+        // Show speech bubble
+        function showSpeech(bubble, text) {
+            bubble.textContent = text;
+            bubble.style.display = 'block';
+            setTimeout(() => {
+                bubble.style.display = 'none';
+            }, 1000);
+        }
+        // Draw the bat (Modi)
+        function drawBat() {
+            // Bat body with tricolor
+            ctx.fillStyle = '#FF9933'; // Saffron
+            ctx.fillRect(bat.x, bat.y, bat.width/3, bat.height);
+            ctx.fillStyle = '#FFFFFF'; // White
+            ctx.fillRect(bat.x + bat.width/3, bat.y, bat.width/3, bat.height);
+            ctx.fillStyle = '#138808'; // Green
+            ctx.fillRect(bat.x + 2*bat.width/3, bat.y, bat.width/3, bat.height);
+            // Border
+            ctx.strokeStyle = '#000080';
+            ctx.lineWidth = 3;
+            ctx.strokeRect(bat.x, bat.y, bat.width, bat.height);
+            // Modi face on bat
+            const faceRadius = 25;
+            const faceX = lastDirection === 'right' ? bat.x + bat.width - 10 : bat.x + 10;
+            // Modi face circle
+            ctx.fillStyle = '#ffcc00';
+            ctx.beginPath();
+            ctx.arc(faceX, bat.y - faceRadius/2, faceRadius, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.strokeStyle = '#000';
+            ctx.lineWidth = 2;
+            ctx.stroke();
+            // Modi eyes
+            ctx.fillStyle = '#000';
+            ctx.beginPath();
+            ctx.arc(faceX - 10, bat.y - faceRadius/2 - 5, 3, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.beginPath();
+            ctx.arc(faceX + 10, bat.y - faceRadius/2 - 5, 3, 0, Math.PI * 2);
+            ctx.fill();
+            // Modi mouth (with current frame)
+            ctx.font = '20px Arial';
+            ctx.fillText(modiFrames[currentModiFrame], faceX - 10, bat.y - faceRadius/2 + 15);
+            // Animate Modi every 10 frames
+            frameCounter++;
+            if (frameCounter % 10 === 0) {
+                currentModiFrame = (currentModiFrame + 1) % modiFrames.length;
+            }
+            // Modi's name tag
+            ctx.font = 'bold 16px Arial';
+            ctx.fillStyle = '#000080';
+            ctx.fillText("Narendra Modi", bat.x + bat.width/2 - 50, bat.y - 5);
+        }
+        // Draw the ball (Kejriwal)
+        function drawBall() {
+            // Ball body
+            ctx.fillStyle = '#009688';
+            ctx.beginPath();
+            ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.strokeStyle = '#000';
+            ctx.lineWidth = 2;
+            ctx.stroke();
+            // Kejriwal face
+            ctx.font = '20px Arial';
+            ctx.fillText(kejriwalFrames[currentKejriwalFrame], ball.x - 10, ball.y + 5);
+            // Kejriwal name tag
+            ctx.font = 'bold 14px Arial';
+            ctx.fillStyle = '#000';
+            ctx.fillText("Kejriwal", ball.x - 25, ball.y - 15);
+            // Change expression when ball hits something
+            if (ball.y + ball.radius > canvas.height - 100) {
+                currentKejriwalFrame = Math.floor(Math.random() * kejriwalFrames.length);
+            }
+        }
+        // Draw scam bricks
+        function drawBricks() {
+            for (let c = 0; c < brickColumnCount; c++) {
+                for (let r = 0; r < brickRowCount; r++) {
+                    if (bricks[c][r].status === 1) {
+                        const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
+                        const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
+                        bricks[c][r].x = brickX;
+                        bricks[c][r].y = brickY;
+                        // Colors for the scam bricks
+                        let brickColor;
+                        switch (r) {
+                            case 0: brickColor = '#800000'; break; // Red for serious scams
+                            case 1: brickColor = '#4169E1'; break; // Blue for financial scams
+                            case 2: brickColor = '#8B4513'; break; // Brown for other scams
+                            default: brickColor = '#000000';
+                        }
+                        ctx.fillStyle = brickColor;
+                        ctx.fillRect(brickX, brickY, brickWidth, brickHeight);
+                        // Brick shadow effect
+                        ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
+                        ctx.fillRect(brickX + 5, brickY + 5, brickWidth, brickHeight);
+                        ctx.strokeStyle = '#000';
+                        ctx.lineWidth = 1;
+                        ctx.strokeRect(brickX, brickY, brickWidth, brickHeight);
+                        // Scam labels
+                        ctx.font = 'bold 12px Arial';
+                        ctx.fillStyle = '#fff';
+                        const scam = bricks[c][r].scam;
+                        const maxLength = 15;
+                        if (scam.length > maxLength) {
+                            // Split long scam names into two lines
+                            const words = scam.split(' ');
+                            let line1 = '', line2 = '';
+                            for (const word of words) {
+                                if ((line1 + word).length <= maxLength) {
+                                    line1 += word + ' ';
+                                } else {
+                                    line2 += word + ' ';
+                                }
+                            }
+                            ctx.fillText(line1.trim(), brickX + 5, brickY + 15);
+                            ctx.fillText(line2.trim(), brickX + 5, brickY + 30);
+                        } else {
+                            ctx.fillText(scam, brickX + 5, brickY + 20);
+                        }
+                    }
+                }
+            }
+        }
+        // Update scoreboard
+        function updateScoreboard() {
+            scoreboard.textContent = `🏏 Score: ${score} | 🎳 Balls: ${ballsFaced} | ⚡ Speed: ${gameSpeed.toFixed(1)}x`;
+        }
+        // Check collisions
+        function collisionDetection() {
+            for (let c = 0; c < brickColumnCount; c++) {
+                for (let r = 0; r < brickRowCount; r++) {
+                    const brick = bricks[c][r];
+                    if (brick.status === 1) {
+                        if (
+                            ball.x + ball.radius > brick.x &&
+                            ball.x - ball.radius < brick.x + brickWidth &&
+                            ball.y + ball.radius > brick.y &&
+                            ball.y - ball.radius < brick.y + brickHeight
+                        ) {
+                            ball.speedY = -ball.speedY;
+                            brick.status = 0;
+                            score += (brickRowCount - r + 1) * 50;
+                            // Show Modi's speech
+                            const randomHitPhrase = sounds.hit[Math.floor(Math.random() * sounds.hit.length)];
+                            showSpeech(modiSpeech, randomHitPhrase);
+                            // Position speech bubble
+                            modiSpeech.style.left = `${bat.x + bat.width/2}px`;
+                            modiSpeech.style.bottom = `${canvas.height - bat.y + 30}px`;
+                            currentKejriwalFrame = Math.min(kejriwalFrames.length - 1, currentKejriwalFrame + 1);
+                            updateScoreboard();
+                            // Check if all bricks are cleared
+                            let allBricksCleared = true;
+                            for (let c = 0; c < brickColumnCount; c++) {
+                                for (let r = 0; r < brickRowCount; r++) {
+                                    if (bricks[c][r].status === 1) {
+                                        allBricksCleared = false;
+                                        break;
+                                    }
+                                }
+                                if (!allBricksCleared) break;
+                            }
+                            if (allBricksCleared) {
+                                gameSpeed += 0.5;
+                                // Cheering crowd effect
+                                currentModiFrame = 2; // 🤩
+                                setTimeout(() => currentModiFrame = 0, 500);
+                                resetBricks();
+                                showSpeech(modiSpeech, "Mera Bharat Mahan!");
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        // Reset all bricks
+        function resetBricks() {
+            for (let c = 0; c < brickColumnCount; c++) {
+                for (let r = 0; r < brickRowCount; r++) {
+                    bricks[c][r].status = 1;
+                }
+            }
+        }
+        // Game loop
+        function gameLoop() {
+            if (!gameActive) return;
+            // Clear canvas with transparent overlay for trail effect
+            ctx.fillStyle = 'rgba(30, 132, 73, 0.2)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // Draw game elements
+            drawBricks();
+            drawBat();
+            drawBall();
+            // Ball movement
+            if (ball.active) {
+                ball.x += ball.speedX;
+                ball.y += ball.speedY;
+                // Wall collision
+                if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
+                    ball.speedX = -ball.speedX;
+                    currentKejriwalFrame = Math.floor(Math.random() * kejriwalFrames.length);
+                }
+                if (ball.y - ball.radius < 0) {
+                    ball.speedY = -ball.speedY;
+                    currentKejriwalFrame = Math.floor(Math.random() * kejriwalFrames.length);
+                }
+                // Bat collision
+                if (
+                    ball.y + ball.radius > bat.y &&
+                    ball.x > bat.x &&
+                    ball.x < bat.x + bat.width
+                ) {
+                    // Change Modi's expression to happy
+                    currentModiFrame = 6; // 😁
+                    setTimeout(() => currentModiFrame = 0, 200);
+                    // Show Modi's speech
+                    showSpeech(modiSpeech, "Mitron!");
+                    modiSpeech.style.left = `${bat.x + bat.width/2}px`;
+                    modiSpeech.style.bottom = `${canvas.height - bat.y + 30}px`;
+                    // Calculate hit angle based on where ball hits the bat
+                    const hitPoint = (ball.x - (bat.x + bat.width/2)) / (bat.width/2);
+                    ball.speedX = hitPoint * 7 * gameSpeed;
+                    ball.speedY = -Math.abs(ball.speedY);
+                    // Increase score for hitting
+                    score += 10;
+                    updateScoreboard();
+                }
+                // Ball out of bounds (bottom)
+                if (ball.y - ball.radius > canvas.height) {
+                    ball.active = false;
+                    // Change Modi's expression to angry
+                    currentModiFrame = 4; // 😡
+                    // Show Kejriwal's taunt
+                    const randomMissPhrase = sounds.miss[Math.floor(Math.random() * sounds.miss.length)];
+                    showSpeech(kejriwalSpeech, randomMissPhrase);
+                    kejriwalSpeech.style.left = `${ball.x}px`;
+                    kejriwalSpeech.style.top = `${ball.y - 50}px`;
+                    // Check if game over (3 missed balls)
+                    if (ballsFaced >= 3) {
+                        gameOver();
+                    } else {
+                        setTimeout(() => {
+                            currentModiFrame = 0;
+                            resetBall();
+                        }, 1000);
+                    }
+                }
+                // Collision detection
+                collisionDetection();
+            }
+            requestAnimationFrame(gameLoop);
+        }
+        // Game over function
+        function gameOver() {
+            gameActive = false;
+            finalScore.textContent = `Your score: ${score}`;
+            // Display appropriate message based on score
+            let message = "Try Again!";
+            if (score > 1500) message = "Supreme Leader! 🏆";
+            else if (score > 1000) message = "56-inch Performance! 👏";
+            else if (score > 500) message = "Good Effort Mitron! 👍";
+            document.querySelector("#gameOver p").textContent = `Your score: ${score} - ${message}`;
+            gameOverScreen.style.display = 'block';
+        }
+        // Keyboard controls
+        const keys = {
+            ArrowLeft: false,
+            ArrowRight: false
+        };
+        document.addEventListener('keydown', (e) => {
+            if (e.key in keys) {
+                keys[e.key] = true;
+                lastDirection = e.key === 'ArrowLeft' ? 'left' : 'right';
+                e.preventDefault();
+            }
+            // Space bar to start/restart game
+            if (e.key === ' ' && !gameActive) {
+                init();
+            }
+            // Enter key to start/restart game
+            if (e.key === 'Enter' && !gameActive) {
+                init();
+            }
+        });
+        document.addEventListener('keyup', (e) => {
+            if (e.key in keys) {
+                keys[e.key] = false;
+                e.preventDefault();
+            }
+        });
+        // Handle bat movement
+        function handleBatMovement() {
+            if (keys.ArrowLeft && bat.x > 0) {
+                bat.x -= bat.speed;
+            }
+            if (keys.ArrowRight && bat.x < canvas.width - bat.width) {
+                bat.x += bat.speed;
+            }
+        }
+        // Input handler for restart button
+        restartBtn.addEventListener('click', init);
+        // Bat movement interval
+        setInterval(handleBatMovement, 16);
+        // Start game on any key press
+        document.addEventListener('keydown', function firstKeyPress() {
+            init();
+            document.removeEventListener('keydown', firstKeyPress);
+        });
+        // Display start instructions
+        gameOverScreen.style.display = 'block';
+        finalScore.textContent = "Press any key to start";
+        document.querySelector("#gameOver h1").textContent = "Modi vs Kejriwal";
+        document.querySelector("#gameOver p").textContent = "Use LEFT and RIGHT arrow keys to defend India!";
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: absolute; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">This website has been generated by <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
+</html>