Adding a new HTML and CSS project

[priyagupta20044]

Hi, I want to add a netflix clone with html and css please assign this issue to me with the Hacktober label.

[duyanhmatconmenonao-a11y]

<title>Parkour Bựa Mobile</title> <style> body { margin: 0; overflow: hidden; /* Chống cuộn trang */ background-color: #1a1a1a; display: flex; justify-content: center; align-items: center; height: 100vh; color: white; font-family: monospace; touch-action: none; /* Chống zoom/kéo trên mobile */ } canvas { border: 2px solid #555; box-shadow: 0 0 20px rgba(0,0,0,0.8); max-width: 100%; max-height: 80vh; /* Chừa chỗ cho nút bấm */ } #tutorial { position: absolute; top: 10px; text-align: center; pointer-events: none; width: 100%; font-size: 14px; z-index: 10; }

    /* --- GIAO DIỆN NÚT BẤM CẢM ỨNG --- */
    #controls {
        position: absolute;
        bottom: 20px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        box-sizing: border-box;
        z-index: 20;
    }

    .btn {
        width: 70px;
        height: 70px;
        background: rgba(255, 255, 255, 0.2);
        border: 2px solid white;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        user-select: none; /* Không cho bôi đen */
        color: white;
        font-weight: bold;
    }

    .btn:active {
        background: rgba(255, 255, 255, 0.5);
        transform: scale(0.95);
    }

    .d-pad {
        display: flex;
        gap: 20px;
    }
</style>

<div id="tutorial">
    <h2>PARKOUR BỰA</h2>
    <p>PC: Mũi tên | Mobile: Bấm nút dưới</p>
</div>

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

<div id="controls">
    <div class="d-pad">
        <div class="btn" id="btnLeft">←</div>
        <div class="btn" id="btnRight">→</div>
    </div>
    <div class="btn" id="btnJump">↑</div>
</div>

<script> // --- KHỞI TẠO --- const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); // Chỉnh size phù hợp mobile hơn canvas.width = 800; canvas.height = 500; // Tự co giãn canvas theo màn hình điện thoại function resize() { let scale = Math.min(window.innerWidth / 800, (window.innerHeight * 0.8) / 500); canvas.style.width = (800 * scale) + 'px'; canvas.style.height = (500 * scale) + 'px'; } window.addEventListener('resize', resize); resize(); // --- CẤU HÌNH NHÂN VẬT --- const player = { x: 100, y: 100, w: 30, h: 30, vx: 0, vy: 0, speed: 5, jumpPower: -12, gravity: 0.6, grounded: false, color: '#ff4757' }; // --- CẤU HÌNH BẢN ĐỒ --- const platforms = [ {x: 0, y: 450, w: 200, h: 50}, {x: 250, y: 400, w: 100, h: 20}, {x: 400, y: 350, w: 120, h: 20}, {x: 600, y: 300, w: 80, h: 20}, {x: 750, y: 250, w: 200, h: 20}, {x: 500, y: 150, w: 100, h: 20}, {x: 200, y: 100, w: 150, h: 20}, ]; const trees = [ {x: 50, y: 450}, {x: 450, y: 350}, {x: 800, y: 250} ]; // --- XỬ LÝ PHÍM BẤM & CẢM ỨNG --- const keys = {}; // 1. Bàn phím PC document.addEventListener('keydown', (e) => keys[e.code] = true); document.addEventListener('keyup', (e) => keys[e.code] = false); // 2. Nút cảm ứng Mobile const btnLeft = document.getElementById('btnLeft'); const btnRight = document.getElementById('btnRight'); const btnJump = document.getElementById('btnJump'); // Hàm xử lý touch (dùng touchstart/touchend để mượt hơn click) function addTouch(elem, code) { elem.addEventListener('touchstart', (e) => { e.preventDefault(); keys[code] = true; }); elem.addEventListener('touchend', (e) => { e.preventDefault(); keys[code] = false; }); // Hỗ trợ cả chuột trên PC bấm vào nút ảo elem.addEventListener('mousedown', (e) => { keys[code] = true; }); elem.addEventListener('mouseup', (e) => { keys[code] = false; }); } addTouch(btnLeft, 'ArrowLeft'); addTouch(btnRight, 'ArrowRight'); addTouch(btnJump, 'Space'); // --- HÀM VẼ CÂY --- function drawTree(x, y) { ctx.fillStyle = '#8B4513'; ctx.fillRect(x, y - 60, 20, 60); ctx.fillStyle = '#228B22'; ctx.beginPath(); ctx.arc(x + 10, y - 60, 25, 0, Math.PI * 2); ctx.arc(x - 10, y - 80, 25, 0, Math.PI * 2); ctx.arc(x + 30, y - 80, 25, 0, Math.PI * 2); ctx.arc(x + 10, y - 100, 30, 0, Math.PI * 2); ctx.fill(); } // --- UPDATE --- function update() { if (keys['ArrowLeft']) player.vx = -player.speed; else if (keys['ArrowRight']) player.vx = player.speed; else player.vx = 0; if ((keys['Space'] || keys['ArrowUp']) && player.grounded) { player.vy = player.jumpPower; player.grounded = false; } player.vy += player.gravity; player.x += player.vx; player.y += player.vy; player.grounded = false; } // --- DRAW --- function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // Bầu trời let sky = ctx.createLinearGradient(0, 0, 0, canvas.height); sky.addColorStop(0, "#00a8ff"); sky.addColorStop(1, "#fbc531"); ctx.fillStyle = sky; ctx.fillRect(0, 0, canvas.width, canvas.height); // Đất ctx.fillStyle = '#44bd32'; platforms.forEach(p => { ctx.fillRect(p.x, p.y, p.w, p.h); if (player.vy > 0 && player.x + player.w > p.x && player.x < p.x + p.w && player.y + player.h > p.y && player.y + player.h < p.y + p.vy + 5) { player.vy = 0; player.y = p.y - player.h; player.grounded = true; } }); trees.forEach(t => drawTree(t.x, t.y)); // Player ctx.fillStyle = player.color; ctx.fillRect(player.x, player.y, player.w, player.h); ctx.fillStyle = 'white'; ctx.fillRect(player.x + 5, player.y + 5, 8, 8); ctx.fillRect(player.x + 18, player.y + 5, 8, 8); ctx.fillStyle = 'black'; ctx.fillRect(player.x + 7, player.y + 7, 4, 4); ctx.fillRect(player.x + 20, player.y + 7, 4, 4); if (player.y > canvas.height) { player.x = 100; player.y = 100; player.vy = 0; } // Lighting ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = 'rgba(0, 0, 0, 0.7)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.globalCompositeOperation = 'destination-out'; let light = ctx.createRadialGradient(player.x + player.w/2, player.y + player.h/2, 20, player.x + player.w/2, player.y + player.h/2, 150); light.addColorStop(0, 'rgba(0, 0, 0, 1)'); light.addColorStop(1, 'rgba(0, 0, 0, 0)'); ctx.fillStyle = light; ctx.beginPath(); ctx.arc(player.x + player.w/2, player.y + player.h/2, 150, 0, Math.PI*2); ctx.fill(); ctx.globalCompositeOperation = 'source-over'; } function loop() { update(); draw(); requestAnimationFrame(loop); } loop(); </script>