aligabr-cmd/-7-

مخزن مشاريع هاتفي الا الجي

<title>مغامرات جاسم - نسخة ماريو</title> <style> * { box-sizing: border-box; margin: 0; padding: 0 }

    body {
        background: #5C94FC;
        font-family: "Segoe UI", Tahoma, Arial, sans-serif;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 100vh;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    h1 {
        margin: 10px 0 8px;
        text-shadow: 3px 3px 0 #000;
        font-weight: 900;
    }

    .sub {
        opacity: .9;
        margin-bottom: 8px
    }

    .game-wrap {
        position: relative;
        width: 95vw;
        max-width: 1000px;
        aspect-ratio: 16/9;
        border: 4px solid #8B4513;
        border-radius: 12px;
        overflow: hidden;
        background: #63adff;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .35);
    }

    canvas {
        width: 100%;
        height: 100%;
        display: block;
        image-rendering: pixelated;
    }

    .hud {
        position: absolute;
        inset: 10px 10px auto 10px;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        pointer-events: none;
        font-weight: 800;
        text-shadow: 1px 1px 2px #000;
    }

    .hud .left,
    .hud .right {
        display: flex;
        gap: 14px
    }

    .badge {
        background: rgba(0, 0, 0, .45);
        padding: 6px 10px;
        border-radius: 8px;
        font-size: 16px
    }

    .msg {
        position: absolute;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 14px;
        background: rgba(0, 0, 0, .4);
        text-align: center;
        font-size: 32px;
        font-weight: 900;
        text-shadow: 3px 3px 0 #000;
        padding: 20px;
    }

    .msg small {
        font-size: 16px;
        opacity: .9
    }

    .mobile {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 18px;
        z-index: 5;
        gap: 10px;
        opacity: .92;
    }

    .pad {
        display: flex;
        gap: 10px
    }

    .btn {
        width: 64px;
        height: 64px;
        border: none;
        border-radius: 50%;
        background: rgba(255, 255, 255, .55);
        color: #222;
        font-size: 22px;
        font-weight: 800;
        box-shadow: 0 4px 0 rgba(0, 0, 0, .2);
    }

    .btn.jump {
        background: rgba(255, 90, 90, .8);
        color: #fff
    }

    .btn.fire {
        background: rgba(255, 200, 0, .9);
        color: #7a3
    }

    .btn.down {
        background: rgba(180, 255, 180, .9);
        color: #063
    }

    @media(min-width:900px) {
        .mobile {
            display: none
        }
    }

    .sharebar {
        margin: 8px 0 0;
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .sharebtn {
        border: none;
        background: #ffe08a;
        color: #5b3f00;
        font-weight: 800;
        padding: 8px 12px;
        border-radius: 8px;
        box-shadow: 0 3px 0 rgba(0, 0, 0, .2);
        cursor: pointer;
    }

    .overlay {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(0, 0, 0, .5);
        z-index: 9999;
        padding: 20px;
    }

    .card {
        background: #fff;
        color: #222;
        max-width: 92vw;
        border-radius: 12px;
        padding: 16px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .35);
    }

    .card h3 {
        margin-bottom: 8px
    }

    .row {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap
    }

    .urlbox {
        width: 320px;
        max-width: 80vw;
        padding: 6px 8px;
        border: 1px solid #ccc;
        border-radius: 6px
    }

    .qr {
        width: 260px;
        height: 260px;
        border: 1px solid #ddd
    }

    .close {
        margin-top: 10px;
        background: #444;
        color: #fff
    }
</style>

🍄 مغامرات جاسم 🍄

مراحل طويلة، أنابيب انتقال، نقاط حفظ، صناديق مكافآت، قفز متدرّج، ورصاص بمفتاح Shift

<div class="sharebar">
    <button id="shareOpen" class="sharebtn">🔗 مشاركة / QR</button>
</div>

<div class="game-wrap">
    <canvas id="game"></canvas>
    <div class="hud">
        <div class="left">
            <div class="badge">النقاط: <span id="score">0</span></div>
            <div class="badge">الأرواح: <span id="lives">3</span></div>
        </div>
        <div class="right">
            <div class="badge">المستوى: <span id="level">1</span></div>
        </div>
    </div>
    <div id="msg" class="msg"></div>
</div>

<div class="mobile">
    <div class="pad">
        <button class="btn" id="left">◀</button>
        <button class="btn down" id="down">▼</button>
        <button class="btn" id="right">▶</button>
    </div>
    <div class="pad">
        <button class="btn jump" id="jump">⤒</button>
        <button class="btn fire" id="fire">✶</button>
    </div>
</div>

<div id="overlay" class="overlay">
    <div class="card">
        <h3>مشاركة اللعبة</h3>
        <div class="row" style="margin-bottom:8px">
            <input id="pageUrl" class="urlbox" readonly />
            <button id="copyLink" class="sharebtn">نسخ الرابط</button>
            <button id="nativeShare" class="sharebtn">مشاركة</button>
        </div>
        <div class="row">
            <img id="qrImg" class="qr" alt="QR" />
            <div style="max-width:320px; font-size:14px; line-height:1.5">
                ملاحظة: يعمل QR عند استضافة الملف على الإنترنت (مثل GitHub Pages).
                إن كان الرابط يبدأ بـ file:// فلن يفتح على الجوال. ارفع الملف ثم افتح هذه النافذة مجدداً ليتولّد QR
                صالح.
            </div>
        </div>
        <button id="closeOverlay" class="sharebtn close">إغلاق</button>
    </div>
</div>

<script>
    // إعدادات أساسية
    const canvas = document.getElementById('game');
    const ctx = canvas.getContext('2d');
    canvas.width = 960;
    canvas.height = 540;

    // HUD وعناصر الرسائل
    const elScore = document.getElementById('score');
    const elLives = document.getElementById('lives');
    const elLevel = document.getElementById('level');
    const elMsg = document.getElementById('msg');

    // مشاركة/QR
    const overlay = document.getElementById('overlay');
    const shareOpen = document.getElementById('shareOpen');
    const copyLink = document.getElementById('copyLink');
    const nativeShare = document.getElementById('nativeShare');
    const pageUrl = document.getElementById('pageUrl');
    const qrImg = document.getElementById('qrImg');
    const closeOverlay = document.getElementById('closeOverlay');
    function openShare() {
        const url = location.href;
        pageUrl.value = url;
        qrImg.src = '