Skip to content

OVIRRIDE-RANDOM NETOWO #2349

@ironvoi

Description

@ironvoi

Error code

ERRW:SS1.0

Were you logged in?

Yes

Your username (if logged in)

Iron_void

Your HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Protocol: Override</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div id="ui-ingame">
        <div class="stats">PONTOS: <span id="scoreVal">0</span> | RECORDE: <span id="bestVal">0</span></div>
        <div class="coins-display">$ <span id="coinsVal">0</span></div>
        <div id="timer-bar-container">
            <div id="timer-bar"></div>
        </div>
    </div>

    <div id="start-screen" class="overlay">
        <h1 class="title">PROTOCOL: OVERRIDE</h1>
        <div class="wallet">MOEDAS: <span class="total-coins">0</span></div>
        <button class="btn" id="btn-start">CONECTAR LINK</button>
        <button class="btn btn-secondary" id="btn-open-store">LOJA DE SKINS</button>
    </div>

    <div id="store-screen" class="overlay" style="display:none">
        <div class="store-container">
            <h2 class="store-title">CUSTOMIZAÇÃO</h2>
            <div class="store-grid" id="skin-grid"></div>
            <button class="btn" id="btn-close-store">VOLTAR</button>
        </div>
    </div>

    <div id="death-screen" class="overlay" style="display:none">
        <h2 class="death-title">SISTEMA OFFLINE</h2>
        <div id="final-score" class="final-score"></div>
        <button class="btn" id="btn-restart">REBOOT</button>
        <button class="btn btn-muted" id="btn-menu">MENU PRINCIPAL</button>
    </div>

    <canvas id="game"></canvas>

    <script src="script.js"></script>
</body>
</html>

Your JavaScript

const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

let gameState = {
    coins: parseInt(localStorage.getItem('ovr_coins')) || 0,
    best: parseInt(localStorage.getItem('ovr_best')) || 0,
    currentSkin: localStorage.getItem('ovr_skin') || '⚪',
    unlockedSkins: JSON.parse(localStorage.getItem('ovr_unlocked_skins')) || ['⚪']
};

const skins = [
    {id:'⚪', p:0}, {id:'👾', p:30}, {id:'👻', p:50}, {id:'💀', p:70}, {id:'👿', p:90}, {id:'🤡', p:120},
    {id:'👹', p:150}, {id:'😁', p:200}, {id:'❤', p:250}, {id:'💣', p:300}, {id:'🔥', p:400}, {id:'🪐', p:500},
    {id:'⚽', p:50}, {id:'🏀', p:50}, {id:'🎱', p:100}, {id:'🧿', p:150}, {id:'🔴', p:20}, {id:'🔵', p:20}
];

let score = 0, gameActive = false, nodes = [], player = {}, animationId, nodeTimer = 100;

function saveData() {
    localStorage.setItem('ovr_coins', gameState.coins);
    localStorage.setItem('ovr_best', gameState.best);
    localStorage.setItem('ovr_skin', gameState.currentSkin);
    localStorage.setItem('ovr_unlocked_skins', JSON.stringify(gameState.unlockedSkins));
    document.querySelectorAll('.total-coins').forEach(el => el.innerText = gameState.coins);
}

function spawnNodes() {
    nodes = [player.anchor]; 
    let nodeCount = Math.floor(Math.random() * 4) + 1;
    
    for(let i = 0; i < nodeCount; i++) {
        let nX, nY, d, attempts = 0;
        do {
            nX = 80 + Math.random() * (window.innerWidth - 160);
            nY = 130 + Math.random() * (window.innerHeight - 260);
            d = Math.hypot(nX - player.anchor.x, nY - player.anchor.y);
            for(let j = 0; j < nodes.length; j++) {
                if(Math.hypot(nX - nodes[j].x, nY - nodes[j].y) < 120) d = 0;
            }
            attempts++;
        } while (d < 180 && attempts < 40);
        
        nodes.push({ 
            x: nX, y: nY, radius: 25, 
            pulse: Math.random() * 5,
            isSpecial: Math.random() > 0.8 
        });
    }
    nodeTimer = 100;
}

function update() {
    if(!gameActive) return;
    ctx.fillStyle = "#05010a";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    if(!player.isFlying) {
        let multiplier = 1 + (nodes.length * 0.05);
        nodeTimer -= (0.15 + (score * 0.006)) * multiplier;
        document.getElementById('timer-bar').style.width = nodeTimer + "%";
        document.getElementById('timer-bar').style.background = nodeTimer < 30 ? "#ff0000" : "#00f2ff";
        if(nodeTimer <= 0) return gameOver();
    }

    nodes.forEach(n => {
        n.pulse += 0.06;
        let color = n === player.anchor ? "#fff" : (n.isSpecial ? "#ffd700" : "#00f2ff");
        ctx.shadowBlur = 15; ctx.shadowColor = color;
        ctx.beginPath(); 
        ctx.arc(n.x, n.y, n.radius + Math.sin(n.pulse)*5, 0, Math.PI*2);
        ctx.strokeStyle = color; ctx.lineWidth = 4; ctx.stroke();
    });

    if(!player.isFlying) {
        player.speed = 0.04 + (Math.floor(score/10)*0.015);
        player.angle += player.speed;
        player.x = player.anchor.x + Math.cos(player.angle)*player.dist;
        player.y = player.anchor.y + Math.sin(player.angle)*player.dist;
        ctx.beginPath(); ctx.moveTo(player.anchor.x, player.anchor.y); ctx.lineTo(player.x, player.y);
        ctx.strokeStyle = "rgba(0, 242, 255, 0.2)"; ctx.stroke();
    } else {
        player.x += player.vx; player.y += player.vy;
        nodes.forEach(n => {
            if(n !== player.anchor && Math.hypot(player.x - n.x, player.y - n.y) < 60) {
                player.anchor = n; player.isFlying = false;
                player.angle = Math.atan2(player.y - n.y, player.x - n.x);
                score++;
                gameState.coins += (n.isSpecial ? 5 : 1) + Math.floor(score/12);
                document.getElementById('scoreVal').innerText = score;
                document.getElementById('coinsVal').innerText = gameState.coins;
                spawnNodes();
            }
        });
        if(player.x < -40 || player.x > canvas.width+40 || player.y < -40 || player.y > canvas.height+40) gameOver();
    }

    ctx.shadowBlur = 30; ctx.shadowColor = "#00f2ff";
    ctx.font = "32px Arial"; ctx.textAlign = "center"; ctx.textBaseline = "middle";
    ctx.fillText(gameState.currentSkin, player.x, player.y);
    animationId = requestAnimationFrame(update);
}

function startGame() {
    if(animationId) cancelAnimationFrame(animationId);
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    score = 0;
    gameActive = true;
    let startNode = { x: canvas.width/2, y: canvas.height/2, radius: 25, pulse: 0 };
    player = { anchor: startNode, angle: 0, radius: 15, dist: 90, speed: 0.04, isFlying: false, x: 0, y: 0, vx: 0, vy: 0 };
    spawnNodes();
    document.querySelectorAll('.overlay').forEach(el => el.style.display = 'none');
    document.getElementById('ui-ingame').style.display = 'block';
    document.getElementById('scoreVal').innerText = score;
    document.getElementById('bestVal').innerText = gameState.best;
    document.getElementById('coinsVal').innerText = gameState.coins;
    update();
}

function gameOver() {
    gameActive = false;
    if(score > gameState.best) gameState.best = score;
    saveData();
    document.getElementById('death-screen').style.display = 'flex';
    document.getElementById('final-score').innerText = "SCORE FINAL: " + score;
}

function renderStore() {
    const grid = document.getElementById('skin-grid');
    grid.innerHTML = '';
    skins.forEach(s => {
        const owned = gameState.unlockedSkins.includes(s.id);
        const item = document.createElement('div');
        item.className = `item ${gameState.currentSkin === s.id ? 'selected' : ''}`;
        item.innerHTML = `${s.id} <span class="price">${owned ? 'OK' : '$'+s.p}</span>`;
        item.onclick = () => {
            if(owned) gameState.currentSkin = s.id;
            else if(gameState.coins >= s.p) {
                gameState.coins -= s.p;
                gameState.unlockedSkins.push(s.id);
                gameState.currentSkin = s.id;
            }
            saveData(); renderStore();
        };
        grid.appendChild(item);
    });
}

// Listeners
document.getElementById('btn-start').addEventListener('click', startGame);
document.getElementById('btn-restart').addEventListener('click', startGame);
document.getElementById('btn-open-store').addEventListener('click', () => {
    document.getElementById('start-screen').style.display = 'none';
    document.getElementById('store-screen').style.display = 'flex';
    renderStore();
});
document.getElementById('btn-close-store').addEventListener('click', () => {
    document.getElementById('store-screen').style.display = 'none';
    document.getElementById('start-screen').style.display = 'flex';
    saveData();
});
document.getElementById('btn-menu').addEventListener('click', () => {
    document.getElementById('death-screen').style.display = 'none';
    document.getElementById('start-screen').style.display = 'flex';
});

window.addEventListener('mousedown', (e) => { 
    if(gameActive && !player.isFlying && e.target === canvas) launch(); 
});
window.addEventListener('touchstart', (e) => { 
    if(gameActive && !player.isFlying && e.target === canvas) { 
        e.preventDefault(); launch(); 
    }
}, {passive: false});

function launch() {
    let pwr = 16 + (Math.floor(score/10)*1.1);
    player.vx = Math.cos(player.angle + Math.PI/2)*pwr;
    player.vy = Math.sin(player.angle + Math.PI/2)*pwr;
    player.isFlying = true;
}

saveData();

Your CSS

body { 
    margin: 0; 
    background: #05010a; 
    color: #fff; 
    font-family: 'Courier New', monospace; 
    overflow: hidden; 
    touch-action: none; 
    user-select: none; 
}

canvas { 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index: 1; 
}

.overlay { 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    background: rgba(5, 1, 10, 0.95); 
    z-index: 100; 
    text-align: center; 
}

#ui-ingame { 
    position: absolute; 
    top: 10px; 
    width: 100%; 
    text-align: center; 
    pointer-events: none; 
    z-index: 10; 
    display: none; 
}

.title { color: #00f2ff; text-shadow: 0 0 20px #00f2ff; }
.wallet { margin-bottom: 20px; color: #ffd700; font-size: 1.2em; }

.btn { 
    background: #00f2ff; 
    border: none; 
    color: #000; 
    padding: 15px 40px; 
    font-weight: bold; 
    cursor: pointer; 
    margin: 10px; 
    font-family: 'Courier New'; 
    box-shadow: 0 0 15px #00f2ff; 
    transition: 0.2s;
}

.btn-secondary { background: #ff00ff; box-shadow: 0 0 15px #ff00ff; }
.btn-muted { background: #666; box-shadow: none; }
.btn:active { transform: scale(0.95); }

#timer-bar-container { width: 150px; height: 8px; background: #222; margin: 10px auto; border-radius: 4px; overflow: hidden; }
#timer-bar { width: 100%; height: 100%; background: #00f2ff; box-shadow: 0 0 10px #00f2ff; transition: width 0.1s linear; }

.store-container { width: 90%; max-width: 400px; background: #111; border: 2px solid #00f2ff; padding: 15px; border-radius: 10px; }
.store-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-height: 250px; overflow-y: auto; padding: 10px; background: #000; }
.item { border: 1px solid #333; padding: 8px; text-align: center; cursor: pointer; font-size: 20px; transition: 0.3s; }
.item.selected { border: 2px solid #fff; box-shadow: 0 0 10px #00f2ff; background: #222; }
.price { font-size: 10px; display: block; color: #ffd700; }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions