Hugging Face's logo

Spaces:
MaxHeadspace
/
chainsaw-massacre-2d
Running

App Files Community
chainsaw-massacre-2d / index.html
MaxHeadspace's picture
MaxHeadspace
undefined - Follow Up Deployment
07a7aa2 verified
raw
history blame contribute delete
25.4 kB
<!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>