Grid - Untitled

Andrew

@andronov04

Grid - Untitled

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Auto Pinball</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }

    body {
        background: #0a0a0a;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'Arial Black', sans-serif;
        overflow: hidden;
    }

    .game-container {
        position: relative;
        width: 90vmin;
        height: 85vmin;
        max-width: 600px;
        max-height: 800px;
        transition: transform 0.05s;
    }

    .pinball-table {
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
        border: 8px solid #2d2d44;
        border-radius: 20px 20px 50px 50px;
        position: relative;
        overflow: hidden;
        box-shadow: 
            0 0 50px rgba(0, 100, 255, 0.3),
            inset 0 0 100px rgba(0, 0, 0, 0.5);
    }

    .table-surface {
        position: absolute;
        width: 100%;
        height: 100%;
        background: 
            radial-gradient(ellipse at 50% 20%, rgba(100, 100, 255, 0.1) 0%, transparent 50%),
            linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    }

    .ball {
        position: absolute;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, #ffffff 0%, #c0c0c0 30%, #808080 60%, #404040 100%);
        box-shadow: 
            2px 4px 8px rgba(0, 0, 0, 0.6),
            inset -2px -2px 4px rgba(0, 0, 0, 0.3),
            inset 2px 2px 4px rgba(255, 255, 255, 0.8);
        z-index: 100;
        display: none;
    }

    .ball-shadow {
        position: absolute;
        width: 20px;
        height: 10px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.4);
        filter: blur(3px);
        z-index: 5;
        display: none;
    }

    .bumper {
        position: absolute;
        border-radius: 50%;
        transition: transform 0.1s, box-shadow 0.1s;
    }

    .bumper.hit {
        transform: scale(1.2);
    }

    .bumper-1 {
        width: 50px;
        height: 50px;
        left: 20%;
        top: 15%;
        background: radial-gradient(circle at 30% 30%, #ff6b6b, #c0392b);
        box-shadow: 0 4px 15px rgba(255, 107, 107, 0.5);
    }

    .bumper-1.hit {
        background: radial-gradient(circle at 30% 30%, #fff, #ff6b6b);
        box-shadow: 0 0 30px #ff6b6b, 0 0 60px #ff6b6b;
    }

    .bumper-2 {
        width: 50px;
        height: 50px;
        right: 20%;
        top: 15%;
        background: radial-gradient(circle at 30% 30%, #4ecdc4, #1abc9c);
        box-shadow: 0 4px 15px rgba(78, 205, 196, 0.5);
    }

    .bumper-2.hit {
        background: radial-gradient(circle at 30% 30%, #fff, #4ecdc4);
        box-shadow: 0 0 30px #4ecdc4, 0 0 60px #4ecdc4;
    }

    .bumper-3 {
        width: 60px;
        height: 60px;
        left: 50%;
        top: 25%;
        transform: translateX(-50%);
        background: radial-gradient(circle at 30% 30%, #f39c12, #e67e22);
        box-shadow: 0 4px 15px rgba(243, 156, 18, 0.5);
    }

    .bumper-3.hit {
        background: radial-gradient(circle at 30% 30%, #fff, #f39c12);
        box-shadow: 0 0 30px #f39c12, 0 0 60px #f39c12;
    }

    .flipper {
        position: absolute;
        bottom: 12%;
        width: 70px;
        height: 16px;
        background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
        border-radius: 8px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
        transition: transform 0.08s ease-out;
    }

    .flipper-left {
        left: 15%;
        transform-origin: left center;
        transform: rotate(25deg);
    }

    .flipper-left.active {
        transform: rotate(-25deg);
    }

    .flipper-right {
        right: 15%;
        transform-origin: right center;
        transform: rotate(-25deg);
    }

    .flipper-right.active {
        transform: rotate(25deg);
    }

    .slingshot {
        position: absolute;
        bottom: 20%;
        width: 40px;
        height: 80px;
        background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
        clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    }

    .slingshot-left {
        left: 8%;
        transform: rotate(-15deg);
    }

    .slingshot-right {
        right: 8%;
        transform: rotate(15deg);
    }

    .target {
        position: absolute;
        width: 30px;
        height: 12px;
        background: linear-gradient(180deg, #3498db, #2980b9);
        border-radius: 3px;
        box-shadow: 0 2px 8px rgba(52, 152, 219, 0.5);
    }

    .target.hit {
        background: linear-gradient(180deg, #fff, #3498db);
        box-shadow: 0 0 20px #3498db;
    }

    .target-1 { left: 10%; top: 40%; transform: rotate(-20deg); }
    .target-2 { left: 25%; top: 35%; }
    .target-3 { right: 25%; top: 35%; }
    .target-4 { right: 10%; top: 40%; transform: rotate(20deg); }

    .rail {
        position: absolute;
        background: linear-gradient(90deg, #34495e, #2c3e50, #34495e);
        border-radius: 5px;
    }

    .rail-left {
        left: 5%;
        top: 45%;
        width: 8px;
        height: 35%;
        transform: rotate(-5deg);
    }

    .rail-right {
        right: 5%;
        top: 45%;
        width: 8px;
        height: 35%;
        transform: rotate(5deg);
    }

    .launcher {
        position: absolute;
        right: 2%;
        bottom: 5%;
        width: 20px;
        height: 100px;
        background: linear-gradient(90deg, #7f8c8d, #95a5a6, #7f8c8d);
        border-radius: 5px;
    }

    .drain {
        position: absolute;
        bottom: 0;
        left: 25%;
        width: 50%;
        height: 20px;
        background: #000;
    }

    .score-display {
        position: absolute;
        top: 3%;
        left: 50%;
        transform: translateX(-50%);
        color: #00ff88;
        font-size: clamp(20px, 4vmin, 36px);
        text-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88;
        z-index: 200;
    }

    .balls-display {
        position: absolute;
        top: 3%;
        left: 5%;
        color: #ff6b6b;
        font-size: clamp(14px, 2.5vmin, 24px);
        text-shadow: 0 0 10px #ff6b6b;
        z-index: 200;
    }

    .game-over {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #ff0000;
        font-size: clamp(30px, 8vmin, 60px);
        text-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000;
        opacity: 0;
        z-index: 300;
        transition: opacity 1s;
        text-align: center;
    }

    .game-over.show {
        opacity: 1;
    }

    .obstacle {
        position: absolute;
        background: linear-gradient(135deg, #2c3e50, #1a252f);
        border-radius: 5px;
    }

    .obstacle-1 {
        left: 35%;
        top: 45%;
        width: 60px;
        height: 15px;
        transform: rotate(-30deg);
    }

    .obstacle-2 {
        right: 35%;
        top: 45%;
        width: 60px;
        height: 15px;
        transform: rotate(30deg);
    }

    .light {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #333;
        box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
    }

    .light.on {
        background: #ffff00;
        box-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00;
    }

    .lights-row {
        position: absolute;
        top: 8%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 15px;
    }
</style>

    body {
        background: #0a0a0a;
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'Arial Black', sans-serif;
        overflow: hidden;
    }

    .game-container {
        position: relative;
        width: 90vmin;
        height: 85vmin;
        max-width: 600px;
        max-height: 800px;
        transition: transform 0.05s;
    }

    .pinball-table {
        width: 100%;
        height: 100%;
        background: linear-gradient(180deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%);
        border: 8px solid #2d2d44;
        border-radius: 20px 20px 50px 50px;
        position: relative;
        overflow: hidden;
        box-shadow: 
            0 0 50px rgba(0, 100, 255, 0.3),
            inset 0 0 100px rgba(0, 0, 0, 0.5);
    }

    .table-surface {
        position: absolute;
        width: 100%;
        height: 100%;
        background: 
            radial-gradient(ellipse at 50% 20%, rgba(100, 100, 255, 0.1) 0%, transparent 50%),
            linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    }

    .ball {
        position: absolute;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, #ffffff 0%, #c0c0c0 30%, #808080 60%, #404040 100%);
        box-shadow: 
            2px 4px 8px rgba(0, 0, 0, 0.6),
            inset -2px -2px 4px rgba(0, 0, 0, 0.3),
            inset 2px 2px 4px rgba(255, 255, 255, 0.8);
        z-index: 100;
        display: none;
    }

    .ball-shadow {
        position: absolute;
        width: 20px;
        height: 10px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.4);
        filter: blur(3px);
        z-index: 5;
        display: none;
    }

    .bumper {
        position: absolute;
        border-radius: 50%;
        transition: transform 0.1s, box-shadow 0.1s;
    }

    .bumper.hit {
        transform: scale(1.2);
    }

    .bumper-1 {
        width: 50px;
        height: 50px;
        left: 20%;
        top: 15%;
        background: radial-gradient(circle at 30% 30%, #ff6b6b, #c0392b);
        box-shadow: 0 4px 15px rgba(255, 107, 107, 0.5);
    }

    .bumper-1.hit {
        background: radial-gradient(circle at 30% 30%, #fff, #ff6b6b);
        box-shadow: 0 0 30px #ff6b6b, 0 0 60px #ff6b6b;
    }

    .bumper-2 {
        width: 50px;
        height: 50px;
        right: 20%;
        top: 15%;
        background: radial-gradient(circle at 30% 30%, #4ecdc4, #1abc9c);
        box-shadow: 0 4px 15px rgba(78, 205, 196, 0.5);
    }

    .bumper-2.hit {
        background: radial-gradient(circle at 30% 30%, #fff, #4ecdc4);
        box-shadow: 0 0 30px #4ecdc4, 0 0 60px #4ecdc4;
    }

    .bumper-3 {
        width: 60px;
        height: 60px;
        left: 50%;
        top: 25%;
        transform: translateX(-50%);
        background: radial-gradient(circle at 30% 30%, #f39c12, #e67e22);
        box-shadow: 0 4px 15px rgba(243, 156, 18, 0.5);
    }

    .bumper-3.hit {
        background: radial-gradient(circle at 30% 30%, #fff, #f39c12);
        box-shadow: 0 0 30px #f39c12, 0 0 60px #f39c12;
    }

    .flipper {
        position: absolute;
        bottom: 12%;
        width: 70px;
        height: 16px;
        background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
        border-radius: 8px;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5);
        transition: transform 0.08s ease-out;
    }

    .flipper-left {
        left: 15%;
        transform-origin: left center;
        transform: rotate(25deg);
    }

    .flipper-left.active {
        transform: rotate(-25deg);
    }

    .flipper-right {
        right: 15%;
        transform-origin: right center;
        transform: rotate(-25deg);
    }

    .flipper-right.active {
        transform: rotate(25deg);
    }

    .slingshot {
        position: absolute;
        bottom: 20%;
        width: 40px;
        height: 80px;
        background: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
        clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
    }

    .slingshot-left {
        left: 8%;
        transform: rotate(-15deg);
    }

    .slingshot-right {
        right: 8%;
        transform: rotate(15deg);
    }

    .target {
        position: absolute;
        width: 30px;
        height: 12px;
        background: linear-gradient(180deg, #3498db, #2980b9);
        border-radius: 3px;
        box-shadow: 0 2px 8px rgba(52, 152, 219, 0.5);
    }

    .target.hit {
        background: linear-gradient(180deg, #fff, #3498db);
        box-shadow: 0 0 20px #3498db;
    }

    .target-1 { left: 10%; top: 40%; transform: rotate(-20deg); }
    .target-2 { left: 25%; top: 35%; }
    .target-3 { right: 25%; top: 35%; }
    .target-4 { right: 10%; top: 40%; transform: rotate(20deg); }

    .rail {
        position: absolute;
        background: linear-gradient(90deg, #34495e, #2c3e50, #34495e);
        border-radius: 5px;
    }

    .rail-left {
        left: 5%;
        top: 45%;
        width: 8px;
        height: 35%;
        transform: rotate(-5deg);
    }

    .rail-right {
        right: 5%;
        top: 45%;
        width: 8px;
        height: 35%;
        transform: rotate(5deg);
    }

    .launcher {
        position: absolute;
        right: 2%;
        bottom: 5%;
        width: 20px;
        height: 100px;
        background: linear-gradient(90deg, #7f8c8d, #95a5a6, #7f8c8d);
        border-radius: 5px;
    }

    .drain {
        position: absolute;
        bottom: 0;
        left: 25%;
        width: 50%;
        height: 20px;
        background: #000;
    }

    .score-display {
        position: absolute;
        top: 3%;
        left: 50%;
        transform: translateX(-50%);
        color: #00ff88;
        font-size: clamp(20px, 4vmin, 36px);
        text-shadow: 0 0 10px #00ff88, 0 0 20px #00ff88;
        z-index: 200;
    }

    .balls-display {
        position: absolute;
        top: 3%;
        left: 5%;
        color: #ff6b6b;
        font-size: clamp(14px, 2.5vmin, 24px);
        text-shadow: 0 0 10px #ff6b6b;
        z-index: 200;
    }

    .game-over {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #ff0000;
        font-size: clamp(30px, 8vmin, 60px);
        text-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000;
        opacity: 0;
        z-index: 300;
        transition: opacity 1s;
        text-align: center;
    }

    .game-over.show {
        opacity: 1;
    }

    .obstacle {
        position: absolute;
        background: linear-gradient(135deg, #2c3e50, #1a252f);
        border-radius: 5px;
    }

    .obstacle-1 {
        left: 35%;
        top: 45%;
        width: 60px;
        height: 15px;
        transform: rotate(-30deg);
    }

    .obstacle-2 {
        right: 35%;
        top: 45%;
        width: 60px;
        height: 15px;
        transform: rotate(30deg);
    }

    .light {
        position: absolute;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #333;
        box-shadow: inset 0 0 3px rgba(0,0,0,0.5);
    }

    .light.on {
        background: #ffff00;
        box-shadow: 0 0 10px #ffff00, 0 0 20px #ffff00;
    }

    .lights-row {
        position: absolute;
        top: 8%;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 15px;
    }
</style>

</head>

<div class="game-container" id="gameContainer">
    <div class="pinball-table" id="table">
        <div class="table-surface"></div>
        
        <div class="score-display" id="score">0</div>
        <div class="balls-display" id="ballsLeft">BALLS: 3</div>
        
        <div class="lights-row">
            <div class="light" id="light1"></div>
            <div class="light" id="light2"></div>
            <div class="light" id="light3"></div>
            <div class="light" id="light4"></div>
            <div class="light" id="light5"></div>
        </div>
        
        <div class="bumper bumper-1" id="bumper1"></div>
        <div class="bumper bumper-2" id="bumper2"></div>
        <div class="bumper bumper-3" id="bumper3"></div>
        
        <div class="target target-1" id="target1"></div>
        <div class="target target-2" id="target2"></div>
        <div class="target target-3" id="target3"></div>
        <div class="target target-4" id="target4"></div>
        
        <div class="obstacle obstacle-1"></div>
        <div class="obstacle obstacle-2"></div>
        
        <div class="slingshot slingshot-left"></div>
        <div class="slingshot slingshot-right"></div>
        
        <div class="rail rail-left"></div>
        <div class="rail rail-right"></div>
        
        <div class="flipper flipper-left" id="flipperLeft"></div>
        <div class="flipper flipper-right" id="flipperRight"></div>
        
        <div class="launcher"></div>
        <div class="drain"></div>
        
        <div class="ball" id="ball"></div>
        <div class="ball-shadow" id="ballShadow"></div>
        
        <div class="game-over" id="gameOver">GAME OVER</div>
    </div>
</div>


    const ball = document.getElementById('ball');
    const ballShadow = document.getElementById('ballShadow');
    const table = document.getElementById('table');
    const gameContainer = document.getElementById('gameContainer');
    const scoreDisplay = document.getElementById('score');
    const ballsDisplay = document.getElementById('ballsLeft');
    const gameOverDisplay = document.getElementById('gameOver');
    const flipperLeft = document.getElementById('flipperLeft');
    const flipperRight = document.getElementById('flipperRight');

    let tableRect;
    let ballX, ballY;
    let velX = 0, velY = 0;
    let score = 0;
    let ballsRemaining = 3;
    let gameActive = false;
    let gravity = 0.15;
    let friction = 0.995;
    let bounceDamping = 0.7;

    const bumpers = [
        { el: document.getElementById('bumper1'), x: 0, y: 0, r: 25, force: 12, points: 100 },
        { el: document.getElementById('bumper2'), x: 0, y: 0, r: 25, force: 12, points: 100 },
        { el: document.getElementById('bumper3'), x: 0, y: 0, r: 30, force: 15, points: 150 }
    ];

    const targets = [
        { el: document.getElementById('target1'), points: 50 },
        { el: document.getElementById('target2'), points: 50 },
        { el: document.getElementById('target3'), points: 50 },
        { el: document.getElementById('target4'), points: 50 }
    ];

    const lights = [
        document.getElementById('light1'),
        document.getElementById('light2'),
        document.getElementById('light3'),
        document.getElementById('light4'),
        document.getElementById('light5')
    ];

    function updateTableRect() {
        tableRect = table.getBoundingClientRect();
        
        bumpers.forEach(b => {
            const rect = b.el.getBoundingClientRect();
            b.x = rect.left - tableRect.left + rect.width / 2;
            b.y = rect.top - tableRect.top + rect.height / 2;
        });
    }

    function screenShake(intensity =<</html>*

<div class="game-container" id="gameContainer">
    <div class="pinball-table" id="table">
        <div class="table-surface"></div>
        
        <div class="score-display" id="score">0</div>
        <div class="balls-display" id="ballsLeft">BALLS: 3</div>
        
        <div class="lights-row">
            <div class="light" id="light1"></div>
            <div class="light" id="light2"></div>
            <div class="light" id="light3"></div>
            <div class="light" id="light4"></div>
            <div class="light" id="light5"></div>
        </div>
        
        <div class="bumper bumper-1" id="bumper1"></div>
        <div class="bumper bumper-2" id="bumper2"></div>
        <div class="bumper bumper-3" id="bumper3"></div>
        
        <div class="target target-1" id="target1"></div>
        <div class="target target-2" id="target2"></div>
        <div class="target target-3" id="target3"></div>
        <div class="target target-4" id="target4"></div>
        
        <div class="obstacle obstacle-1"></div>
        <div class="obstacle obstacle-2"></div>
        
        <div class="slingshot slingshot-left"></div>
        <div class="slingshot slingshot-right"></div>
        
        <div class="rail rail-left"></div>
        <div class="rail rail-right"></div>
        
        <div class="flipper flipper-left" id="flipperLeft"></div>
        <div class="flipper flipper-right" id="flipperRight"></div>
        
        <div class="launcher"></div>
        <div class="drain"></div>
        
        <div class="ball" id="ball"></div>
        <div class="ball-shadow" id="ballShadow"></div>
        
        <div class="game-over" id="gameOver">GAME OVER</div>
    </div>
</div>


    const ball = document.getElementById('ball');
    const ballShadow = document.getElementById('ballShadow');
    const table = document.getElementById('table');
    const gameContainer = document.getElementById('gameContainer');
    const scoreDisplay = document.getElementById('score');
    const ballsDisplay = document.getElementById('ballsLeft');
    const gameOverDisplay = document.getElementById('gameOver');
    const flipperLeft = document.getElementById('flipperLeft');
    const flipperRight = document.getElementById('flipperRight');

    let tableRect;
    let ballX, ballY;
    let velX = 0, velY = 0;
    let score = 0;
    let ballsRemaining = 3;
    let gameActive = false;
    let gravity = 0.15;
    let friction = 0.995;
    let bounceDamping = 0.7;

    const bumpers = [
        { el: document.getElementById('bumper1'), x: 0, y: 0, r: 25, force: 12, points: 100 },
        { el: document.getElementById('bumper2'), x: 0, y: 0, r: 25, force: 12, points: 100 },
        { el: document.getElementById('bumper3'), x: 0, y: 0, r: 30, force: 15, points: 150 }
    ];

    const targets = [
        { el: document.getElementById('target1'), points: 50 },
        { el: document.getElementById('target2'), points: 50 },
        { el: document.getElementById('target3'), points: 50 },
        { el: document.getElementById('target4'), points: 50 }
    ];

    const lights = [
        document.getElementById('light1'),
        document.getElementById('light2'),
        document.getElementById('light3'),
        document.getElementById('light4'),
        document.getElementById('light5')
    ];

    function updateTableRect() {
        tableRect = table.getBoundingClientRect();
        
        bumpers.forEach(b => {
            const rect = b.el.getBoundingClientRect();
            b.x = rect.left - tableRect.left + rect.width / 2;
            b.y = rect.top - tableRect.top + rect.height / 2;
        });
    }

    function screenShake(intensity =<</html>*

Updated files

@andronov04

Self-playing side-view pinball in a single HTML file. Pure CSS/JS, no assets. Features chrome ball physics, shadows, screen shake, and flashing bumpers. Auto-flippers play through 3 balls, updating the score until a 'GAME OVER' fade.