TI Simulator 2D

by ElectricMeteor77
137 lines5.0 KB
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>TI Simulator 2D</title>
    <style>
        body { margin: 0; overflow: hidden; background: #111; font-family: 'Courier New', Courier, monospace; }
        canvas { display: block; margin: 0 auto; background: #333; }
        #ui { position: absolute; top: 10px; left: 10px; color: white; background: rgba(0,0,0,0.7); padding: 15px; border-radius: 8px; pointer-events: none; }
        .bar-container { width: 200px; height: 20px; background: #444; border: 2px solid #fff; margin-top: 5px; }
        #fixBar { width: 0%; height: 100%; background: #00ff00; transition: width 0.1s; }
    </style>
</head>
<body>

    <div id="ui">
        <b>TÉCNICO DE TI</b><br>
        Chamados Resolvidos: <span id="score">0</span><br>
        Status: <span id="status">Procurando erros...</span>
        <div class="bar-container"><div id="fixBar"></div></div>
    </div>

    <canvas id="screen"></canvas>

    <script>
        const canvas = document.getElementById("screen");
        const ctx = canvas.getContext("2d");
        canvas.width = 800;
        canvas.height = 600;

        // --- CARREGAMENTO DE IMAGENS ---
        const imgChao = new Image(); 
        imgChao.src = 'https://i.imgur.com/39J92YF.png'; // Textura de carpete/piso

        const imgHero = new Image();
        imgHero.src = 'https://i.imgur.com/6S7ZUnS.png'; // Sprite do técnico

        const imgImpressora = new Image();
        imgImpressora.src = 'https://i.imgur.com/S6L2PZ7.png'; // Sprite da impressora

        // --- CONFIGURAÇÕES ---
        let score = 0;
        let fixProgress = 0;
        const keys = {};

        const player = {
            x: 400, y: 300, w: 48, h: 48, speed: 4, 
            frame: 0, animTick: 0
        };

        const printers = [
            { x: 150, y: 150, broken: false, timer: 100 },
            { x: 600, y: 150, broken: false, timer: 250 },
            { x: 370, y: 450, broken: false, timer: 400 }
        ];

        window.addEventListener("keydown", e => keys[e.code] = true);
        window.addEventListener("keyup", e => keys[e.code] = false);

        function update() {
            // Movimentação
            if (keys["ArrowUp"] && player.y > 0) player.y -= player.speed;
            if (keys["ArrowDown"] && player.y < canvas.height - 50) player.y += player.speed;
            if (keys["ArrowLeft"] && player.x > 0) player.x -= player.speed;
            if (keys["ArrowRight"] && player.x < canvas.width - 50) player.x += player.speed;

            let amertoPerto = false;

            printers.forEach(p => {
                // Lógica de quebrar aleatoriamente
                if(!p.broken && Math.random() < 0.002) p.broken = true;

                // Colisão/Proximidade
                let dist = Math.hypot(player.x - p.x, player.y - p.y);
                if(dist < 50 && p.broken) {
                    amertoPerto = true;
                    document.getElementById("status").innerText = "Pressione ESPAÇO para reparar!";
                    
                    if(keys["Space"]) {
                        fixProgress += 1.5;
                        document.getElementById("fixBar").style.width = fixProgress + "%";
                        if(fixProgress >= 100) {
                            p.broken = false;
                            fixProgress = 0;
                            score++;
                            document.getElementById("score").innerText = score;
                            document.getElementById("fixBar").style.width = "0%";
                        }
                    }
                }
            });

            if(!amertoPerto) {
                document.getElementById("status").innerText = "Patrulhando escritório...";
                fixProgress = 0;
                document.getElementById("fixBar").style.width = "0%";
            }
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 1. Desenhar o Chão (Repetido)
            for(let i=0; i<canvas.width; i+=64) {
                for(let j=0; j<canvas.height; j+=64) {
                    ctx.drawImage(imgChao, i, j, 64, 64);
                }
            }

            // 2. Desenhar Impressoras
            printers.forEach(p => {
                ctx.drawImage(imgImpressora, p.x, p.y, 64, 64);
                if(p.broken) {
                    // Alerta de erro (Luz piscando)
                    ctx.fillStyle = Math.sin(Date.now()/100) > 0 ? "rgba(255,0,0,0.5)" : "rgba(255,255,0,0.5)";
                    ctx.beginPath();
                    ctx.arc(p.x + 32, p.y - 10, 8, 0, Math.PI*2);
                    ctx.fill();
                }
            });

            // 3. Desenhar Jogador (Técnico)
            ctx.drawImage(imgHero, player.x, player.y, player.w, player.h);

            requestAnimationFrame(() => {
                update();
                draw();
            });
        }

        // Iniciar após carregar imagens
        imgHero.onload = () => draw();

    </script>
</body>
</html>
Game Source: TI Simulator 2D

Creator: ElectricMeteor77
Libraries: none
Complexity: moderate (137 lines, 5.0 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: ti-simulator-2d-electricmeteor77" to link back to the original. Then publish at arcadelab.ai/publish.