Spaces:

keisetsu
/

mario-respect-bug-game

Running

App Files Files Community

keisetsu commited on Mar 29, 2025

Commit

fd1925a

verified ·

1 Parent(s): af88eed

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Mario Respect Bug Game
-emoji: 🏢
-colorFrom: yellow
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: mario-respect-bug-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,473 @@
-<!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>Mario Tribute Game</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: 'Press Start 2P', cursive;
+            background-color: #5b8ee5;
+            overflow: hidden;
+            height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            color: white;
+        }
+        #game-container {
+            position: relative;
+            width: 800px;
+            height: 400px;
+            background: linear-gradient(to bottom, #5b8ee5 0%, #5b8ee5 60%, #3a6b1a 60%, #3a6b1a 100%);
+            border: 8px solid #d35400;
+            border-radius: 5px;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
+            overflow: hidden;
+        }
+        #ground {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            height: 30px;
+            background: linear-gradient(to bottom, #8b4513, #a0522d);
+        }
+        #player {
+            position: absolute;
+            width: 40px;
+            height: 60px;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 60"><rect x="12" y="10" width="6" height="6" fill="%23ffffff"/><rect x="22" y="10" width="6" height="6" fill="%23ffffff"/><rect x="8" y="16" width="24" height="30" fill="%23e52521"/><rect x="12" y="18" width="4" height="4" fill="%23ffffff"/><rect x="24" y="18" width="4" height="4" fill="%23ffffff"/><rect x="10" y="46" width="8" height="8" fill="%23333333"/><rect x="22" y="46" width="8" height="8" fill="%23333333"/></svg>');
+            bottom: 30px;
+            left: 50px;
+            transition: transform 0.1s;
+            z-index: 10;
+        }
+        .coin {
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="10" r="8" fill="%23f1c40f" stroke="%23f39c12" stroke-width="2"/><circle cx="10" cy="10" r="4" fill="%23f39c12"/></svg>');
+            z-index: 5;
+        }
+        .enemy {
+            position: absolute;
+            width: 40px;
+            height: 30px;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 30"><rect x="5" y="5" width="30" height="20" rx="10" fill="%23e74c3c"/><circle cx="15" cy="13" r="3" fill="%23333"/><circle cx="25" cy="13" r="3" fill="%23333"/><path d="M10,20 Q20,25 30,20" stroke="%23333" fill="none" stroke-width="2"/></svg>');
+            bottom: 30px;
+            z-index: 5;
+        }
+        #score-board {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            background: rgba(0, 0, 0, 0.5);
+            padding: 10px 15px;
+            border-radius: 5px;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        #game-over {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            display: none;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 20;
+        }
+        #start-screen {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            z-index: 20;
+        }
+        button {
+            font-family: 'Press Start 2P', cursive;
+            background: #e74c3c;
+            color: white;
+            border: none;
+            padding: 15px 25px;
+            margin-top: 20px;
+            cursor: pointer;
+            border-radius: 5px;
+            transition: all 0.3s;
+        }
+        button:hover {
+            background: #c0392b;
+            transform: scale(1.05);
+        }
+        h1 {
+            color: #f1c40f;
+            text-shadow: 5px 5px 0 #e74c3c;
+            font-size: 36px;
+            margin-bottom: 20px;
+            animation: bounce 0.5s infinite alternate;
+        }
+        @keyframes bounce {
+            from { transform: translateY(0); }
+            to { transform: translateY(-10px); }
+        }
+        .cloud {
+            position: absolute;
+            width: 100px;
+            height: 60px;
+            background: white;
+            border-radius: 50px;
+            opacity: 0.8;
+        }
+        .cloud:before, .cloud:after {
+            content: '';
+            position: absolute;
+            background: white;
+            border-radius: 50%;
+        }
+        .cloud:before {
+            width: 50px;
+            height: 50px;
+            top: -20px;
+            left: 20px;
+        }
+        .cloud:after {
+            width: 30px;
+            height: 30px;
+            top: -10px;
+            right: 20px;
+        }
+        #controls {
+            margin-top: 20px;
+            text-align: center;
+            color: #f1c40f;
+            font-size: 14px;
+        }
+        #lives {
+            display: flex;
+            gap: 5px;
+            margin-left: 20px;
+        }
+        .life {
+            width: 20px;
+            height: 20px;
+            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path fill="%23e74c3c" d="M10,3 C12,0 16,1 17,5 C18,9 13,13 10,16 C7,13 2,9 3,5 C4,1 8,0 10,3 Z"/></svg>');
+        }
+    </style>
+</head>
+<body>
+    <h1>Mario Tribute</h1>
+    <div id="game-container">
+        <div id="ground"></div>
+        <div id="player"></div>
+        <div id="score-board">
+            <i class="fas fa-coins" style="color: gold;"></i>
+            <span id="score">0</span>
+            <div id="lives">
+                <div class="life"></div>
+                <div class="life"></div>
+                <div class="life"></div>
+            </div>
+        </div>
+        <div id="start-screen">
+            <h2>Collect Coins!</h2>
+            <p>Avoid the enemies!</p>
+            <button id="start-btn">START GAME</button>
+            <div id="controls">
+                <p><i class="fas fa-arrow-left"></i> <i class="fas fa-arrow-right"></i> - Move</p>
+                <p><i class="fas fa-arrow-up"></i> - Jump</p>
+            </div>
+        </div>
+        <div id="game-over">
+            <h2>GAME OVER!</h2>
+            <p>Final Score: <span id="final-score">0</span></p>
+            <button id="restart-btn">PLAY AGAIN</button>
+        </div>
+    </div>
+    <script>
+        const player = document.getElementById('player');
+        const gameContainer = document.getElementById('game-container');
+        const startScreen = document.getElementById('start-screen');
+        const gameOverScreen = document.getElementById('game-over');
+        const scoreDisplay = document.getElementById('score');
+        const finalScoreDisplay = document.getElementById('final-score');
+        const startBtn = document.getElementById('start-btn');
+        const restartBtn = document.getElementById('restart-btn');
+        const livesContainer = document.getElementById('lives');
+        let score = 0;
+        let lives = 3;
+        let gameRunning = false;
+        let playerX = 50;
+        let playerY = 0;
+        let playerVelocityY = 0;
+        let playerJumping = false;
+        let gravity = 0.6; // 重力を調整
+        let keys = {};
+        let coins = [];
+        let enemies = [];
+        let clouds = [];
+        let gameSpeed = 2;
+        let spawnRate = 100;
+        let animationId;
+        // Keyboard controls
+        document.addEventListener('keydown', (e) => {
+            keys[e.key] = true;
+            // スペースキーでもジャンプできるように
+            if ((e.key === 'ArrowUp' || e.key === ' ' || e.key === 'w') && !playerJumping && gameRunning) {
+                playerJumping = true;
+                playerVelocityY = -15; // ジャンプ力を強く
+            }
+        });
+        document.addEventListener('keyup', (e) => {
+            keys[e.key] = false;
+        });
+        // Start game
+        startBtn.addEventListener('click', startGame);
+        restartBtn.addEventListener('click', startGame);
+        function startGame() {
+            score = 0;
+            lives = 3;
+            playerX = 50;
+            playerY = 0;
+            playerVelocityY = 0;
+            playerJumping = false;
+            scoreDisplay.textContent = score;
+            updateLives();
+            // Clear existing elements
+            coins.forEach(coin => coin.remove());
+            enemies.forEach(enemy => enemy.remove());
+            coins = [];
+            enemies = [];
+            // Hide screens
+            startScreen.style.display = 'none';
+            gameOverScreen.style.display = 'none';
+            // Initialize clouds
+            createClouds();
+            gameRunning = true;
+            gameLoop();
+        }
+        function createClouds() {
+            // Clear existing clouds
+            clouds.forEach(cloud => cloud.remove());
+            clouds = [];
+            // Create new clouds
+            for (let i = 0; i < 5; i++) {
+                const cloud = document.createElement('div');
+                cloud.className = 'cloud';
+                cloud.style.left = `${Math.random() * 700}px`;
+                cloud.style.top = `${50 + Math.random() * 100}px`;
+                gameContainer.appendChild(cloud);
+                clouds.push(cloud);
+            }
+        }
+        function updateLives() {
+            livesContainer.innerHTML = '';
+            for (let i = 0; i < lives; i++) {
+                const life = document.createElement('div');
+                life.className = 'life';
+                livesContainer.appendChild(life);
+            }
+        }
+        function gameLoop() {
+            if (!gameRunning) return;
+            // Move player
+            if (keys['ArrowLeft'] || keys['a'] && playerX > 0) {
+                playerX -= 5;
+                player.style.transform = 'scaleX(-1)';
+            }
+            if (keys['ArrowRight'] || keys['d'] && playerX < 760) {
+                playerX += 5;
+                player.style.transform = 'scaleX(1)';
+            }
+            // Apply gravity
+            playerVelocityY += gravity;
+            playerY += playerVelocityY;
+            // Ground collision
+            if (playerY > 0) {
+                playerY = 0;
+                playerVelocityY = 0;
+                playerJumping = false;
+            }
+            // Update player position
+            player.style.left = `${playerX}px`;
+            player.style.bottom = `${30 + playerY}px`;
+            // Spawn coins and enemies randomly
+            if (Math.random() * spawnRate < 1) {
+                spawnCoin();
+            }
+            if (Math.random() * (spawnRate * 2) < 1) {
+                spawnEnemy();
+            }
+            // Move coins
+            coins.forEach((coin, index) => {
+                const coinLeft = parseInt(coin.style.left);
+                coin.style.left = `${coinLeft - gameSpeed}px`;
+                // Remove coin if out of screen
+                if (coinLeft < -20) {
+                    coin.remove();
+                    coins.splice(index, 1);
+                }
+                // Check collision with player
+                if (checkCollision(player, coin)) {
+                    score += 10;
+                    scoreDisplay.textContent = score;
+                    coin.remove();
+                    coins.splice(index, 1);
+                    // Increase difficulty
+                    if (score % 50 === 0) {
+                        gameSpeed += 0.5;
+                        spawnRate = Math.max(50, spawnRate - 5);
+                    }
+                }
+            });
+            // Move enemies
+            enemies.forEach((enemy, index) => {
+                const enemyLeft = parseInt(enemy.style.left);
+                enemy.style.left = `${enemyLeft - gameSpeed * 1.5}px`;
+                // Remove enemy if out of screen
+                if (enemyLeft < -40) {
+                    enemy.remove();
+                    enemies.splice(index, 1);
+                }
+                // Check collision with player
+                if (checkCollision(player, enemy)) {
+                    lives--;
+                    updateLives();
+                    if (lives <= 0) {
+                        gameOver();
+                    } else {
+                        // Knockback effect
+                        const knockbackDirection = playerX < enemyLeft ? -20 : 20;
+                        playerX += knockbackDirection;
+                        playerVelocityY = -8; // ノックバックのジャンプ力を調整
+                        playerJumping = true;
+                        enemy.remove();
+                        enemies.splice(index, 1);
+                    }
+                }
+            });
+            // Move clouds
+            clouds.forEach(cloud => {
+                const cloudLeft = parseInt(cloud.style.left);
+                cloud.style.left = `${cloudLeft - gameSpeed * 0.5}px`;
+                // Reset cloud position when out of screen
+                if (cloudLeft < -100) {
+                    cloud.style.left = '800px';
+                    cloud.style.top = `${50 + Math.random() * 100}px`;
+                }
+            });
+            animationId = requestAnimationFrame(gameLoop);
+        }
+        function spawnCoin() {
+            const coin = document.createElement('div');
+            coin.className = 'coin';
+            coin.style.left = '800px';
+            coin.style.bottom = `${60 + Math.random() * 200}px`;
+            gameContainer.appendChild(coin);
+            coins.push(coin);
+        }
+        function spawnEnemy() {
+            const enemy = document.createElement('div');
+            enemy.className = 'enemy';
+            enemy.style.left = '800px';
+            enemy.style.bottom = '30px';
+            gameContainer.appendChild(enemy);
+            enemies.push(enemy);
+        }
+        function checkCollision(element1, element2) {
+            const rect1 = element1.getBoundingClientRect();
+            const rect2 = element2.getBoundingClientRect();
+            return rect1.left < rect2.right &&
+                   rect1.right > rect2.left &&
+                   rect1.top < rect2.bottom &&
+                   rect1.bottom > rect2.top;
+        }
+        function gameOver() {
+            gameRunning = false;
+            cancelAnimationFrame(animationId);
+            finalScoreDisplay.textContent = score;
+            gameOverScreen.style.display = 'flex';
+        }
+    </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>