Spaces:

Ghxxxst
/

deepsite-project

Running

App Files Files Community

Ghxxxst commited on Sep 28, 2025

Commit

aca80db

verified ·

1 Parent(s): aac8fb5

Create a 2d video game that crosses world of warcraft with meathheads

Browse files

Files changed (2) hide show

game.html +199 -0
index.html +19 -5

game.html ADDED Viewed

	@@ -0,0 +1,199 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Methcraft - WoW meets Meth</title>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background-color: #1a1a1a;
+            font-family: 'Arial', sans-serif;
+        }
+        #gameCanvas {
+            display: block;
+            background-color: #333;
+        }
+        #ui {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            color: white;
+            font-size: 20px;
+        }
+        #startScreen {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.7);
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            color: white;
+        }
+        button {
+            padding: 15px 30px;
+            font-size: 20px;
+            background-color: #4a2b0f;
+            color: #f1c40f;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            margin-top: 20px;
+        }
+    </style>
+</head>
+<body>
+    <canvas id="gameCanvas"></canvas>
+    <div id="ui">
+        <div>Health: <span id="health">100</span></div>
+        <div>Mana: <span id="mana">100</span></div>
+        <div>Score: <span id="score">0</span></div>
+    </div>
+    <div id="startScreen">
+        <h1>METHCRAFT</h1>
+        <p>A twisted mix of WoW and meth addicts</p>
+        <button id="startButton">Start Game</button>
+    </div>
+    <script>
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        const startScreen = document.getElementById('startScreen');
+        const startButton = document.getElementById('startButton');
+        // Set canvas size
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+        // Game variables
+        let player = {
+            x: canvas.width/2,
+            y: canvas.height/2,
+            size: 30,
+            speed: 5,
+            health: 100,
+            mana: 100,
+            color: '#f1c40f'
+        };
+        let enemies = [];
+        let score = 0;
+        let gameRunning = false;
+        // Start game
+        startButton.addEventListener('click', () => {
+            startScreen.style.display = 'none';
+            gameRunning = true;
+            spawnEnemies();
+            gameLoop();
+        });
+        // Enemy spawning
+        function spawnEnemies() {
+            setInterval(() => {
+                const size = Math.random() * 30 + 20;
+                enemies.push({
+                    x: Math.random() > 0.5 ? 0 : canvas.width,
+                    y: Math.random() * canvas.height,
+                    size: size,
+                    speed: Math.random() * 3 + 1,
+                    color: `hsl(${Math.random() * 360}, 70%, 50%)`,
+                    health: size
+                });
+            }, 1000);
+        }
+        // Game loop
+        function gameLoop() {
+            if (!gameRunning) return;
+            // Clear canvas
+            ctx.fillStyle = '#333';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // Draw player
+            ctx.fillStyle = player.color;
+            ctx.beginPath();
+            ctx.arc(player.x, player.y, player.size, 0, Math.PI * 2);
+            ctx.fill();
+            // Draw enemies
+            enemies.forEach((enemy, index) => {
+                // Move enemy toward player
+                const angle = Math.atan2(player.y - enemy.y, player.x - enemy.x);
+                enemy.x += Math.cos(angle) * enemy.speed;
+                enemy.y += Math.sin(angle) * enemy.speed;
+                // Draw enemy
+                ctx.fillStyle = enemy.color;
+                ctx.beginPath();
+                ctx.arc(enemy.x, enemy.y, enemy.size, 0, Math.PI * 2);
+                ctx.fill();
+                // Collision detection
+                const dist = Math.hypot(player.x - enemy.x, player.y - enemy.y);
+                if (dist < player.size + enemy.size) {
+                    player.health -= 5;
+                    enemy.health -= 10;
+                    document.getElementById('health').textContent = player.health;
+                    if (enemy.health <= 0) {
+                        enemies.splice(index, 1);
+                        score += 10;
+                        document.getElementById('score').textContent = score;
+                    }
+                    if (player.health <= 0) {
+                        gameOver();
+                    }
+                }
+            });
+            requestAnimationFrame(gameLoop);
+        }
+        // Game over
+        function gameOver() {
+            gameRunning = false;
+            startScreen.style.display = 'flex';
+            startScreen.innerHTML = `
+                <h1>GAME OVER</h1>
+                <p>Your score: ${score}</p>
+                <button id="restartButton">Play Again</button>
+            `;
+            document.getElementById('restartButton').addEventListener('click', () => {
+                player.health = 100;
+                player.mana = 100;
+                score = 0;
+                enemies = [];
+                document.getElementById('health').textContent = player.health;
+                document.getElementById('mana').textContent = player.mana;
+                document.getElementById('score').textContent = score;
+                startScreen.style.display = 'none';
+                gameRunning = true;
+                spawnEnemies();
+                gameLoop();
+            });
+        }
+        // Player movement
+        window.addEventListener('keydown', (e) => {
+            if (!gameRunning) return;
+            switch(e.key) {
+                case 'w': player.y -= player.speed; break;
+                case 's': player.y += player.speed; break;
+                case 'a': player.x -= player.speed; break;
+                case 'd': player.x += player.speed; break;
+            }
+            // Boundary check
+            player.x = Math.max(player.size, Math.min(canvas.width - player.size, player.x));
+            player.y = Math.max(player.size, Math.min(canvas.height - player.size, player.y));
+        });
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -8,12 +8,26 @@
 	</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>

 	</head>
 	<body>
 		<div class="card">
+			<h1>Welcome to Methcraft!</h1>
+			<p>A twisted 2D game that crosses World of Warcraft with meth addicts.</p>
 			<p>
+				<a href="game.html" class="play-button">Play Now</a>
 			</p>
 		</div>
+		<style>
+			.play-button {
+				display: inline-block;
+				padding: 10px 20px;
+				background-color: #4a2b0f;
+				color: #f1c40f;
+				text-decoration: none;
+				border-radius: 5px;
+				font-weight: bold;
+				margin-top: 20px;
+			}
+			.play-button:hover {
+				background-color: #5a3b1f;
+			}
+		</style>
+</body>
 </html>