20 idea game HTML Canvas untuk student. Klik butang untuk salin prompt permulaan.
"Saya nak buat game Pong guna HTML Canvas. Bagi kod `index.html` dengan CSS untuk canvas 800x600px (background hitam), dua 'paddle' putih di kiri/kanan, dan satu 'bola' putih di tengah."
"Saya nak buat game Snake klasik guna HTML Canvas. Bagi kod `index.html` dan CSS. Untuk JS, setup 'game loop' (`requestAnimationFrame`) dan lukis satu 'ular' (satu square hijau) di tengah. Saya perlukan keyboard listener untuk gerakkan dia."
"Saya nak buat game Brick Breaker guna HTML Canvas. Bagi kod `index.html` dan CSS. Untuk JS, saya perlukan kod untuk lukis 'paddle' di bawah (yang ikut pergerakan mouse) dan satu 'bola' yang bergerak dan melantun dari dinding."
"Saya nak buat game Space Invaders guna HTML Canvas (canvas hitam). Untuk JS, lukis satu 'player ship' (rectangle hijau) di bawah tengah. Saya juga perlukan grid 5x3 'aliens' (rectangle merah) di atas."
"Saya nak buat klon Flappy Bird guna HTML Canvas. Untuk JS, saya perlukan satu 'burung' (circle kuning) yang ada gravity (jatuh ke bawah). Bila saya tekan spacebar, bagi 'burung' tu 'lompat' sikit ke atas."
"Saya nak buat 'Clicker Game' guna HTML, CSS, JS (tak perlu canvas). Saya perlukan satu button besar ('Klik Saya!') dan satu text display ('Skor: 0'). Setiap kali saya klik, skor tu kena naik 1."
"Saya nak buat game Whack-a-Mole guna HTML Canvas. Lukis grid 3x3 'lubang' (circle kelabu). Saya perlukan logik untuk 'tikus' (circle coklat) muncul secara rawak di salah satu lubang setiap 2 saat."
"Saya nak buat game Tic-Tac-Toe (X dan O) guna HTML Canvas. Lukis grid 3x3 (dua garisan horizontal, dua vertikal). Saya perlukan mouse click listener untuk kesan square mana yang player klik."
"Saya nak buat Memory Game (padankan kad) guna HTML Canvas. Lukis grid 4x4 'kad' (rectangle kelabu). Bila saya klik satu kad, ia patut 'terbuka' (tukar warna)."
"Saya nak buat game Asteroids guna HTML Canvas (canvas hitam). Lukis satu 'kapal angkasa' (triangle putih) di tengah. Saya perlukan kod untuk 'kapal' tu pusing kiri/kanan bila tekan arrow key."
"Saya nak buat demo Pac-Man guna HTML Canvas (canvas hitam). Lukis 'Pac-Man' (circle kuning) yang boleh bergerak guna arrow keys dan tak boleh tembus dinding. Lukis juga beberapa 'dot' kecil."
"Saya nak buat Tetris guna HTML Canvas. Lukis 'game board' (grid 10x20) dan satu 'Tetromino' (bentuk 'L') di atas tengah. Buat 'game loop' supaya bentuk 'L' tu jatuh satu grid ke bawah setiap saat."
"Saya nak buat game Car Dodger (pandangan atas) guna HTML Canvas. Lukis 'kereta player' (biru) di bawah. Saya perlukan kod untuk gerakkan kereta player ke kiri dan kanan sahaja guna arrow keys."
"Saya nak buat Shooting Gallery guna HTML Canvas. Lukis satu 'target' (merah) yang bergerak dari kiri ke kanan. Bila saya klik atas canvas, tunjukkan 'crosshair' (+) di lokasi mouse."
"Saya nak buat game platformer 2D guna HTML Canvas. Lukis satu 'player' (square) dan satu 'lantai' di bawah. Saya perlukan gravity untuk player dan logik 'lompat' bila tekan spacebar."
"Saya nak buat klon Doodle Jump guna HTML Canvas. Lukis satu 'player' (circle) yang boleh melantun bila cecah 'platform' (rectangle hijau). Buat 3 platform di lokasi rawak."
"Saya nak buat game Simon Says guna HTML/CSS/JS (tak perlu canvas). Saya perlukan 4 button besar (merah, hijau, biru, kuning). Bagi kod JS untuk buat satu button tu 'flash' (menyala) secara rawak."
"Saya nak buat game 2048 guna HTML Canvas. Lukis grid 4x4. Letak dua 'tile' (square dengan nombor '2') di dua lokasi rawak dalam grid tu."
"Saya nak buat Minesweeper guna HTML Canvas. Lukis grid 10x10 'tile' (square kelabu). Buat mouse click listener bila saya klik mana-mana tile."
"Saya nak buat Drawing Pad simple guna HTML Canvas. Saya perlukan kod yang membolehkan saya 'melukis' (garisan hitam) atas canvas bila saya klik dan heret (drag) mouse."