inlink.my — Publish project & file jadi link

Cara guna

3 langkah mudah untuk publish.

Dari kod atau file kepada link public — tanpa kerumitan.

Create

Buka project baru atau upload file media yang ingin digunakan.

Build

Masukkan template project yang dihasilkan oleh AI.

Publish

Dapatkan link public untuk share kepada pelanggan atau team.

Akaun Demo

Cuba tanpa daftar.

Masuk sebagai demo untuk lihat cara bina project, upload file, dan publish link. Sokong custom domain seperti kedaianda.com.

Jenis Project

Apa yang boleh anda bina?

Pelbagai jenis projek digital — pilih yang sesuai dengan keperluan anda.

🌐

Landing Page

Landing page untuk syarikat, produk, atau kempen pemasaran.

🪪

Bisnes Card

Kad perniagaan digital dengan butiran kenalan dan media sosial.

💌

Kad Ucapan

Kad ucapan interaktif untuk hari raya, kahwin, atau majlis khas.

🎮

Games

Mini games interaktif yang boleh dikongsi melalui link.

📋

Tempahan

Borang tempahan digital yang kemas dan mudah digunakan.

💼

Portfolio

Paparkan karya dan projek anda dengan penampilan profesional.

Demo

Cuba sendiri — lihat preview live.

Edit kod di sebelah kiri, lihat hasil di sebelah kanan. Semudah itu.

Coding input HTML sahaja

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flappy Bird Premium</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;800&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: radial-gradient(circle, #1e293b 0%, #0f172a 100%);
            touch-action: manipulation;
        }
        canvas {
            image-rendering: -moz-crisp-edges;
            image-rendering: -webkit-crisp-edges;
            image-rendering: pixelated;
            image-rendering: crisp-edges;
        }
        /* Glassmorphism Effect */
        .glass {
            background: rgba(15, 23, 42, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        .shine {
            position: relative;
            overflow: hidden;
        }
        .shine::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(to bottom right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0) 100%);
            transform: rotate(45deg);
            transition: all 0.5s;
        }
        .shine:hover::after {
            left: 120%;
            top: 120%;
        }
    </style>
</head>
<body class="margin-0 padding-0 flex flex-col justify-center items-center h-screen overflow-hidden select-none">

<div class="relative w-full max-w-[400px] h-full max-h-[640px] md:h-[640px] rounded-3xl overflow-hidden shadow-2xl border-4 border-slate-700/50 bg-slate-900 flex justify-center items-center">
        
        
        <canvas id="gameCanvas" width="400" height="640" class="w-full h-full block bg-[#4ec0ca]"></canvas>

<button id="soundBtn" class="absolute top-4 right-4 z-30 p-2 bg-slate-900/80 hover:bg-slate-800 text-white rounded-full border border-white/10 transition active:scale-95">
            <svg id="soundOnIcon" class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072M18.364 5.636a9 9 0 010 12.728M12 18.75V5.25L7.75 9H4.5v6h3.25L12 18.75z"/></svg>
            <svg id="soundOffIcon" class="w-6 h-6 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2"/></svg>
        </button>

<div id="hudScore" class="absolute top-6 left-0 right-0 text-center pointer-events-none z-10 transition-opacity duration-300 opacity-0">
            <span class="text-6xl font-extrabold text-white drop-shadow-[0_4px_6px_rgba(0,0,0,0.6)]">0</span>
        </div>

<div id="startScreen" class="absolute inset-0 flex flex-col justify-between items-center p-8 z-20 bg-gradient-to-b from-transparent via-slate-950/20 to-slate-950/80 transition-opacity duration-300">
            <div class="mt-16 text-center animate-bounce duration-1000">
                <h1 class="text-4xl font-extrabold text-white tracking-wider drop-shadow-[0_4px_8px_rgba(0,0,0,0.8)] flex items-center justify-center gap-2">
                    <span>FLAPPY</span>
                    <span class="text-yellow-400">BIRD</span>
                </h1>
                <p class="text-slate-100 text-sm tracking-widest mt-1 opacity-80 uppercase">Premium Edition</p>
            </div>

<div class="flex flex-col items-center w-full gap-4 mb-10">
                <div class="text-white text-xs text-center opacity-60 mb-2">
                    Lompat dengan <span class="bg-white/20 px-1.5 py-0.5 rounded text-[10px]">SPASI</span> atau <span class="bg-white/20 px-1.5 py-0.5 rounded text-[10px]">TAP LAYAR</span>
                </div>
                <button id="playBtn" class="shine w-full max-w-[240px] bg-gradient-to-r from-yellow-400 to-amber-500 hover:from-yellow-300 hover:to-amber-400 text-slate-950 font-extrabold py-4 px-8 rounded-2xl shadow-[0_8px_20px_rgba(245,158,11,0.4)] transition transform active:scale-95 tracking-wide text-lg">
                    MULAI GAME
                </button>
            </div>
        </div>

<div id="gameOverScreen" class="absolute inset-0 flex flex-col justify-center items-center p-6 z-20 bg-slate-950/60 opacity-0 pointer-events-none transition-all duration-300">
            <div class="glass w-full max-w-[320px] rounded-3xl p-6 flex flex-col items-center shadow-2xl scale-90 transition-transform duration-300" id="gameOverCard">
                <h2 class="text-3xl font-extrabold text-red-500 tracking-wide mb-5 animate-pulse">GAME OVER</h2>
                
                
                <div class="w-full grid grid-cols-2 gap-4 bg-white/5 p-4 rounded-2xl border border-white/10 mb-6">
                    <div class="flex flex-col items-center justify-center border-r border-white/10">
                        <span class="text-xs text-slate-400 uppercase tracking-wider mb-1">Medali</span>
                        <div id="medalContainer" class="w-14 h-14 flex items-center justify-center rounded-full bg-slate-800 border-2 border-slate-600 shadow-inner">
                            
                            <span class="text-2xl">🏆</span>
                        </div>
                        <span id="medalLabel" class="text-[10px] text-yellow-400 font-bold mt-1 uppercase">Emas</span>
                    </div>
                    <div class="flex flex-col justify-center pl-2">
                        <div class="mb-2">
                            <span class="text-[10px] text-slate-400 uppercase tracking-widest block">Skor</span>
                            <span id="finalScore" class="text-2xl font-extrabold text-white">0</span>
                        </div>
                        <div>
                            <span class="text-[10px] text-slate-400 uppercase tracking-widest block">Terbaik</span>
                            <span id="bestScore" class="text-2xl font-extrabold text-yellow-400">0</span>
                        </div>
                    </div>
                </div>

<button id="restartBtn" class="shine w-full bg-gradient-to-r from-emerald-400 to-teal-500 hover:from-emerald-300 hover:to-teal-400 text-slate-950 font-extrabold py-3.5 px-6 rounded-xl shadow-[0_6px_15px_rgba(16,185,129,0.3)] transition transform active:scale-95 mb-3 tracking-wide">
                    MAIN LAGI
                </button>
                <button id="backToMenuBtn" class="w-full bg-slate-800 hover:bg-slate-700 text-white font-semibold py-2.5 px-6 rounded-xl border border-white/10 transition transform active:scale-95 text-sm">
                    Kembali ke Menu
                </button>
            </div>
        </div>

</div>

// Responsive Scaling Setup
  const GAME_WIDTH = 400;
  const GAME_HEIGHT = 640;

// UI Elements
  const startScreen = document.getElementById("startScreen");
  const gameOverScreen = document.getElementById("gameOverScreen");
  const gameOverCard = document.getElementById("gameOverCard");
  const playBtn = document.getElementById("playBtn");
  const restartBtn = document.getElementById("restartBtn");
  const backToMenuBtn = document.getElementById("backToMenuBtn");
  const hudScore = document.getElementById("hudScore");
  const finalScoreText = document.getElementById("finalScore");
  const bestScoreText = document.getElementById("bestScore");
  const medalContainer = document.getElementById("medalContainer");
  const medalLabel = document.getElementById("medalLabel");
  const soundBtn = document.getElementById("soundBtn");
  const soundOnIcon = document.getElementById("soundOnIcon");
  const soundOffIcon = document.getElementById("soundOffIcon");

// --- AUDIO SYNTHESIZER (Tanpa File Eksternal) ---
  let audioCtx = null;
  let isMuted = false;

function initAudio() {
    if (!audioCtx) {
      audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    }
  }

function playSynthSound(type) {
    if (isMuted) return;
    initAudio();
    if (!audioCtx) return;

if (audioCtx.state === 'suspended') {
      audioCtx.resume();
    }

const osc = audioCtx.createOscillator();
    const gainNode = audioCtx.createGain();
    osc.connect(gainNode);
    gainNode.connect(audioCtx.destination);

const now = audioCtx.currentTime;

if (type === 'jump') {
      osc.type = 'triangle';
      osc.frequency.setValueAtTime(350, now);
      osc.frequency.exponentialRampToValueAtTime(700, now + 0.15);
      gainNode.gain.setValueAtTime(0.15, now);
      gainNode.gain.linearRampToValueAtTime(0.01, now + 0.15);
      osc.start(now);
      osc.stop(now + 0.15);
    }
    else if (type === 'score') {
      osc.type = 'sine';
      osc.frequency.setValueAtTime(587.33, now); // D5
      osc.frequency.setValueAtTime(880, now + 0.08); // A5
      gainNode.gain.setValueAtTime(0.1, now);
      gainNode.gain.linearRampToValueAtTime(0.01, now + 0.25);
      osc.start(now);
      osc.stop(now + 0.25);
    }
    else if (type === 'hit') {
      // Noise buffer for impact explosion
      const bufferSize = audioCtx.sampleRate * 0.2;
      const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate);
      const data = buffer.getChannelData(0);
      for (let i = 0; i < bufferSize; i++) {
        data[i] = Math.random() * 2 - 1;
      }
      const noise = audioCtx.createBufferSource();
      noise.buffer = buffer;

const filter = audioCtx.createBiquadFilter();
      filter.type = 'lowpass';
      filter.frequency.setValueAtTime(800, now);
      filter.frequency.exponentialRampToValueAtTime(10, now + 0.2);

const noiseGain = audioCtx.createGain();
      noiseGain.gain.setValueAtTime(0.3, now);
      noiseGain.gain.exponentialRampToValueAtTime(0.01, now + 0.2);

noise.connect(filter);
      filter.connect(noiseGain);
      noiseGain.connect(audioCtx.destination);

noise.start(now);
      noise.stop(now + 0.2);

// Falling tone
      osc.type = 'sawtooth';
      osc.frequency.setValueAtTime(180, now);
      osc.frequency.exponentialRampToValueAtTime(40, now + 0.35);
      gainNode.gain.setValueAtTime(0.2, now);
      gainNode.gain.linearRampToValueAtTime(0.01, now + 0.35);
      osc.start(now);
      osc.stop(now + 0.35);
    }
    else if (type === 'click') {
      osc.type = 'sine';
      osc.frequency.setValueAtTime(600, now);
      gainNode.gain.setValueAtTime(0.08, now);
      gainNode.gain.linearRampToValueAtTime(0.01, now + 0.05);
      osc.start(now);
      osc.stop(now + 0.05);
    }
  }

// Sound Button Toggle Action
  soundBtn.addEventListener('click', (e) => {
    e.stopPropagation();
    isMuted = !isMuted;
    if (isMuted) {
      soundOnIcon.classList.add('hidden');
      soundOffIcon.classList.remove('hidden');
    } else {
      soundOnIcon.classList.remove('hidden');
      soundOffIcon.classList.add('hidden');
      initAudio();
      playSynthSound('click');
    }
  });

// --- GAME STATE ---
  let gameState = 'START'; // 'START', 'PLAYING', 'GAMEOVER'
  let score = 0;
  let highScore = localStorage.getItem('flappy_premium_best') || 0;
  let frameCount = 0;
  let screenShake = 0;

// Dynamic Theme Colors
  const themes = {
    day: { sky: '#4ec0ca', ground: '#ded895', clouds: '#ffffff', city: '#3bb3c3' },
    sunset: { sky: '#e27474', ground: '#c4a482', clouds: '#fdd3c7', city: '#ba5858' },
    night: { sky: '#1e293b', ground: '#475569', clouds: '#64748b', city: '#0f172a' }
  };
  let currentTheme = themes.day;

// Bird Data
  const bird = {
    x: 80,
    y: 250,
    radius: 16,
    width: 38,
    height: 30,
    gravity: 0.45,
    velocity: 0,
    jump: -7.5,
    angle: 0,
    targetAngle: 0,
    wingWave: 0
  };

// Particles System (Feathers/Bubbles)
  const particles = [];
  function addFlapParticles(x, y) {
    for (let i = 0; i < 4; i++) {
      particles.push({
        x: x - 10,
        y: y + (Math.random() * 10 - 5),
        vx: -2 - Math.random() * 2,
        vy: (Math.random() - 0.5) * 4,
        size: 3 + Math.random() * 3,
        alpha: 1,
        color: '#ffffff'
      });
    }
  }

function drawParticles() {
    for (let p of particles) {
      ctx.save();
      ctx.globalAlpha = p.alpha;
      ctx.fillStyle = p.color;
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();
    }
  }

// Pipes Data
  const pipes = [];
  const pipeWidth = 68;
  const pipeGap = 135; // Comfortable gap
  const pipeSpeed = 2.4;

// Parallax Layers
  let cloudScroll = 0;
  let cityScroll = 0;
  let groundScroll = 0;

function updateParallax() {
    cloudScroll = (cloudScroll - 0.2) % GAME_WIDTH;
    cityScroll = (cityScroll - 0.5) % GAME_WIDTH;
    groundScroll = (groundScroll - pipeSpeed) % GAME_WIDTH;
  }

// --- RENDERING HELPERS ---

// Sky Gradient
    const skyGrad = ctx.createLinearGradient(0, 0, 0, GAME_HEIGHT);
    if (currentTheme === themes.day) {
      skyGrad.addColorStop(0, '#36b1bf');
      skyGrad.addColorStop(1, '#a6ebf2');
    } else if (currentTheme === themes.sunset) {
      skyGrad.addColorStop(0, '#f97316');
      skyGrad.addColorStop(0.7, '#f43f5e');
      skyGrad.addColorStop(1, '#ffedd5');
    } else {
      skyGrad.addColorStop(0, '#0f172a');
      skyGrad.addColorStop(0.8, '#1e1b4b');
      skyGrad.addColorStop(1, '#312e81');
    }
    ctx.fillStyle = skyGrad;
    ctx.fillRect(0, 0, GAME_WIDTH, GAME_HEIGHT);

// Stars at night
    if (currentTheme === themes.night) {
      ctx.fillStyle = "rgba(255,255,255,0.7)";
      for (let i = 0; i < 20; i++) {
        const starX = (Math.sin(i * 3242) + 1) * 0.5 * GAME_WIDTH;
        const starY = (Math.cos(i * 1234) + 1) * 0.5 * (GAME_HEIGHT - 150);
        ctx.fillRect(starX, starY, 2, 2);
      }
    }

// Layer 1: Clouds (Very slow)
    ctx.fillStyle = currentTheme.clouds;
    ctx.globalAlpha = currentTheme === themes.night ? 0.08 : 0.45;
    for (let offset of [0, GAME_WIDTH]) {
      const cx = cloudScroll + offset;
      drawCloud(cx + 40, 100, 30);
      drawCloud(cx + 180, 70, 20);
      drawCloud(cx + 290, 120, 25);
    }
    ctx.globalAlpha = 1.0;

// Layer 2: City Silhouettes
    ctx.fillStyle = currentTheme.city;
    ctx.globalAlpha = currentTheme === themes.night ? 0.3 : 0.6;
    for (let offset of [0, GAME_WIDTH]) {
      const tx = cityScroll + offset;
      ctx.fillRect(tx + 10, GAME_HEIGHT - 210, 40, 100);
      ctx.fillRect(tx + 40, GAME_HEIGHT - 180, 35, 70);
      ctx.fillRect(tx + 90, GAME_HEIGHT - 240, 50, 130);
      ctx.fillRect(tx + 160, GAME_HEIGHT - 190, 45, 80);
      ctx.fillRect(tx + 220, GAME_HEIGHT - 220, 35, 110);
      ctx.fillRect(tx + 270, GAME_HEIGHT - 170, 55, 60);
      ctx.fillRect(tx + 340, GAME_HEIGHT - 250, 40, 140);
    }
    ctx.globalAlpha = 1.0;
  }

function drawCloud(cx, cy, baseR) {
    ctx.beginPath();
    ctx.arc(cx, cy, baseR, 0, Math.PI * 2);
    ctx.arc(cx + baseR * 0.7, cy - baseR * 0.3, baseR * 0.8, 0, Math.PI * 2);
    ctx.arc(cx + baseR * 1.4, cy, baseR * 0.6, 0, Math.PI * 2);
    ctx.fill();
  }

function drawGround() {
    const groundY = GAME_HEIGHT - 110;

// Draw Ground Layers
    ctx.fillStyle = currentTheme === themes.night ? '#1e293b' : '#5c3a21'; // soil
    ctx.fillRect(0, groundY, GAME_WIDTH, 110);

// Green dynamic grass strip
    ctx.fillStyle = currentTheme === themes.night ? '#334155' : '#73c73f';
    ctx.fillRect(0, groundY, GAME_WIDTH, 14);

// Dynamic Scrolling Grass Pattern
    ctx.fillStyle = currentTheme === themes.night ? '#1e293b' : '#5ca32c';
    ctx.beginPath();
    for (let i = 0; i < GAME_WIDTH + 20; i += 10) {
      const x = (groundScroll + i) % (GAME_WIDTH + 20);
      ctx.lineTo(x, groundY + 14);
      ctx.lineTo(x + 5, groundY + 20);
      ctx.lineTo(x + 10, groundY + 14);
    }
    ctx.fill();

// Darker outline
    ctx.strokeStyle = '#27272a';
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(0, groundY);
    ctx.lineTo(GAME_WIDTH, groundY);
    ctx.stroke();
  }

function drawBird() {
    ctx.save();

// Translate and rotate based on fall physics
    ctx.translate(bird.x, bird.y);
    bird.wingWave = Math.sin(frameCount * 0.2);

// Smooth Angle Interpolation
    bird.targetAngle = bird.velocity * 0.055;
    if (bird.targetAngle > 1.2) bird.targetAngle = 1.2;
    if (bird.targetAngle < -0.6) bird.targetAngle = -0.6;
    bird.angle += (bird.targetAngle - bird.angle) * 0.15;
    ctx.rotate(bird.angle);

// Glow Effect
    ctx.shadowBlur = 15;
    ctx.shadowColor = 'rgba(234, 179, 8, 0.4)';

// Body (Perfect cute rounded procedural drawing)
    ctx.fillStyle = '#fbbf24'; // main body gold/yellow
    ctx.beginPath();
    ctx.arc(0, 0, bird.radius, 0, Math.PI * 2);
    ctx.fill();
    ctx.strokeStyle = '#78350f';
    ctx.lineWidth = 2;
    ctx.stroke();

ctx.shadowBlur = 0; // Turn off glow

// Big eye white
    ctx.fillStyle = '#ffffff';
    ctx.beginPath();
    ctx.arc(6, -4, 6, 0, Math.PI * 2);
    ctx.fill();
    ctx.stroke();

// Pupil
    ctx.fillStyle = '#0f172a';
    ctx.beginPath();
    ctx.arc(8, -4, 2.5, 0, Math.PI * 2);
    ctx.fill();

// Cheerful orange beak
    ctx.fillStyle = '#f97316';
    ctx.beginPath();
    ctx.moveTo(14, -2);
    ctx.quadraticCurveTo(24, 2, 14, 6);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();

// White underbelly
    ctx.fillStyle = '#fef08a';
    ctx.beginPath();
    ctx.arc(-2, 4, 11, 0.2, Math.PI * 0.95);
    ctx.fill();

// Wing with flapping flap motion
    ctx.fillStyle = '#f59e0b';
    ctx.save();
    ctx.translate(-7, 2);
    const flapRotation = bird.wingWave * 0.4;
    ctx.rotate(flapRotation);

ctx.beginPath();
    ctx.ellipse(0, 0, 11, 7, 0, 0, Math.PI * 2);
    ctx.fill();
    ctx.stroke();
    ctx.restore();

ctx.restore();
  }

function drawPipes() {
    for (let p of pipes) {
      // Gradient color based on theme
      let pipeGrad = ctx.createLinearGradient(p.x, 0, p.x + pipeWidth, 0);
      if (currentTheme === themes.night) {
        pipeGrad.addColorStop(0, '#334155');
        pipeGrad.addColorStop(0.3, '#475569');
        pipeGrad.addColorStop(1, '#1e293b');
      } else {
        pipeGrad.addColorStop(0, '#53a513');
        pipeGrad.addColorStop(0.35, '#80db26');
        pipeGrad.addColorStop(1, '#346b0d');
      }

ctx.fillStyle = pipeGrad;
      ctx.strokeStyle = '#0f172a';
      ctx.lineWidth = 2.5;

// TOP PIPE
      // Column
      ctx.fillRect(p.x, 0, pipeWidth, p.topHeight);
      ctx.strokeRect(p.x, -5, pipeWidth, p.topHeight + 5);
      // Lip/End border
      ctx.fillRect(p.x - 4, p.topHeight - 24, pipeWidth + 8, 24);
      ctx.strokeRect(p.x - 4, p.topHeight - 24, pipeWidth + 8, 24);

// BOTTOM PIPE
      const bottomY = p.topHeight + pipeGap;
      const bottomHeight = GAME_HEIGHT - 110 - bottomY;
      // Column
      ctx.fillRect(p.x, bottomY, pipeWidth, bottomHeight);
      ctx.strokeRect(p.x, bottomY, pipeWidth, bottomHeight + 5);
      // Lip/End border
      ctx.fillRect(p.x - 4, bottomY, pipeWidth + 8, 24);
      ctx.strokeRect(p.x - 4, bottomY, pipeWidth + 8, 24);
    }
  }

// --- CORE GAME ACTIONS ---

function spawnPipe() {
    const minHeight = 60;
    const maxHeight = GAME_HEIGHT - 110 - pipeGap - minHeight;
    const topPipeHeight = Math.floor(Math.random() * (maxHeight - minHeight + 1)) + minHeight;

pipes.push({
      x: GAME_WIDTH,
      topHeight: topPipeHeight,
      passed: false
    });
  }

function startGame() {
    gameState = 'PLAYING';
    score = 0;
    hudScore.querySelector('span').innerText = score;

// UI states animations
    startScreen.classList.add('opacity-0', 'pointer-events-none');
    hudScore.classList.remove('opacity-0');

bird.y = 250;
    bird.velocity = 0;
    bird.angle = 0;
    pipes.length = 0;
    particles.length = 0;
    spawnPipe();
  }

function triggerGameOver() {
    gameState = 'GAMEOVER';
    playSynthSound('hit');
    screenShake = 16; // trigger screenshake

// High Score Processing
    if (score > highScore) {
      highScore = score;
      localStorage.setItem('flappy_premium_best', highScore);
    }

// Display updates
    finalScoreText.innerText = score;
    bestScoreText.innerText = highScore;

// Award Elegant Medals
    let medalEmoji = '🥉';
    let medalName = 'Perunggu';
    let medalColor = 'from-amber-600 to-amber-800';

if (score >= 30) {
      medalEmoji = '💎';
      medalName = 'Platinum';
      medalColor = 'from-cyan-300 to-indigo-400';
    } else if (score >= 20) {
      medalEmoji = '🥇';
      medalName = 'Emas';
      medalColor = 'from-yellow-400 to-amber-500';
    } else if (score >= 10) {
      medalEmoji = '🥈';
      medalName = 'Perak';
      medalColor = 'from-slate-300 to-slate-400';
    }

medalContainer.className = `w-14 h-14 flex items-center justify-center rounded-full bg-gradient-to-br ${medalColor} border-2 border-white/25 shadow-lg scale-110`;
    medalContainer.innerHTML = `<span class="text-3xl drop-shadow-[0_2px_4px_rgba(0,0,0,0.5)]">${medalEmoji}</span>`;
    medalLabel.innerText = medalName;

// Slide down animation for beautiful modal overlay
    setTimeout(() => {
      hudScore.classList.add('opacity-0');
      gameOverScreen.classList.remove('opacity-0', 'pointer-events-none');
      gameOverCard.classList.remove('scale-90');
      gameOverCard.classList.add('scale-100');
    }, 400);
  }

// User Action Bindings
  window.addEventListener("keydown", function (e) {
    if (e.code === "Space") {
      e.preventDefault();
      handleJump();
    }
  });

canvas.addEventListener("touchstart", function (e) {
    e.preventDefault();
    handleJump();
  }, { passive: false });

canvas.addEventListener("mousedown", function (e) {
    handleJump();
  });

playBtn.addEventListener("click", () => {
    playSynthSound('click');
    startGame();
  });

restartBtn.addEventListener("click", () => {
    playSynthSound('click');
    gameOverScreen.classList.add('opacity-0', 'pointer-events-none');
    gameOverCard.classList.remove('scale-100');
    gameOverCard.classList.add('scale-90');
    startGame();
  });

backToMenuBtn.addEventListener("click", () => {
    playSynthSound('click');
    gameOverScreen.classList.add('opacity-0', 'pointer-events-none');
    startScreen.classList.remove('opacity-0', 'pointer-events-none');
    gameState = 'START';
  });

// --- MAIN LOOP ---

function loop() {
    ctx.save();

// Screenshake rendering logic
    if (screenShake > 0) {
      const dx = (Math.random() - 0.5) * screenShake;
      const dy = (Math.random() - 0.5) * screenShake;
      ctx.translate(dx, dy);
      screenShake *= 0.85;
      if (screenShake < 0.5) screenShake = 0;
    }

drawBackground();

if (gameState === 'START') {
      updateParallax();
      drawPipes();
      // Hovering soft bird animation on splashscreen
      bird.y = 250 + Math.sin(frameCount * 0.08) * 12;
      drawBird();
    }
    else if (gameState === 'PLAYING') {
      updateParallax();
      updateParticles();

// 1. Bird Mechanics
      bird.velocity += bird.gravity;
      bird.y += bird.velocity;

// Ceil limit
      if (bird.y <= bird.radius) {
        bird.y = bird.radius;
        bird.velocity = 0.5;
      }

// Hit ground check
      const groundY = GAME_HEIGHT - 110;
      if (bird.y + bird.radius >= groundY) {
        triggerGameOver();
      }

// 2. Pipes Mechanics
      if (frameCount % 110 === 0) {
        spawnPipe();
      }

for (let i = pipes.length - 1; i >= 0; i--) {
        pipes[i].x -= pipeSpeed;

// Box Collision check
        const px1 = pipes[i].x;
        const px2 = pipes[i].x + pipeWidth;
        const py1 = pipes[i].topHeight;
        const py2 = pipes[i].topHeight + pipeGap;

const buffer = 4; // Slight forgiveness margin
        if (
          bird.x + bird.radius - buffer > px1 &&
          bird.x - bird.radius + buffer < px2
        ) {
          if (bird.y - bird.radius + buffer < py1 || bird.y + bird.radius - buffer > py2) {
            triggerGameOver();
          }
        }

// Score update trigger
        if (!pipes[i].passed && pipes[i].x + pipeWidth < bird.x) {
          score++;
          hudScore.querySelector('span').innerText = score;
          playSynthSound('score');
          pipes[i].passed = true;
        }

// Remove out of bound pipes
        if (pipes[i].x + pipeWidth < 0) {
          pipes.splice(i, 1);
        }
      }

drawPipes();
      drawParticles();
      drawBird();
    }
    else if (gameState === 'GAMEOVER') {
      // Drop bird to ground
      const groundY = GAME_HEIGHT - 110;
      if (bird.y + bird.radius < groundY) {
        bird.velocity += bird.gravity * 1.5;
        bird.y += bird.velocity;
        if (bird.y + bird.radius >= groundY) {
          bird.y = groundY - bird.radius;
        }
      }
      drawPipes();
      drawParticles();
      drawBird();
    }

drawGround();
    ctx.restore();

frameCount++;
    requestAnimationFrame(loop);
  }

// Kickstart loop
  loop();
</script>

</body>
</html>

Masukkan kod HTML sahaja. Preview di sebelah kanan akan auto-update tanpa editor CSS dan JavaScript.

Harga

Pakej fleksibel untuk semua.

Pilih pakej mengikut keperluan projek dan storan anda.

Custom domain Storan media Analitik Pautan berpassword

Pro 200 MB

MYR 40.00 / 365 hari

Untuk penggunaan lebih besar dengan jumlah project tanpa had.

Projek tanpa had
200 MB storan
Penerbitan landing page dan fail
Sokongan untuk HTML, CSS, JS dan media

Pro

Trial

Percuma

RM0 / 365 hari

Akses percubaan untuk cuba fungsi utama INLINK.

25 projek aktif
5 MB storan
Penerbitan landing page dan fail
Sokongan untuk HTML, CSS, JS dan media

Trial

FAQ

Soalan lazim.

Perlu beli hosting?

Tidak. Semua project dihost di inlink.my secara percuma.

Boleh guna JavaScript?

Ya, anda boleh tambah JavaScript mengikut keperluan.

Boleh upload file?

Ya, upload gambar, video, atau file lain dan guna URL dalam project.

Boleh guna custom domain?

Ya, sambungkan domain seperti kedaianda.com ke project anda.

Mula sekarang

Tukar kod dan file jadi link yang boleh dikongsi.

Bina landing page, portfolio, kad ucapan, atau mini game — tanpa kerumitan teknikal.

Daftar Percuma Hubungi Kami