Create a pacman game, this kiind of a puzzle, but with a different character named Tossie. Tossie is a walking dead man with a lots of eyes and ugly body Scarfalls. He's a skeleton life form which acts as an artist for painting a lot more ugly monsters a lot more ugly than him with big tits and big ears and eyes and they are slimy and horror like life forms that blown you away
66f39ea
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Tossie's Monster Art Maze</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Creepster&display=swap'); | |
| body { | |
| font-family: 'Creepster', cursive; | |
| background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); | |
| overflow-x: hidden; | |
| } | |
| .game-container { | |
| perspective: 1000px; | |
| } | |
| .maze-cell { | |
| transition: all 0.3s ease; | |
| } | |
| .tossie { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .monster { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0px) rotate(0deg); } | |
| 50% { transform: translateY(-10px) rotate(5deg); } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { transform: scale(1); opacity: 0.8; } | |
| 50% { transform: scale(1.1); opacity: 1; } | |
| } | |
| .glow { | |
| box-shadow: 0 0 20px #ff6b6b, 0 0 40px #ff6b6b, 0 0 60px #ff6b6b; | |
| } | |
| .neon-text { | |
| text-shadow: 0 0 10px #ff6b6b, 0 0 20px #ff6b6b, 0 0 30px #ff6b6b; | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen text-white"> | |
| <!-- Background Canvas --> | |
| <canvas id="backgroundCanvas" class="fixed top-0 left-0 w-full h-full -z-10"></canvas> | |
| <div class="container mx-auto px-4 py-8 game-container"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-6xl md:text-8xl font-bold neon-text mb-4">TOSSIE'S ART MAZE</h1> | |
| <p class="text-xl md:text-2xl text-gray-300 mb-8">The walking dead artist hunting for canvas monsters!</p> | |
| <div class="flex justify-center items-center space-x-8 mb-8"> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-green-400" id="score">0</div> | |
| <div class="text-sm text-gray-400">SCORE</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-yellow-400" id="lives">3</div> | |
| <div class="text-sm text-gray-400">LIVES</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-3xl font-bold text-purple-400" id="monsters">0</div> | |
| <div class="text-sm text-gray-400">MONSTERS</div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Game Grid --> | |
| <div class="max-w-4xl mx-auto mb-12"> | |
| <div id="maze" class="grid grid-cols-13 gap-1 mx-auto bg-gray-900 p-4 rounded-lg border-4 border-purple-900 shadow-2xl"></div> | |
| </div> | |
| <!-- Controls --> | |
| <div class="text-center mb-8"> | |
| <div class="flex justify-center space-x-4 mb-6"> | |
| <button onclick="moveTossie('up')" class="bg-purple-800 hover:bg-purple-700 text-white px-6 py-3 rounded-lg transition-all duration-300 transform hover:scale-110"> | |
| <i data-feather="arrow-up"></i> | |
| </button> | |
| </div> | |
| <div class="flex justify-center space-x-4"> | |
| <button onclick="moveTossie('left')" class="bg-purple-800 hover:bg-purple-700 text-white px-6 py-3 rounded-lg transition-all duration-300 transform hover:scale-110"> | |
| <i data-feather="arrow-left"></i> | |
| </button> | |
| <button onclick="moveTossie('down')" class="bg-purple-800 hover:bg-purple-700 text-white px-6 py-3 rounded-lg transition-all duration-300 transform hover:scale-110"> | |
| <i data-feather="arrow-down"></i> | |
| </button> | |
| <button onclick="moveTossie('right')" class="bg-purple-800 hover:bg-purple-700 text-white px-6 py-3 rounded-lg transition-all duration-300 transform hover:scale-110"> | |
| <i data-feather="arrow-right"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Character Gallery --> | |
| <div class="max-w-6xl mx-auto"> | |
| <h2 class="text-4xl font-bold text-center mb-8 neon-text">MONSTER GALLERY</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-6"> | |
| <div class="bg-gray-800 rounded-lg p-4 text-center monster"> | |
| <div class="w-20 h-20 mx-auto mb-2 bg-red-500 rounded-full relative"> | |
| <div class="absolute top-2 left-4 w-3 h-3 bg-white rounded-full"></div> | |
| <div class="absolute top-2 right-4 w-3 h-3 bg-white rounded-full"></div> | |
| </div> | |
| <p class="text-sm">Big-Tit Terror</p> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 text-center monster"> | |
| <div class="w-20 h-20 mx-auto mb-2 bg-green-500 rounded-full relative"> | |
| <div class="absolute top-4 left-3 w-4 h-4 bg-white rounded-full"></div> | |
| <div class="absolute top-4 right-3 w-4 h-4 bg-white rounded-full"></div> | |
| </div> | |
| <p class="text-sm">Ear-Flap Freak</p> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 text-center monster"> | |
| <div class="w-20 h-20 mx-auto mb-2 bg-blue-500 rounded-full relative"> | |
| <div class="absolute top-6 left-5 w-2 h-2 bg-white rounded-full"></div> | |
| <div class="absolute top-6 right-5 w-2 h-2 bg-white rounded-full"></div> | |
| </div> | |
| <p class="text-sm">Slimy Horror</p> | |
| </div> | |
| <div class="bg-gray-800 rounded-lg p-4 text-center monster"> | |
| <div class="w-20 h-20 mx-auto mb-2 bg-yellow-500 rounded-full relative"> | |
| <div class="absolute top-3 left-6 w-3 h-3 bg-white rounded-full"></div> | |
| <div class="absolute top-3 right-6 w-3 h-3 bg-white rounded-full"></div> | |
| </div> | |
| <p class="text-sm">Multi-Eye Menace</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Over Modal --> | |
| <div id="gameOverModal" class="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center hidden z-50"> | |
| <div class="bg-gray-800 p-8 rounded-lg text-center max-w-md mx-4"> | |
| <h2 class="text-4xl font-bold text-red-500 mb-4 neon-text">GAME OVER!</h2> | |
| <p class="text-xl mb-4">Final Score: <span id="finalScore" class="text-green-400">0</span></p> | |
| <p class="text-lg mb-6">Tossie got caught by his own creations!</p> | |
| <button onclick="restartGame()" class="bg-purple-700 hover:bg-purple-600 text-white px-8 py-3 rounded-lg transition-all duration-300"> | |
| Play Again | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // Game state | |
| let gameState = { | |
| score: 0, | |
| lives: 3, | |
| monstersCollected: 0, | |
| tossiePosition: { x: 1, y: 1 }, | |
| monsters: [], | |
| pellets: [], | |
| walls: [] | |
| }; | |
| // Initialize game | |
| function initGame() { | |
| createMaze(); | |
| renderGame(); | |
| setupKeyboardControls(); | |
| startMonsterMovement(); | |
| } | |
| // Create maze layout | |
| function createMaze() { | |
| const maze = document.getElementById('maze'); | |
| maze.innerHTML = ''; | |
| // Simple maze layout (13x13 grid) | |
| const layout = [ | |
| 'WWWWWWWWWWWWW', | |
| 'W.P.P.P.P.P.W', | |
| 'W.W.W.W.W.W.W', | |
| 'W.P.P.P.P.P.W', | |
| 'W.W.W.W.W.W.W', | |
| 'W.P.P.P.P.P.W', | |
| 'W.W.W.W.W.W.W', | |
| 'W.P.P.P.P.P.W', | |
| 'W.W.W.W.W.W.W', | |
| 'W.P.P.P.P.P.W', | |
| 'W.W.W.W.W.W.W', | |
| 'W.P.P.P.P.P.W', | |
| 'WWWWWWWWWWWWW' | |
| ]; | |
| for (let y = 0; y < 13; y++) { | |
| for (let x = 0; x < 13; x++) { | |
| const cell = document.createElement('div'); | |
| cell.className = 'maze-cell w-8 h-8 md:w-12 md:h-12 rounded'; | |
| if (layout[y][x] === 'W') { | |
| cell.className += ' bg-purple-900'; | |
| gameState.walls.push({x, y}); | |
| } else if (layout[y][x] === 'P') { | |
| cell.className += ' bg-yellow-400 glow'; | |
| gameState.pellets.push({x, y}); | |
| } else { | |
| cell.className += ' bg-gray-800'; | |
| } | |
| cell.id = `cell-${x}-${y}`; | |
| maze.appendChild(cell); | |
| } | |
| // Add monsters | |
| gameState.monsters = [ | |
| { x: 11, y: 1, type: 'big-tit' }, | |
| { x: 1, y: 11, type: 'ear-flap' }, | |
| { x: 11, y: 11, type: 'slimy' }, | |
| { x: 6, y: 6, type: 'multi-eye' } | |
| ]; | |
| } | |
| // Render game state | |
| function renderGame() { | |
| // Clear previous positions | |
| document.querySelectorAll('.maze-cell').forEach(cell => { | |
| cell.innerHTML = ''; | |
| }); | |
| // Render pellets | |
| gameState.pellets.forEach(pellet => { | |
| const cell = document.getElementById(`cell-${pellet.x}-${pellet.y}`); | |
| if (cell) { | |
| const pelletEl = document.createElement('div'); | |
| pelletEl.className = 'w-2 h-2 md:w-4 md:h-4 bg-yellow-400 rounded-full mx-auto'; | |
| cell.appendChild(pelletEl); | |
| } | |
| }); | |
| // Render monsters | |
| gameState.monsters.forEach(monster => { | |
| const cell = document.getElementById(`cell-${monster.x}-${monster.y}`); | |
| if (cell) { | |
| const monsterEl = document.createElement('div'); | |
| monsterEl.className = 'w-6 h-6 md:w-8 md:h-8 rounded-full mx-auto monster'; | |
| monsterEl.style.backgroundColor = getMonsterColor(monster.type); | |
| cell.appendChild(monsterEl); | |
| } | |
| }); | |
| // Render Tossie | |
| const tossieCell = document.getElementById(`cell-${gameState.tossiePosition.x}-${gameState.tossiePosition.y}`); | |
| if (tossieCell) { | |
| const tossieEl = document.createElement('div'); | |
| tossieEl.className = 'w-6 h-6 md:w-8 md:h-8 bg-white rounded-full mx-auto tossie relative'; | |
| // Add multiple eyes for Tossie | |
| for (let i = 0; i < 4; i++) { | |
| const eye = document.createElement('div'); | |
| eye.className = 'absolute w-1 h-1 md:w-2 md:h-2 bg-black rounded-full'; | |
| eye.style.left = `${20 + (i % 2) * 40}%`; | |
| eye.style.top = `${20 + Math.floor(i / 2) * 40}%`; | |
| tossieEl.appendChild(eye); | |
| } | |
| tossieCell.appendChild(tossieEl); | |
| } | |
| // Update UI | |
| document.getElementById('score').textContent = gameState.score; | |
| document.getElementById('lives').textContent = gameState.lives; | |
| document.getElementById('monsters').textContent = gameState.monstersCollected; | |
| } | |
| function getMonsterColor(type) { | |
| const colors = { | |
| 'big-tit': '#ef4444', | |
| 'ear-flap': '#22c55e', | |
| 'slimy': '#3b82f6', | |
| 'multi-eye': '#eab308' | |
| }; | |
| return colors[type] || '#6b7280'; | |
| } | |
| function moveTossie(direction) { | |
| const newPos = { ...gameState.tossiePosition }; | |
| switch(direction) { | |
| case 'up': newPos.y--; break; | |
| case 'down': newPos.y++; break; | |
| case 'left': newPos.x--; break; | |
| case 'right': newPos.x++; break; | |
| } | |
| // Check wall collision | |
| if (gameState.walls.some(wall => wall.x === newPos.x && wall.y === newPos.y)) { | |
| return; | |
| } | |
| gameState.tossiePosition = newPos; | |
| // Check pellet collection | |
| const pelletIndex = gameState.pellets.findIndex(p => p.x === newPos.x && p.y === newPos.y); | |
| if (pelletIndex !== -1) { | |
| gameState.pellets.splice(pelletIndex, 1); | |
| gameState.score += 10; | |
| // Add visual feedback | |
| const cell = document.getElementById(`cell-${newPos.x}-${newPos.y}`); | |
| cell.classList.add('animate-pulse'); | |
| setTimeout(() => cell.classList.remove('animate-pulse'), 300); | |
| } | |
| // Check monster collision | |
| const monsterIndex = gameState.monsters.findIndex(m => m.x === newPos.x && m.y === newPos.y); | |
| if (monsterIndex !== -1) { | |
| gameState.monsters.splice(monsterIndex, 1); | |
| gameState.monstersCollected++; | |
| gameState.score += 100; | |
| // Add celebration effect | |
| celebrateMonsterCapture(); | |
| } | |
| renderGame(); | |
| checkWinCondition(); | |
| } | |
| function celebrateMonsterCapture() { | |
| // Add particle effect or animation | |
| document.body.classList.add('bg-green-900'); | |
| setTimeout(() => document.body.classList.remove('bg-green-900'), 200); | |
| } | |
| function startMonsterMovement() { | |
| setInterval(() => { | |
| gameState.monsters.forEach(monster => { | |
| const directions = ['up', 'down', 'left', 'right']; | |
| const randomDir = directions[Math.floor(Math.random() * directions.length)]; | |
| const newPos = { ...monster }; | |
| switch(randomDir) { | |
| case 'up': newPos.y--; break; | |
| case 'down': newPos.y++; break; | |
| case 'left': newPos.x--; break; | |
| case 'right': newPos.x++; break; | |
| } | |
| // Validate movement | |
| if (!gameState.walls.some(wall => wall.x === newPos.x && wall.y === newPos.y)) { | |
| monster.x = newPos.x; | |
| monster.y = newPos.y; | |
| } | |
| }); | |
| renderGame(); | |
| checkCollision(); | |
| }, 1000); | |
| } | |
| function checkCollision() { | |
| gameState.monsters.forEach(monster => { | |
| if (monster.x === gameState.tossiePosition.x && monster.y === gameState.tossiePosition.y) { | |
| gameState.lives--; | |
| if (gameState.lives <= 0) { | |
| gameOver(); | |
| } else { | |
| // Reset Tossie position | |
| gameState.tossiePosition = { x: 1, y: 1 }; | |
| renderGame(); | |
| } | |
| }); | |
| } | |
| function checkWinCondition() { | |
| if (gameState.monsters.length === 0 && gameState.pellets.length === 0) { | |
| setTimeout(() => { | |
| alert('Congratulations! Tossie painted all the monsters!'); | |
| restartGame(); | |
| }, 500); | |
| } | |
| } | |
| function gameOver() { | |
| document.getElementById('finalScore').textContent = gameState.score; | |
| document.getElementById('gameOverModal').classList.remove('hidden'); | |
| } | |
| function restartGame() { | |
| document.getElementById('gameOverModal').classList.add('hidden'); | |
| gameState = { | |
| score: 0, | |
| lives: 3, | |
| monstersCollected: 0, | |
| tossiePosition: { x: 1, y: 1 }, | |
| monsters: [ | |
| { x: 11, y: 1, type: 'big-tit' }, | |
| { x: 1, y: 11, type: 'ear-flap' }, | |
| { x: 11, y: 11, type: 'slimy' }, | |
| { x: 6, y: 6, type: 'multi-eye' } | |
| ], | |
| pellets: [], | |
| walls: [] | |
| }; | |
| initGame(); | |
| } | |
| function setupKeyboardControls() { | |
| document.addEventListener('keydown', (e) => { | |
| switch(e.key) { | |
| case 'ArrowUp': moveTossie('up'); break; | |
| case 'ArrowDown': moveTossie('down'); break; | |
| case 'ArrowLeft': moveTossie('left'); break; | |
| case 'ArrowRight': moveTossie('right'); break; | |
| } | |
| }); | |
| } | |
| // Animated background | |
| function initBackground() { | |
| const canvas = document.getElementById('backgroundCanvas'); | |
| const ctx = canvas.getContext('2d'); | |
| function resizeCanvas() { | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| } | |
| resizeCanvas(); | |
| window.addEventListener('resize', resizeCanvas); | |
| // Simple particle system | |
| const particles = []; | |
| for (let i = 0; i < 50; i++) { | |
| particles.push({ | |
| x: Math.random() * canvas.width, | |
| y: Math.random() * canvas.height, | |
| size: Math.random() * 2 + 1, | |
| speedX: (Math.random() - 0.5) * 0.5, | |
| speedY: (Math.random() - 0.5) * 0.5, | |
| color: `rgba(${Math.random() * 100 + 155}, ${Math.random() * 100}, ${Math.random() * 100 + 155}, 0.5)` | |
| }); | |
| } | |
| function animate() { | |
| ctx.fillStyle = 'rgba(26, 26, 46, 0.1)'; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| particles.forEach(particle => { | |
| ctx.beginPath(); | |
| ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2); | |
| ctx.fillStyle = particle.color; | |
| ctx.fill(); | |
| particle.x += particle.speedX; | |
| particle.y += particle.speedY; | |
| if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1; | |
| if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1; | |
| }); | |
| requestAnimationFrame(animate); | |
| } | |
| animate(); | |
| } | |
| // Initialize everything when page loads | |
| document.addEventListener('DOMContentLoaded', () => { | |
| initBackground(); | |
| initGame(); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |