346x407 HTML ad preview

Live Preview

Tag didn’t load? Click here and let us know!
346x407
2.22 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="ar" dir="rtl">
<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;
            touch-action: manipulation;
        }
        body {
            margin: 0;
            background: #0f172a;
            color: #fff;
            font-family: sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }
        h2 {
            margin: 5px 0 5px 0;
            font-size: 20px;
            color: #38bdf8;
        }
        #info-board {
            display: flex;
            justify-content: space-between;
            width: 340px;
            font-size: 15px;
            margin-bottom: 8px;
            color: #94a3b8;
            font-weight: bold;
        }
        #info-board span {
            color: #38bdf8;
        }
        canvas {
            background: #1e293b;
            border: 3px solid #38bdf8;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.5);
            display: block;
        }
        #controls {
            display: flex;
            justify-content: space-between;
            width: 340px;
            margin-top: 15px;
        }
        .control-btn {
            flex: 1;
            padding: 20px;
            font-size: 24px;
            background: #38bdf8;
            color: #0f172a;
            border: none;
            border-radius: 12px;
            margin: 0 8px;
            font-weight: bold;
            box-shadow: 0 4px 10px rgba(56, 189, 248, 0.3);
            cursor: pointer;
            outline: none;
        }
        .control-btn:active, .control-btn.active {
            background: #0284c7;
            transform: scale(0.95);
        }
    </style>
</head>
<body>

    <h2>لعبة تفادي العقبات</h2>
    <div id="info-board">
        <div>النقاط: <span id="score">0</span></div>
        <div>المرحلة: <span id="level">1</span></div>
    </div>

    <canvas id="gameCanvas" width="340" height="400"></canvas>

    <div id="controls">
        <button class="control-btn" id="leftBtn">◀</button>
        <button class="control-btn" id="rightBtn">▶</button>
    </div>

    <script>
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");
        const scoreDisplay = document.getElementById("score");
        const levelDisplay = document.getElementById("level");

        // إعدادات اللاعب
        let player = {
            x: 150,
            y: 340,
            width: 40,
            height: 20,
            speed: 6,
            color: "#38bdf8"
        };

        // إعدادات العائق
        let obstacle = {
            x: Math.random() * 310,
            y: -30,
            width: 30,
            height: 30,
            speed: 3.5,
            color: "#f43f5e"
        };

        let score = 0;
        let level = 1;
        let isGameOver = false;
        let movingLeft = false;
        let movingRight = false;

        // ربط أزرار التحكم باللمس والماوس بدقة
        const leftBtn = document.getElementById("leftBtn");
        const rightBtn = document.getElementById("rightBtn");

        leftBtn.addEventListener("touchstart", (e) => { e.preventDefault(); movingLeft = true; leftBtn.classList.add("active"); });
        leftBtn.addEventListener("touchend", (e) => { e.preventDefault(); movingLeft = false; leftBtn.classList.remove("active"); });
        leftBtn.addEventListener("mousedown", () => { movingLeft = true; });
        leftBtn.addEventListener("mouseup", () => { movingLeft = false; });
        leftBtn.addEventListener("mouseleave", () => { movingLeft = false; });

        rightBtn.addEventListener("touchstart", (e) => { e.preventDefault(); movingRight = true; rightBtn.classList.add("active"); });
        rightBtn.addEventListener("touchend", (e) => { e.preventDefault(); movingRight = false; rightBtn.classList.remove("active"); });
        rightBtn.addEventListener("mousedown", () => { movingRight = true; });
        rightBtn.addEventListener("mouseup", () => { movingRight = false; });
        rightBtn.addEventListener("mouseleave", () => { movingRight = false; });

        // تحديث منطق اللعبة
        function update() {
            if (isGameOver) return;

            // حركة اللاعب مع الالتزام بحدود الـ Canvas تماماً
            if (movingLeft && player.x > 0) {
                player.x -= player.speed;
            }
            if (movingRight && player.x < canvas.width - player.width) {
                player.x += player.speed;
            }

            // حركة العائق للأسفل
            obstacle.y += obstacle.speed;

            // إذا تجاوز العائق الشاشة إلى الأسفل
            if (obstacle.y > canvas.height) {
                obstacle.y = -30;
                obstacle.x = Math.random() * (canvas.width - obstacle.width);
                score++;
                scoreDisplay.textContent = score;

                // حساب وتحديث المرحلة بدقة
                let newLevel = Math.floor(score / 10) + 1;
                if (newLevel > level) {
                    level = newLevel;
                    levelDisplay.textContent = level;
                    // زيادة تدريجية ومدروسة للسرعة حتى لا تصبح اللعبة مستحيلة فجأة
                    obstacle.speed += 0.8;
                }
            }

            // فحص الاصطدام (خسارة)
            if (
                player.x < obstacle.x + obstacle.width &&
                player.x + player.width > obstacle.x &&
                player.y < obstacle.y + obstacle.height &&
                player.y + player.height > obstacle.y
            ) {
                isGameOver = true;
            }
        }

        // رسم العناصر على الشاشة
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            if (!isGameOver) {
                // رسم اللاعب
                ctx.fillStyle = player.color;
                ctx.fillRect(player.x, player.y, player.width, player.height);

                // رسم العائق
                ctx.fillStyle = obstacle.color;
                ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
            } else {
                // شاشة نهاية اللعبة
                ctx.fillStyle = "#ffffff";
                ctx.font = "bold 22px sans-serif";
                ctx.textAlign = "center";
                ctx.fillText("انتهت اللعبة!", canvas.width / 2, canvas.height / 2 - 30);
                
                ctx.font = "16px sans-serif";
                ctx.fillStyle = "#94a3b8";
                ctx.fillText("النقاط النهائية: " + score, canvas.width / 2, canvas.height / 2 + 5);
                ctx.fillText("المرحلة التي وصلت إليها: " + level, canvas.width / 2, canvas.height / 2 + 30);
                
                ctx.fillStyle = "#38bdf8";
                ctx.font = "13px sans-serif";
                ctx.fillText("حدث الصفحة لإعادة المحاولة", canvas.width / 2, canvas.height / 2 + 65);
            }
        }

        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

Requests
Domains
8KB
Transfer Size
8KB
Content Size
96.0ms
Dom Content Loaded
188.0ms
First Paint
96.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