HTML ad tag preview - Powered by Ad Reform

Live Preview

Tag didn’t load? Click here and let us know!
1920x1080
114 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>
        * {
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
        }
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #0b2e13;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        #gameCanvas {
            width: 100%;
            height: 100%;
            display: block;
        }
        /* ফুল স্ক্রিন মেনু ও বোতাম */
        .ui-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(11, 46, 19, 0.9);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 10;
        }
        .menu-title {
            font-size: 3rem;
            color: #00ff66;
            margin-bottom: 5px;
            font-weight: bold;
            text-shadow: 0 0 20px rgba(0,255,102,0.6);
        }
        .menu-subtitle {
            font-size: 1.2rem;
            color: #fff;
            margin-bottom: 30px;
        }
        .mode-container {
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 80%;
            max-width: 300px;
        }
        .mode-btn {
            padding: 15px;
            font-size: 18px;
            font-weight: bold;
            border: 2px solid #00ff66;
            border-radius: 30px;
            background: rgba(0, 255, 102, 0.1);
            color: #00ff66;
            cursor: pointer;
            box-shadow: 0 0 15px rgba(0, 255, 102, 0.3);
            transition: 0.2s;
            text-align: center;
        }
        .mode-btn:active {
            background: #00ff66;
            color: #000;
            box-shadow: 0 0 25px #00ff66;
        }
        /* গেমের ভেতরের টাচ প্যাড বাটন */
        .game-controls {
            position: absolute;
            bottom: 30px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 40px;
            pointer-events: none; /* ক্যানভাসে ক্লিক আটকাবে না */
        }
        .ctrl-btn {
            width: 90px;
            height: 90px;
            background: rgba(0, 255, 102, 0.2);
            border: 3px solid #00ff66;
            border-radius: 50%;
            color: #00ff66;
            font-size: 40px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: 0 0 20px rgba(0, 255, 102, 0.4);
            pointer-events: auto; /* বাটনগুলোতে টাচ কাজ করবে */
            touch-action: manipulation;
        }
        .ctrl-btn:active {
            background: #00ff66;
            color: #000;
        }
    </style>
</head>
<body>

    <canvas id="gameCanvas"></canvas>

    <div id="mainMenu" class="ui-screen">
        <div class="menu-title">SOUMEN RACER</div>
        <div class="menu-subtitle">মোড সিলেক্ট করে রেস শুরু করো ভাই!</div>
        <div class="mode-container">
            <div class="mode-btn" onclick="selectMode('solo')">👤 SOLO MODE (Normal)</div>
            <div class="mode-btn" onclick="selectMode('medium')">⚡ MEDIUM MODE (Fast)</div>
            <div class="mode-btn" onclick="selectMode('fast')">🔥 FAST MODE (Insane)</div>
        </div>
    </div>

    <div id="gameOverScreen" class="ui-screen" style="display: none;">
        <div class="menu-title" style="color: #ff1744; text-shadow: 0 0 20px rgba(255,23,68,0.6);">ক্র্যাশ! গেম ওভার</div>
        <div id="finalScore" class="menu-subtitle" style="font-size: 1.5rem;"></div>
        <div class="mode-container">
            <div class="mode-btn" style="border-color: #ffcc00; color: #ffcc00;" onclick="showMenu()">🔄 মেনুতে ফিরে যান</div>
        </div>
    </div>

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

<script>
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const mainMenu = document.getElementById("mainMenu");
const gameOverScreen = document.getElementById("gameOverScreen");
const finalScoreText = document.getElementById("finalScore");

const leftBtn = document.getElementById("leftBtn");
const rightBtn = document.getElementById("rightBtn");

let bikeX, bikeSpeed, score, gameState, obstacles, gameTick, baseSpeed, speedMultiplier;
let currentMode = 'solo';
const horizonY = 220; // লং রুটের জন্য হরাইজন ওপরে রাখা হয়েছে
let bikeY;

let isLeftPressed = false;
let isRightPressed = false;

// স্ক্রিন সাইজ অনুযায়ী ক্যানভাস রিসাইজ করা (Full Screen Display)
function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    bikeY = canvas.height - 120; // স্ক্রিনের নিচে বাইক পজিশন
    if(gameState === 'PLAYING') bikeX = canvas.width / 2;
}
window.addEventListener('resize', resizeCanvas);
resizeCanvas();

// টাচ কন্ট্রোল লিসেনার
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 showMenu() {
    gameOverScreen.style.display = "none";
    mainMenu.style.display = "flex";
    gameState = 'WELCOME';
}

function selectMode(mode) {
    currentMode = mode;
    mainMenu.style.display = "none";
    gameOverScreen.style.display = "none";
    
    // মোড অনুযায়ী আলাদা আলাদা বেস স্পিড
    if (mode === 'solo') baseSpeed = 6;
    else if (mode === 'medium') baseSpeed = 10;
    else if (mode === 'fast') baseSpeed = 15;

    initGame();
    gameState = 'PLAYING';
}

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

// চওড়া এবং লং রুটের ৩ডি সিনারিও
function draw3DScene() {
    gameTick++;
    
    // ১. সুন্দর ফুল স্ক্রিন আকাশ ও পাহাড়
    let skyGrad = ctx.createLinearGradient(0, 0, 0, horizonY);
    skyGrad.addColorStop(0, "#00d4ff");
    skyGrad.addColorStop(1, "#090979");
    ctx.fillStyle = skyGrad;
    ctx.fillRect(0, 0, canvas.width, horizonY);

    // পাহাড় আঁকা
    ctx.fillStyle = "#101052";
    ctx.beginPath();
    ctx.moveTo(0, horizonY);
    ctx.lineTo(canvas.width * 0.25, horizonY - 60);
    ctx.lineTo(canvas.width * 0.5, horizonY);
    ctx.lineTo(canvas.width * 0.75, horizonY - 40);
    ctx.lineTo(canvas.width, horizonY);
    ctx.fill();

    // ২. ফুল ও ঘাসের মাঠ (৩ডি টেক্সচার স্ক্রোলিং)
    let speedOffset = Math.floor(gameTick * (baseSpeed * 0.05)) % 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.08) > 0.75) {
            ctx.fillStyle = (Math.floor(y) % 2 === 0) ? "#ffeb3b" : "#ff4081";
            ctx.beginPath();
            ctx.arc(30 + percent * (canvas.width * 0.2) + (y % 40), y + 4, 3 + percent * 5, 0, Math.PI * 2);
            ctx.arc(canvas.width - 30 - percent * (canvas.width * 0.2) - (y % 40), y + 4, 3 + percent * 5, 0, Math.PI * 2);
            ctx.fill();
        }
    }

    // ৩. ব্যাকগ্রাউন্ডে মনস্টার সাইজের নিয়ন "SOUMEN" লেখা
    ctx.save();
    ctx.textAlign = "center";
    ctx.shadowBlur = 25;
    ctx.shadowColor = "#00ff66";
    ctx.fillStyle = "rgba(255, 255, 255, 0.2)";
    ctx.font = "bold " + (canvas.width * 0.12) + "px Impact, Arial Black, sans-serif";
    ctx.fillText("SOUMEN", canvas.width / 2, horizonY + 30);
    ctx.restore();

    // ৪. ৩ডি হাইওয়ে রুট (অনেক বেশি লং এবং চওড়া/Wide Road)
    ctx.fillStyle = "#37474f";
    ctx.beginPath();
    ctx.moveTo(canvas.width / 2 - 30, horizonY); // দিগন্তে শুরু
    ctx.lineTo(canvas.width / 2 + 30, horizonY);
    ctx.lineTo(canvas.width / 2 + (canvas.width * 0.42), canvas.height); // নিচে এসে অনেক চওড়া
    ctx.lineTo(canvas.width / 2 - (canvas.width * 0.42), canvas.height);
    ctx.closePath();
    ctx.fill();

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

    // রাস্তার দুই পাশের লাল-সাদা ৩ডি বর্ডার (Kerbs)
    for (let y = horizonY; y < canvas.height; y += 6) {
        let percent = (y - horizonY) / (canvas.height - horizonY);
        let roadWidth = 60 + percent * (canvas.width * 0.84);
        let leftX = (canvas.width / 2) - (roadWidth / 2);
        let rightX = (canvas.width / 2) + (roadWidth / 2);
        let kerbWidth = 4 + percent * 25;

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

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

    // মোটা চওড়া টায়ার
    ctx.fillStyle = "#111";
    ctx.fillRect(x - 16, y + 15, 32, 40);
    
    // নিয়ন রিম লাইট
    ctx.fillStyle = "#00ff66";
    ctx.fillRect(x - 3, y + 20, 6, 30);

    // বডি কিট
    ctx.fillStyle = "#1a1a1a";
    ctx.strokeStyle = "#00ff66";
    ctx.lineWidth = 3;
    ctx.beginPath();
    ctx.moveTo(x - 24, y + 15);
    ctx.lineTo(x - 14, y - 25);
    ctx.lineTo(x + 14, y - 25);
    ctx.lineTo(x + 24, y + 15);
    ctx.closePath();
    ctx.fill(); ctx.stroke();

    // গ্রিন নিয়ন প্যানেল
    ctx.fillStyle = "#00ff66";
    ctx.beginPath();
    ctx.moveTo(x - 16, y - 10);
    ctx.lineTo(x, y - 35);
    ctx.lineTo(x + 16, y - 10);
    ctx.closePath();
    ctx.fill();

    // লাল রেসিং টেল লাইট
    ctx.fillStyle = "#ff1744";
    ctx.fillRect(x - 10, y - 40, 20, 7);

    // লুকিং গ্লাস
    ctx.fillStyle = "#00ff66";
    ctx.fillRect(x - 36, y - 45, 12, 5);
    ctx.fillRect(x + 24, y - 45, 12, 5);

    ctx.restore();
}

// বাধার ৩ডি প্রজেকশন
function drawObstacles() {
    let currentSpeed = baseSpeed * speedMultiplier;
    
    for (let i = obstacles.length - 1; i >= 0; i--) {
        let obs = obstacles[i];
        obs.z -= 0.0015 * currentSpeed; // স্পিড অনুযায়ী কাছে আসবে

        if (obs.z <= 0) {
            obstacles.splice(i, 1);
            score += 10;
            // স্কোর বাড়ার সাথে সাথে সামান্য গতি বৃদ্ধি
            if (score % 70 === 0) speedMultiplier += 0.1;
            continue;
        }

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

        let targetY = horizonY + percent * (canvas.height - horizonY);
        let roadWidth = 60 + percent * (canvas.width * 0.84);
        let targetX = (canvas.width / 2) + (obs.trackOffset * roadWidth);
        
        let obsWidth = 15 + percent * 110;
        let obsHeight = 10 + percent * 65;

        // ট্রাফিকের রেসিং কার
        ctx.save();
        ctx.shadowBlur = 15;
        ctx.shadowColor = "#ff3d00";
        ctx.fillStyle = "#3e2723";
        ctx.strokeStyle = "#ff3d00";
        ctx.lineWidth = 2.5;
        ctx.fillRect(targetX - obsWidth / 2, targetY - obsHeight, obsWidth, obsHeight);

        // ব্রেক লাইট
        ctx.fillStyle = "#ff3d00";
        ctx.fillRect(targetX - obsWidth / 2 + 5, targetY - obsHeight + 8, obsWidth * 0.2, 6);
        ctx.fillRect(targetX + obsWidth / 2 - obsWidth * 0.2 - 5, targetY - obsHeight + 8, obsWidth * 0.2, 6);
        ctx.restore();

        // কলিশন বা ক্র্যাশ লজিক
        if (percent > 0.84 && percent < 0.98) {
            let bikeLeft = bikeX - 30;
            let bikeRight = bikeX + 30;
            let obsLeft = targetX - obsWidth / 2;
            let obsRight = targetX + obsWidth / 2;

            if (bikeRight > obsLeft && bikeLeft < obsRight) {
                gameState = 'GAMEOVER';
                finalScoreText.innerText = "সোমেন, আপনার ফাইনাল স্কোর: " + score;
                gameOverScreen.style.display = "flex";
            }
        }
    }
}

// গেম লুপ
function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (gameState === 'WELCOME') {
        draw3DScene();
    } 
    
    else if (gameState === 'PLAYING') {
        draw3DScene();

        // ডানে-বামে মুভমেন্ট স্পিড
        if (isLeftPressed) bikeSpeed = -8;
        else if (isRightPressed) bikeSpeed = 8;
        else bikeSpeed = 0;

        bikeX += bikeSpeed;
        
        // চওড়া রাস্তার সীমানা অনুযায়ী বাইক লক করা
        let maxTrackBound = canvas.width * 0.38;
        if (bikeX < canvas.width / 2 - maxTrackBound) bikeX = canvas.width / 2 - maxTrackBound;
        if (bikeX > canvas.width / 2 + maxTrackBound) bikeX = canvas.width / 2 + maxTrackBound;

        // ট্রাফিক কার স্পন করা
        if (gameTick % 40 === 0) {
            let offset = (Math.random() * 0.74) - 0.37; // পুরো চওড়া রাস্তায় ছড়াবে
            obstacles.push({ z: 1.0, trackOffset: offset });
        }

        drawObstacles();
        drawPlayerBike(bikeX, bikeY);

        // ফুল স্ক্রিন প্রিমিয়াম ড্যাশবোর্ড UI
        ctx.fillStyle = "#ffffff";
        ctx.font = "bold 20px sans-serif";
        ctx.textAlign = "left";
        ctx.fillText("👤 রেসার: সোমেন", 30, 45);
        ctx.fillText("🏆 স্কোর: " + score, 30, 80);
        
        let displayModeName = currentMode.toUpperCase();
        ctx.fillText("🎮 মোড: " + displayModeName, 30, 115);
        
        ctx.textAlign = "right";
        ctx.fillText("⚡ গতি: " + Math.floor(baseSpeed * speedMultiplier * 18) + " KM/H", canvas.width - 30, 45);
    }

    requestAnimationFrame(gameLoop);
}

// গেম স্টার্ট
showMenu();
gameLoop();
</script>

</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
17KB
Transfer Size
17KB
Content Size
162.0ms
Dom Content Loaded
296.0ms
First Paint
162.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