HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
300x150
4.2 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
  <title>Faroeste Sem Lei</title>
  <style>
    *{margin:0;padding:0;box-sizing:border-box}
    body{font-family:Arial;background:#8B4513;color:#fff;overflow:hidden;margin:0}
    canvas{display:block;background:#D2B48C}
    #ui{position:fixed;top:10px;left:10px;font-size:14px;z-index:10;background:#0008;padding:8px;border-radius:8px}
    #vida{color:#f00}
    #honra{color:#0f0}
    #dinheiro{color:#ff0}
    #procurado{color:#f55}
    #dialog{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
            background:#0009;padding:15px;border-radius:12px;max-width:90%;display:none;
            text-align:center;font-size:16px;z-index:10}
    #joystick{position:fixed;bottom:30px;left:30px;width:100px;height:100px;
              background:#fff3;border-radius:50%;opacity:0.3}
    #shoot{position:fixed;bottom:50px;right:50px;width:70px;height:70px;
           background:#f003;border-radius:50%;display:flex;align-items:center;
           justify-content:center;font-size:30px}
  </style>
</head>
<body>
  <canvas id="c"></canvas>
  <div id="ui">
    <span id="vida">❤️❤️❤️❤️</span> |
    <span id="honra">🟢🟢🟡</span> |
    <span id="dinheiro">$0</span> |
    <span id="procurado">⭐ Nenhum</span>
  </div>
  <div id="dialog"></div>
  <div id="joystick"></div>
  <div id="shoot">🔫</div>

  <script>
    const c=document.getElementById('c'), ctx=c.getContext('2d');
    const W=innerWidth, H=innerHeight; c.width=W; c.height=H;

    // === PLAYER ===
    const player = {x:400, y:300, r:12, speed:4, vida:4, honra:2, dinheiro:0, procurado:0, balas:6, dir:0};

    // === WORLD ===
    const world = {camX:0, camY:0};
    const map = [
      {type:'cidade', name:'Dust Creek', x:300, y:200, w:280, h:180},
      {type:'saloon', x:350, y:220, w:70, h:50},
      {type:'banco', x:500, y:220, w:70, h:50}
    ];

    // === CONTROLES TÁTEIS ===
    const joy = document.getElementById('joystick');
    const shootBtn = document.getElementById('shoot');
    let touchId = null, joyX=0, joyY=0;

    joy.addEventListener('touchstart', e=>{ e.preventDefault(); touchId=e.changedTouches[0].identifier; });
    joy.addEventListener('touchmove', e=>{
      if(!touchId) return;
      const t = Array.from(e.changedTouches).find(t=>t.identifier===touchId);
      const rect=joy.getBoundingClientRect();
      joyX = (t.clientX - rect.left - 50)/50;
      joyY = (t.clientY - rect.top -}$; 50)/50;
      joyX = Math.max(-1, Math.min(1, joyX));
      joyY = Math.max(-1, Math.min(1, joyY));
    });
    joy.addEventListener('touchend', ()=>{ touchId=null; joyX=0; joyY=0; });

    shootBtn.addEventListener('touchstart', e=>{ e.preventDefault(); shoot(); });

    // === TIRO ===
    function shoot(){
      if(player.balas<=0) return;
      player.balas--;
      ctx.fillStyle='#ff0';
      ctx.beginPath();
      ctx.moveTo(player.x-world.camX, player.y-world.camY);
      ctx.lineTo(player.x-world.camX + Math.cos(player.dir)*100, player.y-world.camY + Math.sin(player.dir)*100);
      ctx.strokeStyle='#ff0'; ctx.lineWidth=4; ctx.stroke();
    }

    // === LOOP ===
    function loop(){
      update();
      draw();
      requestAnimationFrame(loop);
    }

    function update(){
      // Movimento com joystick
      const dx = joyX * player.speed;
      const dy = joyY * player.speed;
      if(dx||dy) player.dir = Math.atan2(dy, dx);
      player.x += dx; player.y += dy;

      // Câmera segue jogador
      world.camX = player.x - W/2;
      world.camY = player.y - H/2;

      // Interações (toque perto + E)
      map.forEach(obj=>{
        if(overlap(player, obj) && joyY > 0.5){ // toque pra baixo = "E"
          if(obj.type==='saloon') entrarSaloon();
          if(obj.type==='banco') assaltarBanco();
        }
      });
    }

    function draw(){
      ctx.clearRect(0,0,W,H);

      // Deserto
      ctx.fillStyle='#D2B48C';
      ctx.fillRect(0,0,W,H);

      // Cidade
      ctx.fillStyle='#8B5A2B';
      map.filter(o=>o.type==='cidade').forEach(o=>{
        ctx.fillRect(o.x-world.camX, o.y-world.camY, o.w, o.h);
      });

      // Prédios
      ctx.fillStyle='#654321';
      map.filter(o=>o.type==='saloon'||o.type==='banco').forEach(o=>{
        ctx.fillRect(o.x-world.camX, o.y-world.camY, o.w, o.h);
        ctx.fillStyle='#fff';
        ctx.font='14px Arial';
        ctx.fillText(o.type.toUpperCase(), o.x-world.camX+5, o.y-world.camY+25);
        ctx.fillStyle='#654321';
      });

      // Jogador (cavalo)
      ctx.save();
      ctx.translate(player.x-world.camX, player.y-world.camY);
      ctx.rotate(player.dir);
      ctx.fillStyle='#333';
      ctx.fillRect(-18,-9,36,18);
      ctx.fillStyle='#fdb';
      ctx.beginPath(); ctx.arc(13,0,player.r,0,Math.PI*2); ctx.fill();
      ctx.restore();

      // UI
      document.getElementById('vida').innerText='❤️'.repeat(player.vida);
      document.getElementById('dinheiro').innerText=`$${player.dinheiro}`;
      document.getElementById('procurado').innerText=`⭐`.repeat(player.procurado)+' Nenhum'.substring(player.procurado*3);
    }

    function overlap(a,b){
      return a.x > b.x - 40 && a.x < b.x + b.w + 40 && a.y > b.y - 40 && a.y < b.y + b.h + 40;
    }

    function entrarSaloon(){
      dialog("🍺 Uísque grátis! +$50");
      player.dinheiro += 50;
      setTimeout(closeDialog, 2000);
    }

    function assaltarBanco(){
      if(player.procurado>0){ dialog("🚔 Alerta! Fugir!"); return; }
      dialog("💰 ASSALTO! +$500");
      player.dinheiro += 500;
      player.procurado = 2;
      setTimeout(closeDialog, 2000);
    }

    function dialog(txt){
      const d=document.getElementById('dialog');
      d.style.display='block'; d.innerText=txt;
    }
    function closeDialog(){ document.getElementById('dialog').style.display='none'; }

    loop();
  </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
6KB
Transfer Size
6KB
Content Size
99.0ms
Dom Content Loaded
108.0ms
First Paint
99.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests