Spaces:

MaxHeadspace
/

chainsaw-massacre-2d

Running

App Files Files Community

MaxHeadspace commited on Jul 19

Commit

dfb414e

verified ·

1 Parent(s): 59a9824

lastly make a crazy 8-bit like minecraft 3d graphices that is a house and frot and back yard and you have a chain saw and you have to find all the kids in the house and saw them... then you can hide and wait for the rescue and po po to show up and you keep sawing them till uyou die lol like youre jason but a chain saw - Initial Deployment

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Chainsaw Massacre 2d
-emoji: 🏆
 colorFrom: blue
-colorTo: yellow
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: chainsaw-massacre-2d
+emoji: 🐳
 colorFrom: blue
+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,697 @@
-<!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>Chainsaw Massacre: 8-Bit Horror</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+            background-color: #111;
+            font-family: 'Press Start 2P', cursive;
+        }
+        canvas {
+            display: block;
+        }
+        #ui {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            color: white;
+            text-shadow: 2px 2px 0 #000;
+            pointer-events: none;
+        }
+        #health-bar {
+            width: 200px;
+            height: 20px;
+            border: 3px solid white;
+            margin: 10px;
+        }
+        #health-fill {
+            height: 100%;
+            width: 100%;
+            background-color: red;
+            transition: width 0.3s;
+        }
+        #game-over {
+            display: none;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: rgba(0, 0, 0, 0.8);
+            padding: 20px;
+            border: 5px solid red;
+            text-align: center;
+        }
+        #start-screen {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #000;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            color: white;
+            z-index: 100;
+        }
+        @font-face {
+            font-family: 'Press Start 2P';
+            src: url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
+        }
+        .pixel-text {
+            font-family: 'Press Start 2P', cursive;
+        }
+        .blood-particle {
+            position: absolute;
+            width: 5px;
+            height: 5px;
+            background-color: red;
+            border-radius: 50%;
+            pointer-events: none;
+        }
+    </style>
+</head>
+<body>
+    <div id="start-screen" class="pixel-text">
+        <h1 class="text-4xl mb-8 text-red-600">CHAINSAW MASSACRE</h1>
+        <p class="mb-4 text-yellow-400">8-BIT HORROR</p>
+        <p class="mb-8 text-green-400">Find and eliminate all targets</p>
+        <button id="start-btn" class="bg-red-600 hover:bg-red-700 text-white px-8 py-4 rounded-lg text-xl transition-all hover:scale-110">
+            START GAME
+        </button>
+        <div class="mt-12 text-xs text-gray-400">
+            <p>WASD to move | SPACE to attack | SHIFT to run</p>
+            <p>Left click to chainsaw | Right click to hide</p>
+        </div>
+    </div>
+    <div id="ui" class="pixel-text">
+        <div class="flex justify-between items-center p-4">
+            <div>
+                <div id="health-bar">
+                    <div id="health-fill"></div>
+                </div>
+                <div id="score" class="mt-2">KILLS: 0</div>
+            </div>
+            <div id="phase" class="text-xl">PHASE 1: HUNT KIDS</div>
+            <div id="timer" class="text-xl">TIME: 00:00</div>
+        </div>
+    </div>
+    <div id="game-over" class="pixel-text">
+        <h1 class="text-4xl text-red-600 mb-4">GAME OVER</h1>
+        <p id="final-score" class="text-2xl mb-8">You killed 0 victims</p>
+        <button id="restart-btn" class="bg-red-600 hover:bg-red-700 text-white px-8 py-4 rounded-lg text-xl">
+            PLAY AGAIN
+        </button>
+    </div>
+    <canvas id="gameCanvas"></canvas>
+    <script>
+        // Game setup
+        const canvas = document.getElementById('gameCanvas');
+        const ctx = canvas.getContext('2d');
+        const startScreen = document.getElementById('start-screen');
+        const startBtn = document.getElementById('start-btn');
+        const gameOverScreen = document.getElementById('game-over');
+        const restartBtn = document.getElementById('restart-btn');
+        const healthFill = document.getElementById('health-fill');
+        const scoreDisplay = document.getElementById('score');
+        const phaseDisplay = document.getElementById('phase');
+        const timerDisplay = document.getElementById('timer');
+        const finalScoreDisplay = document.getElementById('final-score');
+        // Set canvas size
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+        // Game state
+        let gameRunning = false;
+        let score = 0;
+        let health = 100;
+        let gameTime = 0;
+        let gamePhase = 1; // 1 = hunt kids, 2 = hide, 3 = fight police
+        let timerInterval;
+        // Player
+        const player = {
+            x: canvas.width / 2,
+            y: canvas.height / 2,
+            size: 30,
+            speed: 3,
+            isAttacking: false,
+            isHiding: false,
+            direction: 0, // angle in radians
+            chainsawSound: new Audio('data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU...'), // placeholder
+        };
+        // Kids (victims)
+        let kids = [];
+        const KID_COUNT = 8;
+        // Police
+        let police = [];
+        const POLICE_COUNT = 5;
+        // House structure (simplified for 8-bit)
+        const house = {
+            walls: [
+                {x: 200, y: 200, width: 400, height: 300, color: '#8B4513'}, // main house
+                {x: 300, y: 150, width: 200, height: 50, color: '#A52A2A'}, // roof
+                {x: 600, y: 300, width: 100, height: 200, color: '#8B4513'}, // garage
+                {x: 200, y: 500, width: 200, height: 50, color: '#228B22'}, // front yard fence
+                {x: 400, y: 500, width: 300, height: 50, color: '#228B22'}, // front yard fence
+            ],
+            doors: [
+                {x: 350, y: 500, width: 50, height: 30, color: '#654321'}
+            ],
+            windows: [
+                {x: 250, y: 250, width: 50, height: 50, color: '#87CEEB'},
+                {x: 450, y: 250, width: 50, height: 50, color: '#87CEEB'},
+                {x: 620, y: 350, width: 50, height: 50, color: '#87CEEB'}
+            ]
+        };
+        // Trees in yard
+        const trees = [
+            {x: 100, y: 400, trunkWidth: 20, trunkHeight: 60, leavesWidth: 80, leavesHeight: 100},
+            {x: 700, y: 400, trunkWidth: 20, trunkHeight: 60, leavesWidth: 80, leavesHeight: 100},
+            {x: 150, y: 600, trunkWidth: 20, trunkHeight: 60, leavesWidth: 80, leavesHeight: 100},
+            {x: 650, y: 600, trunkWidth: 20, trunkHeight: 60, leavesWidth: 80, leavesHeight: 100}
+        ];
+        // Initialize game
+        function initGame() {
+            // Reset game state
+            gameRunning = true;
+            score = 0;
+            health = 100;
+            gameTime = 0;
+            gamePhase = 1;
+            kids = [];
+            police = [];
+            // Create kids
+            for (let i = 0; i < KID_COUNT; i++) {
+                kids.push({
+                    x: Math.random() * (canvas.width - 100) + 50,
+                    y: Math.random() * (canvas.height - 100) + 50,
+                    size: 20,
+                    speed: 1 + Math.random() * 1,
+                    direction: Math.random() * Math.PI * 2,
+                    changeDirectionTimer: 0,
+                    isAlive: true,
+                    screamSound: new Audio('data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU...') // placeholder
+                });
+            }
+            // Start timer
+            clearInterval(timerInterval);
+            timerInterval = setInterval(updateTimer, 1000);
+            // Hide start screen
+            startScreen.style.display = 'none';
+            gameOverScreen.style.display = 'none';
+            // Start game loop
+            requestAnimationFrame(gameLoop);
+        }
+        // Game loop
+        function gameLoop() {
+            if (!gameRunning) return;
+            // Clear canvas
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Update game state
+            updatePlayer();
+            updateKids();
+            if (gamePhase >= 3) updatePolice();
+            // Draw game world
+            drawWorld();
+            // Draw player
+            drawPlayer();
+            // Draw kids
+            drawKids();
+            // Draw police if phase 3
+            if (gamePhase >= 3) drawPolice();
+            // Check game phase transitions
+            checkPhaseTransitions();
+            // Check game over
+            if (health <= 0) {
+                gameOver();
+                return;
+            }
+            // Continue loop
+            requestAnimationFrame(gameLoop);
+        }
+        // Update player
+        function updatePlayer() {
+            // Movement
+            const moveX = (keys['d'] ? 1 : 0) - (keys['a'] ? 1 : 0);
+            const moveY = (keys['s'] ? 1 : 0) - (keys['w'] ? 1 : 0);
+            if (moveX !== 0 || moveY !== 0) {
+                player.direction = Math.atan2(moveY, moveX);
+                const speed = keys['Shift'] ? player.speed * 1.5 : player.speed;
+                player.x += Math.cos(player.direction) * speed;
+                player.y += Math.sin(player.direction) * speed;
+                // 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));
+            }
+            // Attacking
+            if (mouse.isAttacking && !player.isAttacking) {
+                player.isAttacking = true;
+                player.chainsawSound.play();
+                // Check for hits on kids or police
+                const targets = gamePhase >= 3 ? [...kids, ...police] : kids;
+                for (let target of targets) {
+                    if (!target.isAlive) continue;
+                    const dist = Math.sqrt(
+                        Math.pow(target.x - player.x, 2) +
+                        Math.pow(target.y - player.y, 2)
+                    );
+                    if (dist < player.size + target.size) {
+                        // Hit!
+                        target.isAlive = false;
+                        score++;
+                        scoreDisplay.textContent = `KILLS: ${score}`;
+                        // Create blood particles
+                        createBlood(target.x, target.y);
+                        // Play scream sound
+                        if (target.screamSound) target.screamSound.play();
+                    }
+                }
+                setTimeout(() => {
+                    player.isAttacking = false;
+                }, 500);
+            }
+            // Hiding
+            player.isHiding = mouse.isHiding;
+        }
+        // Update kids
+        function updateKids() {
+            for (let kid of kids) {
+                if (!kid.isAlive) continue;
+                // Random movement
+                kid.changeDirectionTimer--;
+                if (kid.changeDirectionTimer <= 0) {
+                    kid.direction = Math.random() * Math.PI * 2;
+                    kid.changeDirectionTimer = 30 + Math.random() * 60;
+                }
+                // Move
+                kid.x += Math.cos(kid.direction) * kid.speed;
+                kid.y += Math.sin(kid.direction) * kid.speed;
+                // Boundary check
+                kid.x = Math.max(kid.size, Math.min(canvas.width - kid.size, kid.x));
+                kid.y = Math.max(kid.size, Math.min(canvas.height - kid.size, kid.y));
+                // Run from player if close
+                const distToPlayer = Math.sqrt(
+                    Math.pow(kid.x - player.x, 2) +
+                    Math.pow(kid.y - player.y, 2)
+                );
+                if (distToPlayer < 200) {
+                    // Run away
+                    const angleAway = Math.atan2(kid.y - player.y, kid.x - player.x);
+                    kid.x += Math.cos(angleAway) * kid.speed * 2;
+                    kid.y += Math.sin(angleAway) * kid.speed * 2;
+                }
+            }
+        }
+        // Update police
+        function updatePolice() {
+            if (police.length === 0) {
+                // Spawn police
+                for (let i = 0; i < POLICE_COUNT; i++) {
+                    police.push({
+                        x: Math.random() * (canvas.width - 100) + 50,
+                        y: Math.random() * (canvas.height - 100) + 50,
+                        size: 25,
+                        speed: 2 + Math.random() * 1,
+                        direction: Math.random() * Math.PI * 2,
+                        changeDirectionTimer: 0,
+                        isAlive: true,
+                        shootTimer: 0
+                    });
+                }
+            }
+            for (let cop of police) {
+                if (!cop.isAlive) continue;
+                // Chase player
+                cop.direction = Math.atan2(player.y - cop.y, player.x - cop.x);
+                cop.x += Math.cos(cop.direction) * cop.speed;
+                cop.y += Math.sin(cop.direction) * cop.speed;
+                // Shoot at player periodically
+                cop.shootTimer--;
+                if (cop.shootTimer <= 0) {
+                    cop.shootTimer = 60 + Math.random() * 60;
+                    // Check if player is in line of sight
+                    const distToPlayer = Math.sqrt(
+                        Math.pow(player.x - cop.x, 2) +
+                        Math.pow(player.y - cop.y, 2)
+                    );
+                    if (distToPlayer < 300 && !player.isHiding) {
+                        // Player hit
+                        health -= 10;
+                        healthFill.style.width = `${health}%`;
+                        // Create blood particles at player
+                        createBlood(player.x, player.y);
+                    }
+                }
+            }
+        }
+        // Draw world
+        function drawWorld() {
+            // Draw grass background
+            ctx.fillStyle = '#228B22';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // Draw house
+            for (let wall of house.walls) {
+                ctx.fillStyle = wall.color;
+                ctx.fillRect(wall.x, wall.y, wall.width, wall.height);
+            }
+            // Draw doors
+            for (let door of house.doors) {
+                ctx.fillStyle = door.color;
+                ctx.fillRect(door.x, door.y, door.width, door.height);
+            }
+            // Draw windows
+            for (let window of house.windows) {
+                ctx.fillStyle = window.color;
+                ctx.fillRect(window.x, window.y, window.width, window.height);
+            }
+            // Draw trees
+            for (let tree of trees) {
+                // Trunk
+                ctx.fillStyle = '#8B4513';
+                ctx.fillRect(
+                    tree.x - tree.trunkWidth/2,
+                    tree.y - tree.trunkHeight/2,
+                    tree.trunkWidth,
+                    tree.trunkHeight
+                );
+                // Leaves
+                ctx.fillStyle = '#006400';
+                ctx.beginPath();
+                ctx.ellipse(
+                    tree.x,
+                    tree.y - tree.leavesHeight/2,
+                    tree.leavesWidth/2,
+                    tree.leavesHeight/2,
+                    0, 0, Math.PI * 2
+                );
+                ctx.fill();
+            }
+        }
+        // Draw player
+        function drawPlayer() {
+            // Body
+            ctx.fillStyle = player.isHiding ? '#555' : '#333';
+            ctx.beginPath();
+            ctx.arc(player.x, player.y, player.size, 0, Math.PI * 2);
+            ctx.fill();
+            // Face (simple 8-bit style)
+            ctx.fillStyle = '#FFF';
+            ctx.beginPath();
+            ctx.arc(
+                player.x + Math.cos(player.direction) * player.size/2,
+                player.y + Math.sin(player.direction) * player.size/2,
+                player.size/4, 0, Math.PI * 2
+            );
+            ctx.fill();
+            // Chainsaw
+            if (player.isAttacking) {
+                ctx.fillStyle = '#FF0000';
+                ctx.beginPath();
+                ctx.arc(
+                    player.x + Math.cos(player.direction) * player.size * 1.5,
+                    player.y + Math.sin(player.direction) * player.size * 1.5,
+                    player.size/2, 0, Math.PI * 2
+                );
+                ctx.fill();
+                // Blood spray
+                ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
+                ctx.beginPath();
+                ctx.moveTo(player.x, player.y);
+                ctx.lineTo(
+                    player.x + Math.cos(player.direction) * player.size * 3,
+                    player.y + Math.sin(player.direction) * player.size * 3
+                );
+                ctx.lineWidth = 10;
+                ctx.stroke();
+            }
+        }
+        // Draw kids
+        function drawKids() {
+            for (let kid of kids) {
+                if (!kid.isAlive) continue;
+                // Body
+                ctx.fillStyle = '#FF69B4';
+                ctx.beginPath();
+                ctx.arc(kid.x, kid.y, kid.size, 0, Math.PI * 2);
+                ctx.fill();
+                // Face
+                ctx.fillStyle = '#FFF';
+                ctx.beginPath();
+                ctx.arc(kid.x, kid.y - kid.size/3, kid.size/3, 0, Math.PI * 2);
+                ctx.fill();
+                // Scream mouth if running
+                const distToPlayer = Math.sqrt(
+                    Math.pow(kid.x - player.x, 2) +
+                    Math.pow(kid.y - player.y, 2)
+                );
+                if (distToPlayer < 200) {
+                    ctx.fillStyle = '#FF0000';
+                    ctx.beginPath();
+                    ctx.arc(kid.x, kid.y - kid.size/3, kid.size/5, 0, Math.PI * 2);
+                    ctx.fill();
+                }
+            }
+        }
+        // Draw police
+        function drawPolice() {
+            for (let cop of police) {
+                if (!cop.isAlive) continue;
+                // Body
+                ctx.fillStyle = '#0000FF';
+                ctx.beginPath();
+                ctx.arc(cop.x, cop.y, cop.size, 0, Math.PI * 2);
+                ctx.fill();
+                // Face
+                ctx.fillStyle = '#FFF';
+                ctx.beginPath();
+                ctx.arc(cop.x, cop.y - cop.size/3, cop.size/3, 0, Math.PI * 2);
+                ctx.fill();
+                // Badge
+                ctx.fillStyle = '#FFD700';
+                ctx.beginPath();
+                ctx.arc(cop.x, cop.y, cop.size/3, 0, Math.PI * 2);
+                ctx.fill();
+                // Gun if shooting
+                if (cop.shootTimer > 50) {
+                    ctx.strokeStyle = '#000';
+                    ctx.lineWidth = 3;
+                    ctx.beginPath();
+                    ctx.moveTo(cop.x, cop.y);
+                    ctx.lineTo(
+                        cop.x + Math.cos(cop.direction) * cop.size * 2,
+                        cop.y + Math.sin(cop.direction) * cop.size * 2
+                    );
+                    ctx.stroke();
+                }
+            }
+        }
+        // Create blood particles
+        function createBlood(x, y) {
+            for (let i = 0; i < 10; i++) {
+                const particle = document.createElement('div');
+                particle.className = 'blood-particle';
+                particle.style.left = `${x + (Math.random() * 20 - 10)}px`;
+                particle.style.top = `${y + (Math.random() * 20 - 10)}px`;
+                document.body.appendChild(particle);
+                // Animate
+                const angle = Math.random() * Math.PI * 2;
+                const distance = 10 + Math.random() * 40;
+                const duration = 300 + Math.random() * 700;
+                particle.animate([
+                    {
+                        transform: `translate(0, 0)`,
+                        opacity: 1
+                    },
+                    {
+                        transform: `translate(${Math.cos(angle) * distance}px, ${Math.sin(angle) * distance}px)`,
+                        opacity: 0
+                    }
+                ], {
+                    duration: duration,
+                    easing: 'cubic-bezier(0.1, 0.8, 0.2, 1)'
+                });
+                // Remove after animation
+                setTimeout(() => {
+                    particle.remove();
+                }, duration);
+            }
+        }
+        // Check phase transitions
+        function checkPhaseTransitions() {
+            // Phase 1 to 2: when all kids are dead
+            if (gamePhase === 1) {
+                const aliveKids = kids.filter(kid => kid.isAlive).length;
+                if (aliveKids === 0) {
+                    gamePhase = 2;
+                    phaseDisplay.textContent = 'PHASE 2: HIDE AND WAIT';
+                    // Timer for police arrival
+                    setTimeout(() => {
+                        gamePhase = 3;
+                        phaseDisplay.textContent = 'PHASE 3: FIGHT POLICE';
+                    }, 10000); // 10 seconds
+                }
+            }
+        }
+        // Update timer
+        function updateTimer() {
+            gameTime++;
+            const minutes = Math.floor(gameTime / 60).toString().padStart(2, '0');
+            const seconds = (gameTime % 60).toString().padStart(2, '0');
+            timerDisplay.textContent = `TIME: ${minutes}:${seconds}`;
+        }
+        // Game over
+        function gameOver() {
+            gameRunning = false;
+            clearInterval(timerInterval);
+            // Show game over screen
+            finalScoreDisplay.textContent = `You killed ${score} victims`;
+            gameOverScreen.style.display = 'block';
+        }
+        // Input handling
+        const keys = {};
+        const mouse = {
+            x: 0,
+            y: 0,
+            isAttacking: false,
+            isHiding: false
+        };
+        window.addEventListener('keydown', (e) => {
+            keys[e.key.toLowerCase()] = true;
+        });
+        window.addEventListener('keyup', (e) => {
+            keys[e.key.toLowerCase()] = false;
+        });
+        canvas.addEventListener('mousemove', (e) => {
+            mouse.x = e.clientX;
+            mouse.y = e.clientY;
+            // Update player direction to face mouse
+            player.direction = Math.atan2(
+                e.clientY - player.y,
+                e.clientX - player.x
+            );
+        });
+        canvas.addEventListener('mousedown', (e) => {
+            if (e.button === 0) { // Left click
+                mouse.isAttacking = true;
+            } else if (e.button === 2) { // Right click
+                mouse.isHiding = true;
+            }
+        });
+        canvas.addEventListener('mouseup', (e) => {
+            if (e.button === 0) {
+                mouse.isAttacking = false;
+            } else if (e.button === 2) {
+                mouse.isHiding = false;
+            }
+        });
+        canvas.addEventListener('contextmenu', (e) => {
+            e.preventDefault(); // Prevent right-click menu
+        });
+        // Window resize
+        window.addEventListener('resize', () => {
+            canvas.width = window.innerWidth;
+            canvas.height = window.innerHeight;
+        });
+        // Start button
+        startBtn.addEventListener('click', initGame);
+        // Restart button
+        restartBtn.addEventListener('click', initGame);
+    </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=MaxHeadspace/chainsaw-massacre-2d" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>