Live Preview
Tag didn’t load? Click here and let us know!Share this result
Previews are deleted daily. Get a permanent share link sent to your inbox:
Script
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<title>Ultimate Monster Hill Climb</title>
<style>
body { margin: 0; overflow: hidden; background: #87CEEB; font-family: 'Arial Black', sans-serif; }
#stats { position: absolute; top: 15px; left: 15px; color: white; text-shadow: 2px 2px #000; z-index: 100; font-size: 18px; }
#f-bar { width: 120px; height: 12px; background: #444; border: 2px solid #fff; margin-top: 5px; }
#f-level { width: 100%; height: 100%; background: #ff0000; }
#controls { position: absolute; bottom: 30px; width: 100%; display: flex; justify-content: space-around; z-index: 100; }
.btn { width: 90px; height: 90px; background: rgba(0,0,0,0.7); border: 4px solid #fff; border-radius: 50%; color: #fff; display: flex; justify-content: center; align-items: center; font-weight: bold; user-select: none; }
</style>
</head>
<body>
<div id="stats">
COINS: <span id="c">0</span><br>
FUEL: <div id="f-bar"><div id="f-level"></div></div>
</div>
<div id="controls">
<div class="btn" id="bBtn">BRAKE</div>
<div class="btn" id="gBtn">GAS</div>
</div>
<canvas id="game"></canvas>
<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// Audio Context (Awaaz ke liye)
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
function playSound(freq, type, duration) {
const osc = audioCtx.createOscillator();
const gain = audioCtx.createGain();
osc.type = type;
osc.frequency.setValueAtTime(freq, audioCtx.currentTime);
osc.connect(gain);
gain.connect(audioCtx.destination);
gain.gain.setValueAtTime(0.1, audioCtx.currentTime);
gain.gain.exponentialRampToValueAtTime(0.01, audioCtx.currentTime + duration);
osc.start(); osc.stop(audioCtx.currentTime + duration);
}
let car = { x: 150, y: 0, vY: 0, rot: 0, speed: 0, fuel: 100, coins: 0 };
let terrain = [], items = [], scrollX = 0;
let gas = false, brake = false;
// World Generation (Bade Pahad aur Hariyali)
for (let i = 0; i < 5000; i++) {
let y = (canvas.height * 0.6) + Math.sin(i * 0.05) * 100 + Math.cos(i * 0.02) * 50;
terrain.push(y);
if (i > 20 && i % 30 === 0) items.push({ x: i * 30, y: y - 60, type: 'coin' });
if (i > 50 && i % 150 === 0) items.push({ x: i * 30, y: y - 60, type: 'fuel' });
if (i % 60 === 0) items.push({ x: i * 30, y: y - 80, type: 'tree' });
}
function getH(x) { return terrain[Math.floor(x/30)] || canvas.height; }
function update() {
if (gas && car.fuel > 0) {
car.speed += 0.4; car.fuel -= 0.2;
if (Math.random() > 0.8) playSound(100 + car.speed * 10, 'sawtooth', 0.1); // Engine Sound
} else { car.speed *= 0.96; }
if (brake) car.speed -= 0.8;
car.speed = Math.max(-3, Math.min(car.speed, 14));
scrollX += car.speed;
let gy = getH(scrollX + car.x);
let angle = Math.atan2(getH(scrollX + car.x + 20) - gy, 20);
if (car.y < gy - 50) {
car.vY += 0.7; car.rot += 0.05;
} else {
car.vY = 0; car.y = gy - 50; car.rot = angle;
}
car.y += car.vY;
items.forEach(it => {
if (!it.hit && Math.abs((scrollX + car.x) - it.x) < 50 && Math.abs(car.y - it.y) < 60) {
it.hit = true;
if (it.type === 'coin') { car.coins += 10; playSound(800, 'sine', 0.2); }
if (it.type === 'fuel') { car.fuel = 100; playSound(400, 'square', 0.3); }
}
});
document.getElementById('c').innerText = car.coins;
document.getElementById('f-level').style.width = car.fuel + "%";
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Ground & Grass
ctx.fillStyle = "#8B4513"; ctx.beginPath(); ctx.moveTo(0, canvas.height);
for (let i = 0; i < canvas.width; i += 10) ctx.lineTo(i, getH(scrollX + i));
ctx.lineTo(canvas.width, canvas.height); ctx.fill();
ctx.strokeStyle = "#2ecc71"; ctx.lineWidth = 15; ctx.beginPath();
for (let i = 0; i < canvas.width; i += 10) ctx.lineTo(i, getH(scrollX + i) - 5);
ctx.stroke();
// Items & Trees
items.forEach(it => {
if (it.hit) return;
let sx = it.x - scrollX;
if (sx > -100 && sx < canvas.width + 100) {
if (it.type === 'tree') {
ctx.fillStyle = "#5d4037"; ctx.fillRect(sx - 8, it.y + 20, 16, 60);
ctx.fillStyle = "#27ae60"; ctx.beginPath(); ctx.arc(sx, it.y, 35, 0, Math.PI*2); ctx.fill();
} else {
ctx.fillStyle = it.type === 'coin' ? "gold" : "red";
ctx.beginPath(); ctx.arc(sx, it.y, 12, 0, Math.PI*2); ctx.fill();
}
}
});
// MONSTER TRUCK (Detailed)
ctx.save(); ctx.translate(car.x, car.y); ctx.rotate(car.rot);
// Body
ctx.fillStyle = "#e74c3c"; ctx.fillRect(-45, -30, 90, 40);
// Sheesha (Window)
ctx.fillStyle = "#81ecec"; ctx.fillRect(5, -25, 30, 15);
// Lights
ctx.fillStyle = "yellow"; ctx.fillRect(35, -15, 12, 8);
// Huge Wheels
ctx.fillStyle = "#2d3436";
ctx.beginPath(); ctx.arc(-35, 25, 25, 0, Math.PI*2); ctx.fill();
ctx.beginPath(); ctx.arc(35, 25, 25, 0, Math.PI*2); ctx.fill();
ctx.restore();
}
const g = document.getElementById('gBtn'), b = document.getElementById('bBtn');
const start = (e) => { e.preventDefault(); gas = true; if(audioCtx.state==='suspended')audioCtx.resume(); };
g.ontouchstart = start; g.ontouchend = () => gas = false;
b.ontouchstart = (e) => { e.preventDefault(); brake = true; }; b.ontouchend = () => brake = false;
function loop() { update(); draw(); requestAnimationFrame(loop); }
loop();
</script>
</body>
</html>
Landing Page
This ad does not have a landing page available
Network Timeline
Performance Summary
1
Requests
1
Domains
7KB
Transfer Size
7KB
Content Size
223.0ms
Dom Content Loaded
280.0ms
First Paint
223.0ms
Load Time
Domain Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...
Timings (ms)
Loading...
Total Time
Loading...
Content Breakdown
Transfer Size (bytes)
Loading...
Content Size (bytes)
Loading...
Header Size (bytes)
Loading...
Requests
Loading...