-
Notifications
You must be signed in to change notification settings - Fork 122
Open
Description
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; }Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
No labels