HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
800x503
9.92 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="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dragon Ball Pixel 🐉</title>
<style>
*{margin:0; padding:0; box-sizing:border-box; touch-action:none; user-select:none;}
body{
  background:#000;
  display:flex; flex-direction:column;
  align-items:center;
  min-height:100vh;
  font-family:sans-serif;
}
h1{
  color:#FFD700;
  font-size:clamp(18px,5vw,26px);
  padding:10px;
  text-align:center;
  text-shadow:2px 2px 4px #b8860b;
}
#gameCanvas{
  width:100%;
  max-width:800px;
  height:auto;
  border:4px solid #FFD700;
  image-rendering:pixelated;
  background:#87CEEB;
}
.area-juego{position:relative;}
.barras{
  position:absolute; top:15px; left:0; right:0;
  width:100%; max-width:800px;
  padding:0 15px;
  display:flex; justify-content:space-between;
  pointer-events:none;
}
.caja-vida{width:45%;}
.etiqueta{font-size:14px; font-weight:bold; margin-bottom:4px;}
.etiqueta-goku{color:#ff7c00;}
.etiqueta-vegeta{color:#2a60c8; text-align:right;}
.barra-fondo{
  height:18px; background:#222; border-radius:9px;
  border:2px solid #fff; overflow:hidden;
}
.barra-goku{height:100%; width:100%; background:linear-gradient(90deg,#ff4500,#ff9500); transition:width 0.2s;}
.barra-vegeta{height:100%; width:100%; background:linear-gradient(90deg,#2a60c8,#64a0ff); transition:width 0.2s;}

.controles{
  width:100%; max-width:800px;
  padding:15px;
  display:flex; justify-content:space-between; align-items:center;
}
.dpad{
  display:grid;
  grid-template-columns:repeat(3,60px);
  grid-template-rows:repeat(3,60px);
  gap:5px;
}
.btn-dir{
  width:60px; height:60px; border:none; border-radius:50%;
  background:linear-gradient(145deg,#444,#222); color:#fff;
  font-size:24px; font-weight:bold; cursor:pointer;
  box-shadow:0 4px #111;
}
.btn-dir:active{transform:translateY(2px); box-shadow:0 2px #111; background:#555;}

.btn-atacar{
  width:90px; height:90px; border:none; border-radius:50%;
  background:linear-gradient(145deg,#ff7c00,#d45500); color:#fff;
  font-size:18px; font-weight:bold; cursor:pointer;
  box-shadow:0 5px #8b3d00;
}
.btn-atacar:active{transform:translateY(3px); box-shadow:0 2px #8b3d00;}

.instrucciones{
  color:#aaa; font-size:13px; text-align:center; padding:0 15px 15px; line-height:1.5;
}
</style>
</head>
<body>

<h1>🐉 DRAGON BALL PIXEL — Batalla en el Yermo 🐉</h1>

<div class="area-juego">
  <canvas id="gameCanvas" width="800" height="500"></canvas>
  <div class="barras">
    <div class="caja-vida">
      <div class="etiqueta etiqueta-goku">GOKU ✅ TÚ</div>
      <div class="barra-fondo"><div class="barra-goku" id="barraGoku"></div></div>
    </div>
    <div class="caja-vida">
      <div class="etiqueta etiqueta-vegeta">VEGETA 🤖 ENEMIGO</div>
      <div class="barra-fondo"><div class="barra-vegeta" id="barraVegeta"></div></div>
    </div>
  </div>
</div>

<div class="controles">
  <div class="dpad">
    <span></span>
    <button class="btn-dir" id="btnArriba">↑</button>
    <span></span>
    <button class="btn-dir" id="btnIzquierda">←</button>
    <span></span>
    <button class="btn-dir" id="btnDerecha">→</button>
    <span></span>
    <button class="btn-dir" id="btnAbajo">↓</button>
    <span></span>
  </div>
  <button class="btn-atacar" id="btnAtacar">⚡<br>ATACAR</button>
</div>

<div class="instrucciones">
  📱 Usa las flechas para mover a Goku • Acércate a Vegeta y presiona ⚡ATACAR para golpearlo<br>
  🎯 ¡Reduce toda la vida de Vegeta para ganar!
</div>

<script>
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');

// === CARGAR TUS IMÁGENES ===
const fondo = new Image(); fondo.src = "fondo.png";
const gokuImg = new Image(); gokuImg.src = "goku.png";
const vegetaImg = new Image(); vegetaImg.src = "vegeta.png";

// === PERSONAJES ===
const goku = {
  x: 100, y: 360, w: 70, h: 90, vel: 5,
  vida: 100, atacando: false, cooldown: 0
};

const vegeta = {
  x: 620, y: 360, w: 70, h: 90,
  vida: 100
};

// === CONTROLES ===
const teclas = { up:false, down:false, left:false, right:false };

function conectarBoton(id, campo){
  const btn = document.getElementById(id);
  btn.addEventListener('touchstart', e=>{e.preventDefault(); teclas[campo]=true;});
  btn.addEventListener('touchend', e=>{e.preventDefault(); teclas[campo]=false;});
  btn.addEventListener('mousedown', ()=>teclas[campo]=true);
  btn.addEventListener('mouseup', ()=>teclas[campo]=false);
  btn.addEventListener('mouseleave', ()=>teclas[campo]=false);
}

conectarBoton('btnArriba','up');
conectarBoton('btnAbajo','down');
conectarBoton('btnIzquierda','left');
conectarBoton('btnDerecha','right');

// Teclado también funciona
document.addEventListener('keydown', e=>{
  if(e.key==='ArrowUp') teclas.up=true;
  if(e.key==='ArrowDown') teclas.down=true;
  if(e.key==='ArrowLeft') teclas.left=true;
  if(e.key==='ArrowRight') teclas.right=true;
  if(e.key===' ' && goku.cooldown<=0) iniciarAtaque();
});
document.addEventListener('keyup', e=>{
  if(e.key==='ArrowUp') teclas.up=false;
  if(e.key==='ArrowDown') teclas.down=false;
  if(e.key==='ArrowLeft') teclas.left=false;
  if(e.key==='ArrowRight') teclas.right=false;
});

// Botón atacar
const btnAtacar = document.getElementById('btnAtacar');
function iniciarAtaque(){
  if(goku.cooldown<=0){
    goku.atacando = true;
    goku.cooldown = 35; // tiempo entre ataques
  }
}
btnAtacar.addEventListener('touchstart', e=>{e.preventDefault(); iniciarAtaque();});
btnAtacar.addEventListener('mousedown', iniciarAtaque);

// === COLISIÓN DE ATAQUE ===
function estaCerca(){
  const distanciaAtaque = 75;
  const centroGokuX = goku.x + goku.w/2;
  const centroVegetaX = vegeta.x + vegeta.w/2;
  const distanciaX = Math.abs(centroGokuX - centroVegetaX);
  const distanciaY = Math.abs((goku.y+goku.h/2) - (vegeta.y+vegeta.h/2));
  return distanciaX < distanciaAtaque && distanciaY < 60;
}

let fondoX = 0;

// === BUCLE DEL JUEGO ===
function juego(){
  // Mover fondo suave
  fondoX -= 0.2;
  if(fondoX <= -canvas.width) fondoX = 0;
  ctx.drawImage(fondo, fondoX, 0, canvas.width, canvas.height);
  ctx.drawImage(fondo, fondoX + canvas.width, 0, canvas.width, canvas.height);

  // Mover a Goku
  if(teclas.left && goku.x > 5) goku.x -= goku.vel;
  if(teclas.right && goku.x < canvas.width - goku.w - 5) goku.x += goku.vel;
  if(teclas.up && goku.y > 300) goku.y -= goku.vel;
  if(teclas.down && goku.y < 410) goku.y += goku.vel;

  // Enfriamiento de ataque
  if(goku.cooldown > 0) goku.cooldown--;

  // Lógica de ataque
  if(goku.atacando){
    if(goku.cooldown === 20 && estaCerca()){
      vegeta.vida = Math.max(0, vegeta.vida - 12);
    }
    if(goku.cooldown <= 0) goku.atacando = false;
  }

  // Actualizar barras de vida
  document.getElementById('barraGoku').style.width = goku.vida + '%';
  document.getElementById('barraVegeta').style.width = vegeta.vida + '%';

  // Dibujar personajes
  ctx.drawImage(gokuImg, goku.x, goku.y, goku.w, goku.h);
  ctx.drawImage(vegetaImg, vegeta.x, vegeta.y, vegeta.w, vegeta.h);

  // Efecto de ataque
  if(goku.atacando && goku.cooldown > 15){
    ctx.globalAlpha = 0.85;
    ctx.fillStyle = "#FFD700";
    ctx.beginPath();
    ctx.arc(goku.x + goku.w + 22, goku.y + goku.h/2, 22, 0, Math.PI*2);
    ctx.fill();
    ctx.globalAlpha = 1;
  }

  // === ¡GANASTE! ===
  if(vegeta.vida <= 0){
    ctx.fillStyle = "rgba(0,0,0,0.75)";
    ctx.fillRect(0,0,canvas.width,canvas.height);
    ctx.fillStyle = "#FFD700";
    ctx.font = "bold 52px sans-serif";
    ctx.textAlign = "center";
    ctx.fillText("¡¡GANASTE!! 🎉", canvas.width/2, canvas.height/2 - 10);
    ctx.fillStyle = "#fff";
    ctx.font = "22px sans-serif";
    ctx.fillText("Goku ha vencido a Vegeta", canvas.width/2, canvas.height/2 + 35);
    ctx.fillText("🔄 Recarga para jugar otra vez", canvas.width/2, canvas.height/2 + 70);
    return;
  }

  requestAnimationFrame(juego);
}

// Iniciar cuando las imágenes estén cargadas
let cargadas = 0;
function cuandoCarga(){ cargadas++; if(cargadas>=3) juego(); }
fondo.onload = cuandoCarga;
gokuImg.onload = cuandoCarga;
vegetaImg.onload = cuandoCarga;
</script>

</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
8KB
Transfer Size
9KB
Content Size
132.0ms
Dom Content Loaded
216.0ms
First Paint
202.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