Spaces:

MaxHeadspace
/

chainsaw-massacre-2d

Running

File size: 25,381 Bytes

dfb414e
 
 
 
 
07a7aa2
 
dfb414e

<!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>WWWWWWWWWW
    <script src="https://cdn.tailwindcss.com"></script>WWWWW
    <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>