Spaces:

Mohabedalgani
/

zaido

Running

App Files Files Community

Mohabedalgani commited on Apr 10

Commit

252bfbe

verified ·

1 Parent(s): dda2f09

Add 2 files

Browse files

Files changed (2) hide show

README.md +6 -4
index.html +441 -19

README.md CHANGED Viewed

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

 ---
+title: zaido
+emoji: 🐳
 colorFrom: red
+colorTo: green
 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,441 @@
-<!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>Brick Attacker Game</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        #gameCanvas {
+            background-color: #1a202c;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+        .game-container {
+            position: relative;
+        }
+        .game-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            background-color: rgba(0, 0, 0, 0.7);
+            color: white;
+            border-radius: 8px;
+        }
+        .hidden {
+            display: none;
+        }
+        .brick {
+            border-radius: 2px;
+        }
+        .heart-icon {
+            color: #f56565;
+        }
+    </style>
+</head>
+<body class="bg-gray-900 min-h-screen flex flex-col items-center justify-center p-4">
+    <div class="max-w-4xl w-full">
+        <h1 class="text-3xl font-bold text-center text-white mb-6">Brick Attacker</h1>
+        <div class="flex justify-between items-center mb-4">
+            <div class="flex items-center space-x-2">
+                <span class="text-white font-semibold">Score:</span>
+                <span id="score" class="text-yellow-300 font-bold text-xl">0</span>
+            </div>
+            <div class="flex items-center space-x-2">
+                <span class="text-white font-semibold">Lives:</span>
+                <div id="lives" class="flex space-x-1">
+                    <!-- Hearts will be added here by JavaScript -->
+                </div>
+            </div>
+        </div>
+        <div class="game-container relative">
+            <canvas id="gameCanvas" width="800" height="500"></canvas>
+            <div id="startScreen" class="game-overlay">
+                <h2 class="text-4xl font-bold mb-6 text-yellow-300">Brick Attacker</h2>
+                <p class="text-xl mb-8 text-center max-w-md">Use your mouse or arrow keys to move the paddle.<br>Break all bricks to win!</p>
+                <button id="startButton" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-8 rounded-full text-xl transition duration-200 transform hover:scale-105">
+                    Start Game
+                </button>
+            </div>
+            <div id="gameOverScreen" class="game-overlay hidden">
+                <h2 class="text-4xl font-bold mb-4 text-red-500">Game Over</h2>
+                <p class="text-2xl mb-2">Your score: <span id="finalScore" class="text-yellow-300">0</span></p>
+                <button id="restartButton" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded-full text-lg mt-6 transition duration-200 transform hover:scale-105">
+                    Play Again
+                </button>
+            </div>
+            <div id="winScreen" class="game-overlay hidden">
+                <h2 class="text-4xl font-bold mb-4 text-green-400">You Win!</h2>
+                <p class="text-2xl mb-2">Your score: <span id="winScore" class="text-yellow-300">0</span></p>
+                <button id="winRestartButton" class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-2 px-6 rounded-full text-lg mt-6 transition duration-200 transform hover:scale-105">
+                    Play Again
+                </button>
+            </div>
+        </div>
+        <div class="mt-6 text-center text-gray-400">
+            <p>Controls: Mouse movement or Left/Right arrow keys</p>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', () => {
+            // Game elements
+            const canvas = document.getElementById('gameCanvas');
+            const ctx = canvas.getContext('2d');
+            const scoreElement = document.getElementById('score');
+            const livesElement = document.getElementById('lives');
+            const startScreen = document.getElementById('startScreen');
+            const gameOverScreen = document.getElementById('gameOverScreen');
+            const winScreen = document.getElementById('winScreen');
+            const startButton = document.getElementById('startButton');
+            const restartButton = document.getElementById('restartButton');
+            const winRestartButton = document.getElementById('winRestartButton');
+            const finalScoreElement = document.getElementById('finalScore');
+            const winScoreElement = document.getElementById('winScore');
+            // Game variables
+            let score = 0;
+            let lives = 3;
+            let gameRunning = false;
+            let animationId;
+            // Game objects
+            const ball = {
+                x: canvas.width / 2,
+                y: canvas.height - 30,
+                radius: 10,
+                dx: 4,
+                dy: -4,
+                color: '#f56565'
+            };
+            const paddle = {
+                width: 100,
+                height: 15,
+                x: canvas.width / 2 - 50,
+                speed: 8,
+                color: '#4299e1'
+            };
+            const brick = {
+                rowCount: 5,
+                columnCount: 10,
+                width: 75,
+                height: 20,
+                padding: 10,
+                offsetTop: 50,
+                offsetLeft: 30,
+                colors: ['#48bb78', '#f6ad55', '#9f7aea', '#f687b3', '#4fd1c5']
+            };
+            let bricks = [];
+            // Initialize bricks
+            function initBricks() {
+                bricks = [];
+                for (let c = 0; c < brick.columnCount; c++) {
+                    bricks[c] = [];
+                    for (let r = 0; r < brick.rowCount; r++) {
+                        bricks[c][r] = { x: 0, y: 0, status: 1, color: brick.colors[r % brick.colors.length] };
+                    }
+                }
+            }
+            // Draw ball
+            function drawBall() {
+                ctx.beginPath();
+                ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
+                ctx.fillStyle = ball.color;
+                ctx.fill();
+                ctx.closePath();
+            }
+            // Draw paddle
+            function drawPaddle() {
+                ctx.beginPath();
+                ctx.roundRect(paddle.x, canvas.height - paddle.height - 10, paddle.width, paddle.height, 8);
+                ctx.fillStyle = paddle.color;
+                ctx.fill();
+                ctx.closePath();
+            }
+            // Draw bricks
+            function drawBricks() {
+                for (let c = 0; c < brick.columnCount; c++) {
+                    for (let r = 0; r < brick.rowCount; r++) {
+                        if (bricks[c][r].status === 1) {
+                            const brickX = c * (brick.width + brick.padding) + brick.offsetLeft;
+                            const brickY = r * (brick.height + brick.padding) + brick.offsetTop;
+                            bricks[c][r].x = brickX;
+                            bricks[c][r].y = brickY;
+                            ctx.beginPath();
+                            ctx.roundRect(brickX, brickY, brick.width, brick.height, 2);
+                            ctx.fillStyle = bricks[c][r].color;
+                            ctx.fill();
+                            ctx.closePath();
+                        }
+                    }
+                }
+            }
+            // Collision detection
+            function collisionDetection() {
+                for (let c = 0; c < brick.columnCount; c++) {
+                    for (let r = 0; r < brick.rowCount; r++) {
+                        const b = bricks[c][r];
+                        if (b.status === 1) {
+                            if (
+                                ball.x + ball.radius > b.x &&
+                                ball.x - ball.radius < b.x + brick.width &&
+                                ball.y + ball.radius > b.y &&
+                                ball.y - ball.radius < b.y + brick.height
+                            ) {
+                                ball.dy = -ball.dy;
+                                b.status = 0;
+                                score += 10;
+                                scoreElement.textContent = score;
+                                // Check if all bricks are broken
+                                if (checkWin()) {
+                                    gameWin();
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            // Check if all bricks are broken
+            function checkWin() {
+                for (let c = 0; c < brick.columnCount; c++) {
+                    for (let r = 0; r < brick.rowCount; r++) {
+                        if (bricks[c][r].status === 1) {
+                            return false;
+                        }
+                    }
+                }
+                return true;
+            }
+            // Update lives display
+            function updateLivesDisplay() {
+                livesElement.innerHTML = '';
+                for (let i = 0; i < lives; i++) {
+                    livesElement.innerHTML += `
+                        <svg class="heart-icon w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path>
+                        </svg>
+                    `;
+                }
+            }
+            // Main game loop
+            function draw() {
+                // Clear canvas
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+                // Draw game objects
+                drawBricks();
+                drawBall();
+                drawPaddle();
+                // Collision detection
+                collisionDetection();
+                // Wall collision (left/right)
+                if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
+                    ball.dx = -ball.dx;
+                }
+                // Wall collision (top)
+                if (ball.y + ball.dy < ball.radius) {
+                    ball.dy = -ball.dy;
+                }
+                // Paddle collision
+                else if (
+                    ball.y + ball.dy > canvas.height - ball.radius - paddle.height - 10 &&
+                    ball.x > paddle.x &&
+                    ball.x < paddle.x + paddle.width
+                ) {
+                    // Calculate bounce angle based on where ball hits paddle
+                    const hitPosition = (ball.x - (paddle.x + paddle.width / 2)) / (paddle.width / 2);
+                    const angle = hitPosition * Math.PI / 3; // Max 60 degrees
+                    ball.dx = 5 * Math.sin(angle);
+                    ball.dy = -Math.abs(5 * Math.cos(angle));
+                }
+                // Bottom wall collision (lose life)
+                else if (ball.y + ball.dy > canvas.height - ball.radius) {
+                    lives--;
+                    updateLivesDisplay();
+                    if (lives <= 0) {
+                        gameOver();
+                    } else {
+                        // Reset ball and paddle
+                        ball.x = canvas.width / 2;
+                        ball.y = canvas.height - 30;
+                        ball.dx = 4 * (Math.random() > 0.5 ? 1 : -1);
+                        ball.dy = -4;
+                        paddle.x = canvas.width / 2 - paddle.width / 2;
+                    }
+                }
+                // Move ball
+                ball.x += ball.dx;
+                ball.y += ball.dy;
+                // Continue animation
+                if (gameRunning) {
+                    animationId = requestAnimationFrame(draw);
+                }
+            }
+            // Keyboard controls
+            let rightPressed = false;
+            let leftPressed = false;
+            document.addEventListener('keydown', (e) => {
+                if (e.key === 'Right' || e.key === 'ArrowRight') {
+                    rightPressed = true;
+                } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
+                    leftPressed = true;
+                }
+            });
+            document.addEventListener('keyup', (e) => {
+                if (e.key === 'Right' || e.key === 'ArrowRight') {
+                    rightPressed = false;
+                } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
+                    leftPressed = false;
+                }
+            });
+            // Mouse controls
+            document.addEventListener('mousemove', (e) => {
+                if (!gameRunning) return;
+                const relativeX = e.clientX - canvas.offsetLeft;
+                if (relativeX > paddle.width / 2 && relativeX < canvas.width - paddle.width / 2) {
+                    paddle.x = relativeX - paddle.width / 2;
+                }
+            });
+            // Touch controls for mobile
+            document.addEventListener('touchmove', (e) => {
+                if (!gameRunning) return;
+                e.preventDefault();
+                const touch = e.touches[0];
+                const relativeX = touch.clientX - canvas.offsetLeft;
+                if (relativeX > paddle.width / 2 && relativeX < canvas.width - paddle.width / 2) {
+                    paddle.x = relativeX - paddle.width / 2;
+                }
+            }, { passive: false });
+            // Update paddle position based on keyboard input
+            function updatePaddlePosition() {
+                if (rightPressed && paddle.x < canvas.width - paddle.width) {
+                    paddle.x += paddle.speed;
+                } else if (leftPressed && paddle.x > 0) {
+                    paddle.x -= paddle.speed;
+                }
+            }
+            // Game over
+            function gameOver() {
+                gameRunning = false;
+                cancelAnimationFrame(animationId);
+                finalScoreElement.textContent = score;
+                gameOverScreen.classList.remove('hidden');
+            }
+            // Game win
+            function gameWin() {
+                gameRunning = false;
+                cancelAnimationFrame(animationId);
+                winScoreElement.textContent = score;
+                winScreen.classList.remove('hidden');
+            }
+            // Reset game
+            function resetGame() {
+                score = 0;
+                lives = 3;
+                scoreElement.textContent = score;
+                updateLivesDisplay();
+                ball.x = canvas.width / 2;
+                ball.y = canvas.height - 30;
+                ball.dx = 4 * (Math.random() > 0.5 ? 1 : -1);
+                ball.dy = -4;
+                paddle.x = canvas.width / 2 - paddle.width / 2;
+                initBricks();
+            }
+            // Start game
+            function startGame() {
+                resetGame();
+                startScreen.classList.add('hidden');
+                gameOverScreen.classList.add('hidden');
+                winScreen.classList.add('hidden');
+                gameRunning = true;
+                draw();
+            }
+            // Event listeners for buttons
+            startButton.addEventListener('click', startGame);
+            restartButton.addEventListener('click', startGame);
+            winRestartButton.addEventListener('click', startGame);
+            // Initialize game
+            updateLivesDisplay();
+            // Make canvas responsive
+            function resizeCanvas() {
+                const container = document.querySelector('.game-container');
+                const containerWidth = container.clientWidth;
+                // Maintain aspect ratio (16:10)
+                canvas.width = Math.min(800, containerWidth);
+                canvas.height = (canvas.width * 5) / 8;
+                // Adjust ball and paddle size based on canvas size
+                ball.radius = canvas.width / 80;
+                paddle.width = canvas.width / 8;
+                paddle.height = canvas.height / 35;
+                // Reset game objects
+                if (!gameRunning) {
+                    ball.x = canvas.width / 2;
+                    ball.y = canvas.height - 30;
+                    paddle.x = canvas.width / 2 - paddle.width / 2;
+                }
+            }
+            window.addEventListener('resize', resizeCanvas);
+            resizeCanvas();
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Mohabedalgani/zaido" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>