HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
900x504
16.6 KB
Share this result

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

Open in browser
from pathlib import Path

html = r'''<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>AI King Fighter</title>
<style>
  *{box-sizing:border-box}
  body{margin:0;background:#111;color:white;font-family:Arial,sans-serif;overflow:hidden}
  #game{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
  canvas{width:min(100vw,900px);height:auto;max-height:72vh;background:linear-gradient(#69b7e8 0 55%,#5f9d43 55% 100%);border:3px solid #222;touch-action:none}
  #controls{width:min(100vw,900px);display:flex;justify-content:space-between;gap:12px;padding:12px}
  .group{display:flex;gap:10px}
  button{border:0;border-radius:16px;padding:16px 20px;font-size:20px;font-weight:bold;background:#eee;color:#111;box-shadow:0 4px 0 #777;touch-action:manipulation}
  button:active{transform:translateY(3px);box-shadow:0 1px 0 #777}
  #restart{position:absolute;display:none;font-size:22px;background:#ffd43b}
  @media(max-width:600px){button{padding:14px 16px;font-size:18px}}
</style>
</head>
<body>
<div id="game">
  <canvas id="c" width="900" height="500"></canvas>
  <div id="controls">
    <div class="group">
      <button id="left">⬅️</button><button id="right">➡️</button>
    </div>
    <div class="group">
      <button id="punch">👊</button><button id="jump">⬆️</button>
    </div>
  </div>
  <button id="restart">🔄 Play Again</button>
</div>
<script>
const c=document.getElementById('c'),ctx=c.getContext('2d');
const W=c.width,H=c.height, ground=420;
const player={x:180,y:ground-90,w:55,h:90,vx:0,vy:0,hp:100,face:1,attack:0,hit:0};
const enemy={x:665,y:ground-90,w:55,h:90,vx:0,vy:0,hp:100,face:-1,attack:0,hit:0};
let keys={}, gameOver=false, message="";
function bind(id,key){
  const b=document.getElementById(id);
  ['pointerdown'].forEach(e=>b.addEventListener(e,ev=>{ev.preventDefault();keys[key]=true;}));
  ['pointerup','pointercancel','pointerleave'].forEach(e=>b.addEventListener(e,ev=>{ev.preventDefault();keys[key]=false;}));
}
bind('left','ArrowLeft');bind('right','ArrowRight');bind('jump','ArrowUp');
document.getElementById('punch').addEventListener('pointerdown',e=>{e.preventDefault();keys.punch=true});
document.getElementById('punch').addEventListener('pointerup',e=>{e.preventDefault();keys.punch=false});
window.addEventListener('keydown',e=>keys[e.key]=true);
window.addEventListener('keyup',e=>keys[e.key]=false);
document.getElementById('restart').onclick=()=>location.reload();

function rect(a){return {l:a.x,r:a.x+a.w,t:a.y,b:a.y+a.h}}
function overlap(a,b){return a.l<b.r&&a.r>b.l&&a.t<b.b&&a.b>b.t}
function attackBox(a){
  return a.face===1 ? {x:a.x+a.w-2,y:a.y+25,w:55,h:30}:{x:a.x-53,y:a.y+25,w:55,h:30};
}
function updateFighter(a,isPlayer){
  if(a.hit>0)a.hit--;
  if(isPlayer){
    a.vx=0;
    if(keys.ArrowLeft){a.vx=-5;a.face=-1}
    if(keys.ArrowRight){a.vx=5;a.face=1}
    if(keys.ArrowUp&&a.y>=ground-a.h){a.vy=-12;keys.ArrowUp=false}
    if(keys.punch&&a.attack<=0){a.attack=18;keys.punch=false}
  }
  a.vy+=0.6;a.x+=a.vx;a.y+=a.vy;
  if(a.y>ground-a.h){a.y=ground-a.h;a.vy=0}
  a.x=Math.max(10,Math.min(W-a.w-10,a.x));
  if(a.attack>0)a.attack--;
}
function enemyAI(){
  if(enemy.hit>0)return;
  const d=player.x-enemy.x;
  enemy.face=d>0?1:-1;
  enemy.vx=Math.abs(d)>75?(d>0?2.2:-2.2):0;
  if(Math.abs(d)<90 && enemy.attack<=0){enemy.attack=35}
}
function damage(attacker,target){
  if(attacker.attack===14){
    const ab=attackBox(attacker), tb=rect(target);
    if(overlap(ab,tb)){target.hp=Math.max(0,target.hp-10);target.hit=8}
  }
}
function drawFighter(a,playerSide){
  ctx.save();ctx.translate(a.x+a.w/2,a.y);
  if(a.face<0)ctx.scale(-1,1);
  ctx.fillStyle=playerSide?'#2b6cff':'#e53935';
  ctx.fillRect(-24,25,48,50);
  ctx.fillStyle='#f2c39b';ctx.beginPath();ctx.arc(0,15,22,0,Math.PI*2);ctx.fill();
  ctx.fillStyle='#222';ctx.fillRect(-20,0,40,10);
  ctx.fillStyle='#111';ctx.fillRect(-17,10,6,5);ctx.fillRect(11,10,6,5);
  ctx.fillStyle='#333';ctx.fillRect(-22,75,17,15);ctx.fillRect(5,75,17,15);
  ctx.fillStyle='#ffd43b';ctx.fillRect(25,35,22,12);ctx.fillRect(-47,35,22,12);
  if(a.attack>0){ctx.strokeStyle='#fff';ctx.lineWidth=5;ctx.beginPath();ctx.arc(35,38,28,-.7,.7);ctx.stroke()}
  if(a.hit>0){ctx.globalAlpha=.55;ctx.fillStyle='#fff';ctx.fillRect(-28,0,56,90)}
  ctx.restore();
}
function bar(x,y,hp,label,flip=false){
  ctx.fillStyle='#222';ctx.fillRect(x,y,300,24);
  ctx.fillStyle=hp>35?'#35c759':'#ff3b30';ctx.fillRect(x+3,y+3,294*(hp/100),18);
  ctx.fillStyle='#fff';ctx.font='bold 16px Arial';ctx.fillText(label,x+8,y+18);
}
function draw(){
  ctx.clearRect(0,0,W,H);
  ctx.fillStyle='#fff';ctx.globalAlpha=.7;
  ctx.beginPath();ctx.arc(110,80,35,0,7);ctx.arc(145,75,45,0,7);ctx.arc(190,85,30,0,7);ctx.fill();ctx.globalAlpha=1;
  ctx.fillStyle='#3d7d2c';ctx.fillRect(0,ground,W,H-ground);
  ctx.fillStyle='#222';ctx.font='bold 25px Arial';ctx.fillText('AI KING FIGHTER 👑',335,38);
  bar(30,55,player.hp,'YOU');
  bar(570,55,enemy.hp,'ENEMY');
  drawFighter(player,true);drawFighter(enemy,false);
  if(gameOver){
    ctx.fillStyle='rgba(0,0,0,.65)';ctx.fillRect(0,0,W,H);
    ctx.fillStyle='#fff';ctx.textAlign='center';ctx.font='bold 54px Arial';ctx.fillText(message,W/2,240);
    ctx.font='24px Arial';ctx.fillText('Tap Play Again',W/2,285);ctx.textAlign='left';
    document.getElementById('restart').style.display='block';
  }
}
function loop(){
  if(!gameOver){
    updateFighter(player,true);enemyAI();updateFighter(enemy,false);
    damage(player,enemy);damage(enemy,player);
    if(player.hp<=0||enemy.hp<=0){gameOver=true;message=enemy.hp<=0?'🏆 YOU WIN!':'😵 YOU LOSE!'}
  }
  draw();requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>'''

path = Path("/mnt/data/AI_King_Fighter.html")
path.write_text(html, encoding="utf-8")
print(f"Created: {path}")
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
6KB
Transfer Size
6KB
Content Size
113.0ms
Dom Content Loaded
208.0ms
First Paint
113.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