HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
608x346
50.9 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="bn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>সোমেন আলটিমেট ৩ডি রেসার</title>
    <style>
        body {
            margin: 0;
            background: #0b2e13;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            color: white;
            font-family: Arial, sans-serif;
            flex-direction: column;
            overflow: hidden;
            touch-action: manipulation;
        }
        .game-container {
            position: relative;
            width: 95vw;
            max-width: 600px;
        }
        canvas {
            background: #1e4620;
            border: 4px solid #00ff66;
            border-radius: 15px;
            box-shadow: 0 0 35px rgba(0, 255, 102, 0.4);
            display: block;
            width: 100%;
            height: auto;
            aspect-ratio: 16 / 9;
        }
        .btn-ui {
            position: absolute;
            top: 55%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 15px 40px;
            font-size: 22px;
            font-weight: bold;
            background: linear-gradient(45deg, #ffcc00, #00ff66);
            color: #000;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            box-shadow: 0 0 25px rgba(0, 255, 102, 0.7);
            z-index: 10;
        }
        .controls {
            display: flex;
            justify-content: space-around;
            width: 100%;
            max-width: 400px;
            margin-top: 20px;
        }
        .btn {
            width: 80px;
            height: 80px;
            background: rgba(0, 255, 102, 0.15);
            border: 3px solid #00ff66;
            border-radius: 50%;
            color: #00ff66;
            font-size: 38px;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 0 15px rgba(0, 255, 102, 0.3);
            user-select: none;
            touch-action: manipulation;
        }
        .btn:active {
            background: #00ff66;
            color: #000;
            box-shadow: 0 0 30px rgba(0, 255, 102, 0.9);
        }
    </style>
</head>
<body>

    <div class="game-container">
        <canvas id="gameCanvas" width="800" height="450"></canvas>
        <button id="startBtn" class="btn-ui" onclick="startGame()">রেস শুরু করুন 🏁</button>
        <button id="restartBtn" class="btn-ui" style="display:none;" onclick="resetGame()">আবার খেলুন 🔄</button>
    </div>

    <div class="controls">
        <div class="btn" id="leftBtn">←</div>
        <div class="btn" id="rightBtn">→</div>
    </div>

<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const startBtn = document.getElementById("startBtn");
const restartBtn = document.getElementById("restartBtn");
const leftBtn = document.getElementById("leftBtn");
const rightBtn = document.getElementById("rightBtn");

let bikeX, bikeSpeed, score, gameState, obstacles, gameTick, speedMultiplier;
const horizonY = 140; // রাস্তা আরও ওপরে তোলা হয়েছে যাতে লং রুট লাগে
const bikeY = 370;

let isLeftPressed = false;
let isRightPressed = false;

gameState = 'WELCOME';

leftBtn.addEventListener("touchstart", (e) => { e.preventDefault(); isLeftPressed = true; });
leftBtn.addEventListener("touchend", () => isLeftPressed = false);
rightBtn.addEventListener("touchstart", (e) => { e.preventDefault(); isRightPressed = true; });
rightBtn.addEventListener("touchend", () => isRightPressed = false);

function init() {
    bikeX = canvas.width / 2;
    bikeSpeed = 0;
    score = 0;
    obstacles = [];
    gameTick = 0;
    speedMultiplier = 1;
}

function startGame() {
    startBtn.style.display = "none";
    gameState = 'PLAYING';
    init();
}

function resetGame() {
    restartBtn.style.display = "none";
    gameState = 'PLAYING';
    init();
}

// নতুন উন্নত ৩ডি সিনারিও (ঘাস, ফুল ও লং রুট)
function draw3DScene() {
    gameTick++;
    
    // ১. সুন্দর সকালের আকাশ (কালো রঙ বদলে সায়ান-ব্লু গ্রেডিয়েন্ট)
    let skyGrad = ctx.createLinearGradient(0, 0, 0, horizonY);
    skyGrad.addColorStop(0, "#00c6ff");
    skyGrad.addColorStop(1, "#0072ff");
    ctx.fillStyle = skyGrad;
    ctx.fillRect(0, 0, canvas.width, horizonY);

    // দূর পাহাড়ের ৩ডি আভাস
    ctx.fillStyle = "#0d47a1";
    ctx.beginPath();
    ctx.moveTo(0, horizonY);
    ctx.lineTo(200, horizonY - 40);
    ctx.lineTo(400, horizonY);
    ctx.lineTo(600, horizonY - 30);
    ctx.lineTo(800, horizonY);
    ctx.fill();

    // ২. ৩ডি ঘাস এবং ফুলের বাগান ইফেক্ট
    let speedOffset = Math.floor(gameTick * 0.3) % 2;
    for (let y = horizonY; y < canvas.height; y += 8) {
        let isLight = (Math.floor(y / 8) % 2 === speedOffset);
        ctx.fillStyle = isLight ? "#2e7d32" : "#1b5e20"; // ঘাসের রঙ
        ctx.fillRect(0, y, canvas.width, 8);

        // ৩ডি ফুল ছিটানো (স্পিডের সাথে ফুলগুলো কাছে আসবে)
        let percent = (y - horizonY) / (canvas.height - horizonY);
        if (Math.sin(y + gameTick * 0.05) > 0.8) {
            ctx.fillStyle = (Math.floor(y)%3 === 0) ? "#ffeb3b" : "#ff4081"; // হলুদ ও লাল ফুল
            ctx.beginPath();
            ctx.arc(40 + percent * 200 + (y % 50), y + 4, 2 + percent * 4, 0, Math.PI * 2);
            ctx.arc(canvas.width - 40 - percent * 200 - (y % 50), y + 4, 2 + percent * 4, 0, Math.PI * 2);
            ctx.fill();
        }
    }

    // ৩. ব্যাকগ্রাউন্ডে মনস্টার সাইজের নিয়ন "SOUMEN" ব্র্যান্ডিং
    ctx.save();
    ctx.textAlign = "center";
    ctx.shadowBlur = 20;
    ctx.shadowColor = "#ffffff";
    ctx.fillStyle = "rgba(255, 255, 255, 0.25)";
    ctx.font = "bold 130px Impact, Arial Black, sans-serif";
    ctx.fillText("SOUMEN", canvas.width / 2, horizonY + 10);
    ctx.restore();

    // ৪. লং রুট ৩ডি রোড (দিগন্ত থেকে শুরু হওয়া লম্বা পিচ রাস্তা)
    ctx.fillStyle = "#37474f"; 
    ctx.beginPath();
    ctx.moveTo(canvas.width / 2 - 20, horizonY); // দিগন্তে খুবই সরু রুট
    ctx.lineTo(canvas.width / 2 + 20, horizonY);
    ctx.lineTo(canvas.width / 2 + 280, canvas.height); // সামনে এসে চওড়া
    ctx.lineTo(canvas.width / 2 - 280, canvas.height);
    ctx.closePath();
    ctx.fill();

    // রাস্তার মাঝখানের ড্যাশবোর্ড হোয়াইট লাইন (৩ডি স্ক্রোলিং)
    let lineToggle = Math.floor(gameTick * 0.5) % 2;
    ctx.strokeStyle = "#ffffff";
    for (let y = horizonY; y < canvas.height; y += 12) {
        if ((Math.floor(y / 12) % 2 === lineToggle)) {
            let percent = (y - horizonY) / (canvas.height - horizonY);
            let lineWidth = 1 + percent * 8;
            ctx.lineWidth = lineWidth;
            ctx.beginPath();
            ctx.moveTo(canvas.width / 2, y);
            ctx.lineTo(canvas.width / 2, y + 10);
            ctx.stroke();
        }
    }

    // রাস্তার পাশের লাল-সাদা কার্ব/বর্ডার
    for (let y = horizonY; y < canvas.height; y += 6) {
        let percent = (y - horizonY) / (canvas.height - horizonY);
        let roadWidth = 40 + percent * 520;
        let leftX = (canvas.width / 2) - (roadWidth / 2);
        let rightX = (canvas.width / 2) + (roadWidth / 2);
        let kerbWidth = 3 + percent * 22;

        ctx.fillStyle = (Math.floor(y / 6) % 2 === lineToggle) ? "#ffffff" : "#d32f2f";
        ctx.fillRect(leftX - kerbWidth, y, kerbWidth, 6);
        ctx.fillRect(rightX, y, kerbWidth, 6);
    }
}

// স্পোর্টস বাইকের ৩ডি রিয়ার ভিউ
function drawPlayerBike(x, y) {
    ctx.save();
    ctx.shadowBlur = 15;
    ctx.shadowColor = "#00ff66";

    // মোটা রেসিং চাকা
    ctx.fillStyle = "#111";
    ctx.fillRect(x - 14, y + 10, 28, 35);
    
    // সবুজ নিয়ন রিম
    ctx.fillStyle = "#00ff66";
    ctx.fillRect(x - 2, y + 15, 4, 25);

    // রেসিং বডি কিট
    ctx.fillStyle = "#212121";
    ctx.strokeStyle = "#00ff66";
    ctx.lineWidth = 2.5;
    ctx.beginPath();
    ctx.moveTo(x - 20, y + 10);
    ctx.lineTo(x - 12, y - 20); 
    ctx.lineTo(x + 12, y - 20);
    ctx.lineTo(x + 20, y + 10);
    ctx.closePath();
    ctx.fill(); ctx.stroke();

    // উজ্জ্বল সবুজ রঙের প্যানেল
    ctx.fillStyle = "#00ff66";
    ctx.beginPath();
    ctx.moveTo(x - 14, y - 8);
    ctx.lineTo(x, y - 28); 
    ctx.lineTo(x + 14, y - 8);
    ctx.closePath();
    ctx.fill();

    // রিয়ার স্পোর্টস টেল লাইট
    ctx.fillStyle = "#ff1744";
    ctx.fillRect(x - 8, y - 32, 16, 6);

    // লুকিং গ্লাস
    ctx.fillStyle = "#00ff66";
    ctx.fillRect(x - 30, y - 38, 10, 4);
    ctx.fillRect(x + 20, y - 38, 10, 4);

    ctx.restore();
}

// ৩ডি লং রুটে ট্রাফিকের গাড়ি
function drawObstacles() {
    for (let i = obstacles.length - 1; i >= 0; i--) {
        let obs = obstacles[i];
        obs.z -= 0.012 * speedMultiplier; // দূর থেকে কাছে আসার স্পিড

        if (obs.z <= 0) {
            obstacles.splice(i, 1);
            score += 10;
            if (score % 60 === 0) speedMultiplier += 0.15;
            continue;
        }

        let percent = 1 - obs.z; 
        if (percent < 0) percent = 0;

        let targetY = horizonY + percent * (canvas.height - horizonY);
        let roadWidth = 40 + percent * 520;
        let targetX = (canvas.width / 2) + (obs.trackOffset * roadWidth);
        
        let obsWidth = 10 + percent * 95;
        let obsHeight = 8 + percent * 55;

        // রেসিং কার (পিছন থেকে ভিউ)
        ctx.save();
        ctx.shadowBlur = 12;
        ctx.shadowColor = "#ff3d00";
        
        ctx.fillStyle = "#3e2723";
        ctx.strokeStyle = "#ff3d00";
        ctx.lineWidth = 2;
        ctx.fillRect(targetX - obsWidth / 2, targetY - obsHeight, obsWidth, obsHeight);

        // শত্রু গাড়ির ব্রেক লাইট
        ctx.fillStyle = "#ff3d00";
        ctx.fillRect(targetX - obsWidth / 2 + 3, targetY - obsHeight + 6, obsWidth * 0.22, 5);
        ctx.fillRect(targetX + obsWidth / 2 - obsWidth * 0.22 - 3, targetY - obsHeight + 6, obsWidth * 0.22, 5);

        ctx.restore();

        // ক্র্যাশ চেক
        if (percent > 0.85 && percent < 0.97) {
            let bikeLeft = bikeX - 25;
            let bikeRight = bikeX + 25;
            let obsLeft = targetX - obsWidth / 2;
            let obsRight = targetX + obsWidth / 2;

            if (bikeRight > obsLeft && bikeLeft < obsRight) {
                gameState = 'GAMEOVER';
                restartBtn.style.display = "block";
            }
        }
    }
}

function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (gameState === 'WELCOME') {
        draw3DScene();
        ctx.textAlign = "center";
        ctx.fillStyle = "#ffffff";
        ctx.font = "bold 24px sans-serif";
        ctx.fillText("সোমেন আলটিমেট ৩ডি রেসার", canvas.width / 2, canvas.height / 2 + 40);
    } 
    
    else if (gameState === 'PLAYING') {
        draw3DScene();

        if (isLeftPressed) bikeSpeed = -6;
        else if (isRightPressed) bikeSpeed = 6;
        else bikeSpeed = 0;

        bikeX += bikeSpeed;
        
        if (bikeX < canvas.width / 2 - 240) bikeX = canvas.width / 2 - 240;
        if (bikeX > canvas.width / 2 + 240) bikeX = canvas.width / 2 + 240;

        if (gameTick % 45 === 0) {
            let offset = (Math.random() * 0.68) - 0.34; 
            obstacles.push({ z: 1.0, trackOffset: offset });
        }

        drawObstacles();
        drawPlayerBike(bikeX, bikeY);

        // গেম ড্যাশবোর্ড UI
        ctx.fillStyle = "#ffffff";
        ctx.font = "bold 18px sans-serif";
        ctx.textAlign = "left";
        ctx.fillText("👤 রেসার: সোমেন", 20, 35);
        ctx.fillText("🏆 স্কোর: " + score, 20, 65);
        ctx.fillText("⚡ গতি: " + Math.floor(speedMultiplier * 160) + " KM/H", canvas.width - 170, 35);
    } 
    
    else if (gameState === 'GAMEOVER') {
        ctx.fillStyle = "rgba(0, 0, 0, 0.85)";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        
        ctx.textAlign = "center";
        ctx.fillStyle = "#ff1744";
        ctx.font = "bold 45px sans-serif";
        ctx.fillText("ক্র্যাশ! গেম ওভার", canvas.width / 2, canvas.height / 2 - 20);
        
        ctx.fillStyle = "#ffffff";
        ctx.font = "20px sans-serif";
        ctx.fillText("সোমেন, আপনার ফাইনাল স্কোর: " + score, canvas.width / 2, canvas.height / 2 + 25);
    }

    requestAnimationFrame(gameLoop);
}

gameLoop();
</script>

</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
14KB
Transfer Size
14KB
Content Size
139.0ms
Dom Content Loaded
196.0ms
First Paint
140.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