HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!

1920x1080

54.6 KB

Share this result

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

Script

Open in browser

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>ALTAMASH SURF - PHONE</title>
<style>
 body{margin:0; overflow:hidden; background:#000; touch-action:none; font-family:Arial;}
 canvas{display:block; width:100vw; height:100vh;}
 #ui{position:absolute; top:10px; left:10px; color:#fff; z-index:10; font-size:16px; font-weight:bold; text-shadow:0 0 5px #00ffff; background:rgba(0,0,0,0.5); padding:8px 12px; border-radius:10px;}
 #start{position:absolute; inset:0; background:linear-gradient(#111,#000); display:flex; flex-direction:column; align-items:center; justify-content:center; color:#fff; z-index:20; text-align:center;}
 button{padding:15px 50px; background:#00ff88; border:none; border-radius:30px; font-weight:bold; font-size:20px; margin-top:15px; box-shadow:0 0 20px #00ff88;}
</style>
</head>
<body>
<div id="ui">SCORE <span id="s">0</span><br>COIN <span id="c">0</span></div>
<div id="start">
 <h1 style="color:#00ff88; letter-spacing:6px; text-shadow:0 0 15px #00ff88; margin:0;">SUBWAY</h1>
 <h2 style="color:#00ffff; margin:5px;">ALTAMASH PHONE</h2>
 <p style="opacity:0.7; font-size:14px;">◀ Swipe Left/Right ▶<br>▲ Swipe Up = Jump</p>
 <button onclick="start()">TAP TO RUN</button>
</div>
<canvas id="cv"></canvas>
<script>
let cv=document.getElementById('cv'), ctx=cv.getContext('2d');
cv.width=innerWidth; cv.height=innerHeight;
let W=cv.width, H=cv.height;
let lanes=[W*0.5-80, W*0.5, W*0.5+80];
let player={lane:1, y:H-170, vy:0, jumping:false, frame:0}, obs=[], score=0, coins=0, speed=4.5, run=false;
let sy=0, sx=0;

function start(){ document.getElementById('start').style.display='none'; run=true; loop(); }

function drawBoy(x,y,f,jump){
 let leg=Math.sin(f*0.5)*12;
 ctx.fillStyle='#ffcc99';
 ctx.beginPath(); ctx.arc(x, y+10, 13, 0, Math.PI*2); ctx.fill(); // head
 ctx.fillStyle='#00ffff'; ctx.fillRect(x-14, y+23, 28, 22); // shirt
 ctx.fillStyle='#0066ff'; ctx.fillRect(x-12, y+45, 24, 10); // short
 ctx.fillStyle='#ffcc99';
 if(jump){ ctx.fillRect(x-7, y+55, 6, 14); ctx.fillRect(x+3, y+55, 6, 14); }
 else{ ctx.fillRect(x-8+leg, y+55, 6, 14); ctx.fillRect(x+4-leg, y+55, 6, 14); }
}
function drawTrain(x,y){
 ctx.fillStyle='#ff0040'; ctx.fillRect(x-38, y, 76, 55);
 ctx.fillStyle='#222'; ctx.fillRect(x-30, y+8, 60, 18);
 ctx.fillStyle='#555'; ctx.fillRect(x-38, y+50, 76, 8);
}

function loop(){
 if(!run) return;
 // bg
 ctx.fillStyle='#1a1a1a'; ctx.fillRect(0,0,W,H);
 // tracks
 ctx.fillStyle='#2a2a2a'; ctx.fillRect(lanes[0]-55,0,270,H);
 ctx.strokeStyle='#00ff88'; ctx.lineWidth=2; ctx.setLineDash([20,20]);
 ctx.beginPath(); ctx.moveTo(lanes[0]+35,0); ctx.lineTo(lanes[0]+35,H); ctx.moveTo(lanes[1]+35,0); ctx.lineTo(lanes[1]+35,H); ctx.stroke();
 ctx.setLineDash([]);

 if(Math.random()<0.025){ obs.push({lane:Math.floor(Math.random()*3), y:-80, type:0}); }
 if(Math.random()<0.04){ obs.push({lane:Math.floor(Math.random()*3), y:-80, type:1}); }

 for(let i=obs.length-1;i>=0;i--){
  let o=obs[i]; o.y+=speed;
  if(o.type==0){ // train/bus
   drawTrain(lanes[o.lane], o.y);
   if(o.lane==player.lane && o.y+55>player.y && o.y<player.y+70 &&!player.jumping){ return gameOver(); }
  }else{ // coin
   ctx.fillStyle='#ffea00'; ctx.beginPath(); ctx.arc(lanes[o.lane], o.y+15, 11,0,Math.PI*2); ctx.fill();
   ctx.fillStyle='#ff9000'; ctx.beginPath(); ctx.arc(lanes[o.lane], o.y+15, 5,0,Math.PI*2); ctx.fill();
   if(o.lane==player.lane && Math.abs(o.y+15 - (player.y+30))<25){ coins++; obs.splice(i,1); document.getElementById('c').innerText=coins; continue; }
  }
  if(o.y>H) obs.splice(i,1);
 }

 if(player.jumping){ player.vy+=0.85; player.y+=player.vy; if(player.y>=H-170){ player.y=H-170; player.jumping=false; player.vy=0; } }
 player.frame++;
 drawBoy(lanes[player.lane], player.y, player.frame, player.jumping);

 score++; if(score%200==0) speed+=0.2; // slow speed increase
 document.getElementById('s').innerText=score;
 requestAnimationFrame(loop);
}

function gameOver(){ run=false; document.getElementById('start').style.display='flex'; document.getElementById('start').innerHTML=`<h1 style="color:#ff0040;">CRASH!</h1><p>SCORE: ${score}<br>COINS: ${coins}</p><button onclick="location.reload()">RUN AGAIN</button>`; }

// PHONE SWIPE CONTROLS
cv.addEventListener('touchstart',e=>{ sx=e.touches[0].clientX; sy=e.touches[0].clientY; }, {passive:false});
cv.addEventListener('touchend',e=>{
 let dx=e.changedTouches[0].clientX-sx;
 let dy=e.changedTouches[0].clientY-sy;
 if(Math.abs(dy)>Math.abs(dx) && dy<-40 &&!player.jumping){ player.jumping=true; player.vy=-17; } // up swipe = jump
 else if(dx<-40 && player.lane>0){ player.lane--; } // left swipe
 else if(dx>40 && player.lane<2){ player.lane++; } // right swipe
 else if(Math.abs(dx)<20 && Math.abs(dy)<20){ // tap
  if(e.changedTouches[0].clientX < W/2 && player.lane>0) player.lane--;
  if(e.changedTouches[0].clientX > W/2 && player.lane<2) player.lane++;
 }
 e.preventDefault();
}, {passive:false});

onresize=()=>{ cv.width=innerWidth; cv.height=innerHeight; W=cv.width; H=cv.height; lanes=[W*0.5-80, W*0.5, W*0.5+80]; player.y=H-170; }
</script>
</body>
</html>

Landing Page

This ad does not have a landing page available

Network Timeline

Performance Summary

Requests

Domains

5KB

Transfer Size

5KB

Content Size

293.0ms

Dom Content Loaded

508.0ms

First Paint

293.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