Spaces:

Xie
/

deepsite-arkanoid

Running

File size: 26,404 Bytes

c917b9c

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Castlevania Arkanoid</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@400;700;900&family=MedievalSharp&display=swap');
        
        body {
            font-family: 'Cinzel Decorative', cursive;
            background-color: #000;
            overflow: hidden;
            touch-action: none;
            user-select: none;
        }
        
        #gameCanvas {
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400"><rect width="400" height="400" fill="%23000"/><path d="M0,0 L400,400 M400,0 L0,400" stroke="%231a0a0a" stroke-width="1"/></svg>');
            box-shadow: 0 0 30px rgba(186, 0, 0, 0.5);
            border: 8px solid #3a1a1a;
            border-image: linear-gradient(45deg, #3a1a1a, #5a2a2a, #3a1a1a) 1;
        }
        
        .gothic-text {
            font-family: 'MedievalSharp', cursive;
            text-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
        }
        
        .blood-red {
            background: linear-gradient(135deg, #5a0000, #3a0000);
        }
        
        .vampire-button {
            background: linear-gradient(135deg, #5a0000, #3a0000);
            border: 2px solid #8a0000;
            box-shadow: 0 0 15px rgba(186, 0, 0, 0.7);
            transition: all 0.3s;
        }
        
        .vampire-button:hover {
            background: linear-gradient(135deg, #7a0000, #5a0000);
            box-shadow: 0 0 25px rgba(255, 0, 0, 0.9);
            transform: translateY(-2px);
        }
        
        .candle-flicker {
            animation: flicker 3s infinite alternate;
        }
        
        @keyframes flicker {
            0%, 100% { opacity: 0.8; }
            25% { opacity: 1; }
            50% { opacity: 0.7; }
            75% { opacity: 0.9; }
        }
        
        .gothic-border {
            border: 4px solid transparent;
            border-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M0,0 L12,0 L12,12 L0,12 Z" fill="none" stroke="%238a0000" stroke-width="2" stroke-dasharray="4,2"/></svg>') 1;
        }
        
        .skull-icon {
            filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.7));
        }
    </style>
</head>
<body class="flex flex-col items-center justify-center min-h-screen bg-black text-red-600">
    <div class="absolute top-0 left-0 w-full h-full opacity-20 pointer-events-none" style="background: url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" viewBox=\"0 0 100 100\"><path d=\"M20,20 L80,20 L80,80 L20,80 Z M30,30 L70,30 L70,70 L30,70 Z\" fill=\"none\" stroke=\"%238a0000\" stroke-width=\"1\"/></svg>');"></div>

    <h1 class="text-5xl md:text-6xl font-bold mb-4 gothic-text candle-flicker">
        <i class="fas fa-skull skull-icon mr-2"></i> CASTLEVANIA ARKANOID
    </h1>
    
    <div class="relative mb-8">
        <canvas id="gameCanvas" width="800" height="600" class="rounded-lg"></canvas>
        
        <div id="startScreen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-80 rounded-lg">
            <div class="text-center p-8 gothic-border bg-black bg-opacity-90 max-w-md">
                <h2 class="text-3xl font-bold mb-6 gothic-text candle-flicker">THE NIGHT WALKER'S CHALLENGE</h2>
                <p class="mb-6 text-gray-300">Break the cursed bricks before the night creatures overwhelm you!</p>
                <button id="startButton" class="px-8 py-3 rounded-lg text-xl font-bold gothic-text vampire-button">
                    <i class="fas fa-play mr-2"></i> BEGIN THE HUNT
                </button>
            </div>
        </div>
        
        <div id="gameOverScreen" class="absolute inset-0 hidden flex-col items-center justify-center bg-black bg-opacity-80 rounded-lg">
            <div class="text-center p-8 gothic-border bg-black bg-opacity-90 max-w-md">
                <h2 class="text-4xl font-bold mb-6 gothic-text text-red-500">YOU HAVE DIED</h2>
                <p id="finalScore" class="text-2xl mb-6">Score: 0</p>
                <button id="restartButton" class="px-8 py-3 rounded-lg text-xl font-bold gothic-text vampire-button">
                    <i class="fas fa-redo mr-2"></i> TRY AGAIN
                </button>
            </div>
        </div>
    </div>
    
    <div class="flex justify-between w-full max-w-2xl px-4 mb-8">
        <div class="bg-black bg-opacity-70 px-6 py-3 rounded-lg gothic-border">
            <h3 class="text-xl gothic-text mb-1">SCORE</h3>
            <p id="scoreDisplay" class="text-3xl font-bold">0</p>
        </div>
        <div class="bg-black bg-opacity-70 px-6 py-3 rounded-lg gothic-border">
            <h3 class="text-xl gothic-text mb-1">LIVES</h3>
            <p id="livesDisplay" class="text-3xl font-bold">3</p>
        </div>
        <div class="bg-black bg-opacity-70 px-6 py-3 rounded-lg gothic-border">
            <h3 class="text-xl gothic-text mb-1">LEVEL</h3>
            <p id="levelDisplay" class="text-3xl font-bold">1</p>
        </div>
    </div>
    
    <div class="absolute bottom-4 right-4 text-xs text-gray-600">
        <p>Beware the creatures of the night...</p>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const canvas = document.getElementById('gameCanvas');
            const ctx = canvas.getContext('2d');
            const startScreen = document.getElementById('startScreen');
            const gameOverScreen = document.getElementById('gameOverScreen');
            const startButton = document.getElementById('startButton');
            const restartButton = document.getElementById('restartButton');
            const scoreDisplay = document.getElementById('scoreDisplay');
            const livesDisplay = document.getElementById('livesDisplay');
            const levelDisplay = document.getElementById('levelDisplay');
            const finalScore = document.getElementById('finalScore');
            
            // Game variables
            let gameRunning = false;
            let score = 0;
            let lives = 3;
            let level = 1;
            let bricks = [];
            let brickRowCount = 5;
            let brickColumnCount = 10;
            let brickWidth = 75;
            let brickHeight = 20;
            let brickPadding = 10;
            let brickOffsetTop = 60;
            let brickOffsetLeft = 30;
            
            // Ball variables
            let ballRadius = 10;
            let x = canvas.width / 2;
            let y = canvas.height - 30;
            let dx = 4;
            let dy = -4;
            
            // Paddle variables
            let paddleHeight = 15;
            let paddleWidth = 100;
            let paddleX = (canvas.width - paddleWidth) / 2;
            let rightPressed = false;
            let leftPressed = false;
            
            // Special effects
            let particles = [];
            let lastTime = 0;
            
            // Initialize bricks
            function initBricks() {
                bricks = [];
                for (let c = 0; c < brickColumnCount; c++) {
                    bricks[c] = [];
                    for (let r = 0; r < brickRowCount; r++) {
                        const brickX = c * (brickWidth + brickPadding) + brickOffsetLeft;
                        const brickY = r * (brickHeight + brickPadding) + brickOffsetTop;
                        const brickHealth = Math.floor(Math.random() * 3) + 1; // 1-3 hits to break
                        
                        // Different colors based on health
                        let brickColor;
                        if (brickHealth === 1) brickColor = '#5a0000'; // Dark red
                        else if (brickHealth === 2) brickColor = '#8a0000'; // Medium red
                        else brickColor = '#ba0000'; // Bright red
                        
                        bricks[c][r] = { x: brickX, y: brickY, health: brickHealth, color: brickColor, visible: true };
                    }
                }
            }
            
            // Draw bricks
            function drawBricks() {
                for (let c = 0; c < brickColumnCount; c++) {
                    for (let r = 0; r < brickRowCount; r++) {
                        if (bricks[c][r].visible) {
                            const brick = bricks[c][r];
                            
                            // Draw brick with gothic style
                            ctx.beginPath();
                            ctx.rect(brick.x, brick.y, brickWidth, brickHeight);
                            ctx.fillStyle = brick.color;
                            ctx.fill();
                            ctx.lineWidth = 2;
                            ctx.strokeStyle = '#3a0000';
                            ctx.stroke();
                            
                            // Add gothic cross pattern
                            ctx.beginPath();
                            ctx.moveTo(brick.x + 5, brick.y + 5);
                            ctx.lineTo(brick.x + brickWidth - 5, brick.y + brickHeight - 5);
                            ctx.moveTo(brick.x + brickWidth - 5, brick.y + 5);
                            ctx.lineTo(brick.x + 5, brick.y + brickHeight - 5);
                            ctx.strokeStyle = 'rgba(255, 255, 255, 0.1)';
                            ctx.stroke();
                            
                            // Add health indicator (skull icons)
                            if (brick.health > 1) {
                                const skulls = brick.health;
                                const spacing = brickWidth / (skulls + 1);
                                for (let i = 1; i <= skulls; i++) {
                                    const skullX = brick.x + (spacing * i) - 4;
                                    const skullY = brick.y + brickHeight / 2 - 4;
                                    
                                    ctx.beginPath();
                                    ctx.arc(skullX + 4, skullY + 4, 3, 0, Math.PI * 2);
                                    ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
                                    ctx.fill();
                                    
                                    ctx.beginPath();
                                    ctx.arc(skullX + 4, skullY + 4, 5, 0, Math.PI, false);
                                    ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
                                    ctx.stroke();
                                }
                            }
                        }
                    }
                }
            }
            
            // Draw ball
            function drawBall() {
                ctx.beginPath();
                ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
                
                // Create a glowing red ball effect
                const gradient = ctx.createRadialGradient(
                    x, y, ballRadius / 2,
                    x, y, ballRadius
                );
                gradient.addColorStop(0, '#ff0000');
                gradient.addColorStop(1, '#8a0000');
                
                ctx.fillStyle = gradient;
                ctx.fill();
                
                // Add inner glow
                ctx.beginPath();
                ctx.arc(x, y, ballRadius / 2, 0, Math.PI * 2);
                ctx.fillStyle = 'rgba(255, 150, 150, 0.5)';
                ctx.fill();
                
                // Add outer glow
                ctx.beginPath();
                ctx.arc(x, y, ballRadius + 3, 0, Math.PI * 2);
                const glowGradient = ctx.createRadialGradient(
                    x, y, ballRadius,
                    x, y, ballRadius + 3
                );
                glowGradient.addColorStop(0, 'rgba(255, 0, 0, 0.7)');
                glowGradient.addColorStop(1, 'rgba(255, 0, 0, 0)');
                ctx.fillStyle = glowGradient;
                ctx.fill();
            }
            
            // Draw paddle
            function drawPaddle() {
                // Main paddle
                ctx.beginPath();
                ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
                
                // Gradient for paddle
                const gradient = ctx.createLinearGradient(
                    paddleX, canvas.height - paddleHeight,
                    paddleX, canvas.height
                );
                gradient.addColorStop(0, '#3a1a1a');
                gradient.addColorStop(1, '#5a2a2a');
                
                ctx.fillStyle = gradient;
                ctx.fill();
                ctx.strokeStyle = '#8a0000';
                ctx.lineWidth = 2;
                ctx.stroke();
                
                // Add gothic details
                const segmentWidth = paddleWidth / 5;
                for (let i = 1; i < 5; i++) {
                    ctx.beginPath();
                    ctx.moveTo(paddleX + (segmentWidth * i), canvas.height - paddleHeight);
                    ctx.lineTo(paddleX + (segmentWidth * i), canvas.height);
                    ctx.strokeStyle = 'rgba(186, 0, 0, 0.5)';
                    ctx.stroke();
                }
                
                // Add spikes at the ends
                ctx.beginPath();
                ctx.moveTo(paddleX, canvas.height - paddleHeight);
                ctx.lineTo(paddleX - 5, canvas.height - paddleHeight - 10);
                ctx.lineTo(paddleX + 5, canvas.height - paddleHeight - 10);
                ctx.closePath();
                ctx.fillStyle = '#8a0000';
                ctx.fill();
                
                ctx.beginPath();
                ctx.moveTo(paddleX + paddleWidth, canvas.height - paddleHeight);
                ctx.lineTo(paddleX + paddleWidth + 5, canvas.height - paddleHeight - 10);
                ctx.lineTo(paddleX + paddleWidth - 5, canvas.height - paddleHeight - 10);
                ctx.closePath();
                ctx.fillStyle = '#8a0000';
                ctx.fill();
            }
            
            // Draw particles
            function drawParticles() {
                for (let i = 0; i < particles.length; i++) {
                    const p = particles[i];
                    
                    ctx.beginPath();
                    ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
                    
                    const alpha = p.lifetime / 100;
                    ctx.fillStyle = `rgba(255, ${Math.floor(100 + Math.random() * 155)}, 0, ${alpha})`;
                    ctx.fill();
                    
                    p.x += p.vx;
                    p.y += p.vy;
                    p.lifetime--;
                    
                    if (p.lifetime <= 0) {
                        particles.splice(i, 1);
                        i--;
                    }
                }
            }
            
            // Create particles
            function createParticles(x, y, count) {
                for (let i = 0; i < count; i++) {
                    particles.push({
                        x: x,
                        y: y,
                        radius: Math.random() * 3 + 1,
                        vx: (Math.random() - 0.5) * 5,
                        vy: (Math.random() - 0.5) * 5,
                        lifetime: Math.floor(Math.random() * 30) + 20
                    });
                }
            }
            
            // Collision detection
            function collisionDetection() {
                for (let c = 0; c < brickColumnCount; c++) {
                    for (let r = 0; r < brickRowCount; r++) {
                        const brick = bricks[c][r];
                        if (brick.visible) {
                            if (
                                x > brick.x &&
                                x < brick.x + brickWidth &&
                                y > brick.y &&
                                y < brick.y + brickHeight
                            ) {
                                dy = -dy;
                                brick.health--;
                                
                                // Create particles on hit
                                createParticles(
                                    brick.x + brickWidth / 2,
                                    brick.y + brickHeight / 2,
                                    10
                                );
                                
                                if (brick.health <= 0) {
                                    brick.visible = false;
                                    score += 10 * level;
                                    scoreDisplay.textContent = score;
                                    
                                    // Check if all bricks are cleared
                                    if (checkLevelComplete()) {
                                        levelUp();
                                    }
                                }
                            }
                        }
                    }
                }
            }
            
            // Check if level is complete
            function checkLevelComplete() {
                for (let c = 0; c < brickColumnCount; c++) {
                    for (let r = 0; r < brickRowCount; r++) {
                        if (bricks[c][r].visible) {
                            return false;
                        }
                    }
                }
                return true;
            }
            
            // Level up
            function levelUp() {
                level++;
                levelDisplay.textContent = level;
                
                // Increase difficulty
                brickRowCount = Math.min(8, brickRowCount + 1);
                dx *= 1.1;
                dy *= 1.1;
                
                // Reset ball position
                x = canvas.width / 2;
                y = canvas.height - 30;
                
                // Create new bricks
                initBricks();
                
                // Show level up message
                const levelUpDiv = document.createElement('div');
                levelUpDiv.className = 'absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-4xl font-bold gothic-text text-red-500 bg-black bg-opacity-80 px-8 py-4 rounded-lg';
                levelUpDiv.textContent = `LEVEL ${level}`;
                document.body.appendChild(levelUpDiv);
                
                setTimeout(() => {
                    levelUpDiv.style.opacity = '0';
                    setTimeout(() => {
                        document.body.removeChild(levelUpDiv);
                    }, 500);
                }, 1500);
            }
            
            // Game over
            function gameOver() {
                gameRunning = false;
                finalScore.textContent = `Score: ${score}`;
                gameOverScreen.classList.remove('hidden');
                gameOverScreen.classList.add('flex');
            }
            
            // Reset game
            function resetGame() {
                score = 0;
                lives = 3;
                level = 1;
                scoreDisplay.textContent = score;
                livesDisplay.textContent = lives;
                levelDisplay.textContent = level;
                
                x = canvas.width / 2;
                y = canvas.height - 30;
                dx = 4;
                dy = -4;
                paddleX = (canvas.width - paddleWidth) / 2;
                
                brickRowCount = 5;
                initBricks();
                
                gameOverScreen.classList.add('hidden');
                gameOverScreen.classList.remove('flex');
            }
            
            // Main draw function
            function draw() {
                if (!gameRunning) return;
                
                // Clear canvas with dark translucent overlay for motion blur effect
                ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                
                // Draw game elements
                drawBricks();
                drawBall();
                drawPaddle();
                drawParticles();
                
                // Collision detection
                collisionDetection();
                
                // Wall collision
                if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
                    dx = -dx;
                    createParticles(x, y, 5);
                }
                
                if (y + dy < ballRadius) {
                    dy = -dy;
                    createParticles(x, y, 5);
                } else if (y + dy > canvas.height - ballRadius) {
                    // Paddle collision
                    if (x > paddleX && x < paddleX + paddleWidth) {
                        // Calculate angle based on where ball hits paddle
                        const hitPosition = (x - paddleX) / paddleWidth;
                        const angle = (hitPosition - 0.5) * Math.PI / 3; // -30 to 30 degrees
                        
                        // Calculate new direction
                        const speed = Math.sqrt(dx * dx + dy * dy) * 1.05; // Slightly increase speed
                        dy = -Math.abs(Math.cos(angle) * speed);
                        dx = Math.sin(angle) * speed;
                        
                        createParticles(x, y, 10);
                    } else {
                        // Ball missed paddle
                        lives--;
                        livesDisplay.textContent = lives;
                        
                        if (lives <= 0) {
                            gameOver();
                        } else {
                            // Reset ball position
                            x = canvas.width / 2;
                            y = canvas.height - 30;
                            dx = 4;
                            dy = -4;
                            paddleX = (canvas.width - paddleWidth) / 2;
                        }
                    }
                }
                
                // Paddle movement
                if (rightPressed && paddleX < canvas.width - paddleWidth) {
                    paddleX += 7;
                } else if (leftPressed && paddleX > 0) {
                    paddleX -= 7;
                }
                
                // Move ball
                x += dx;
                y += dy;
                
                requestAnimationFrame(draw);
            }
            
            // Event listeners
            document.addEventListener('keydown', keyDownHandler);
            document.addEventListener('keyup', keyUpHandler);
            canvas.addEventListener('mousemove', mouseMoveHandler);
            canvas.addEventListener('touchmove', touchMoveHandler, { passive: false });
            
            function keyDownHandler(e) {
                if (e.key === 'Right' || e.key === 'ArrowRight') {
                    rightPressed = true;
                } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
                    leftPressed = true;
                }
            }
            
            function keyUpHandler(e) {
                if (e.key === 'Right' || e.key === 'ArrowRight') {
                    rightPressed = false;
                } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
                    leftPressed = false;
                }
            }
            
            function mouseMoveHandler(e) {
                const relativeX = e.clientX - canvas.offsetLeft;
                if (relativeX > 0 && relativeX < canvas.width) {
                    paddleX = relativeX - paddleWidth / 2;
                }
            }
            
            function touchMoveHandler(e) {
                e.preventDefault();
                const touch = e.touches[0];
                const relativeX = touch.clientX - canvas.offsetLeft;
                if (relativeX > 0 && relativeX < canvas.width) {
                    paddleX = relativeX - paddleWidth / 2;
                }
            }
            
            // Button event listeners
            startButton.addEventListener('click', () => {
                startScreen.classList.add('hidden');
                gameRunning = true;
                resetGame();
                draw();
            });
            
            restartButton.addEventListener('click', () => {
                resetGame();
                gameRunning = true;
                draw();
            });
            
            // Initialize game
            initBricks();
            
            // Add ambient candle flicker effect
            setInterval(() => {
                const flickerElements = document.querySelectorAll('.candle-flicker');
                flickerElements.forEach(el => {
                    el.style.opacity = 0.7 + Math.random() * 0.3;
                });
            }, 100);
        });
    </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=Xie/deepsite-arkanoid" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>