Logo SK Taman Desaminium Logo Unit ICT SKTD (TD ICT) Unit ICT
SK Taman Desaminium

Carta panduan untuk guru

Laman Buat Game

Dari topik DSKP ke game yang murid boleh main di telefon, dalam satu sesi. Pilih jenis game ikut kemahiran yang hendak dilatih, jana prompt, tampal dalam Gemini atau Claude, kemudian terbitkan secara percuma di Cloudflare.

Gemini (Canvas)Claude (Artifact)Cloudflare Pages · percumaTiada coding diperlukan

Tonton dahulu

Video penerangan

Semua langkah dalam laman ini, dari pilih topik hingga game hidup di internet. Sekitar 1 minit, dengan subtitle.

Aliran kerja

Enam langkah, ikut urutan. Anggaran masa untuk game pertama: sekitar 45 minit.

  1. 1Pilih topikSatu topik kecil + satu objektif dari RPH.5 min
  2. 2Pilih jenis gameIkut kemahiran: hafal, isih, susun, kira…2 min
  3. 3Jana promptIsi borang di bawah, salin prompt.5 min
  4. 4Bina & baikiTampal di Gemini/Claude, uji, minta pembetulan.15 min
  5. 5Simpan failMuat turun sebagai index.html dalam satu folder.3 min
  6. 6Deploy & kongsiUpload ke Cloudflare Pages, kongsi link / QR.10 min

Sebelum mula

Kenapa perlu deploy?

Deploy bermaksud meletakkan game cikgu di internet supaya ia ada alamat (link) sendiri, sama seperti laman web sekolah.

📌

Game yang siap dalam Gemini atau Claude ibarat lukisan dalam buku conteng cikgu: hanya cikgu yang nampak. Deploy pula ibarat menampalnya di papan kenyataan sekolah: sesiapa yang ada link boleh buka, di mana-mana, bila-bila masa.

Tanpa deploy: fail game hanya ada dalam komputer cikgu, telefon murid tidak dapat membukanya Tanpa deploy index.html Komputer cikgu sahaja ✕ ✕ ✕ Telefon murid tak boleh buka
Rajah 1A · Game masih di komputer cikgu (atau dalam akaun AI cikgu).
Dengan deploy: game berada di internet dengan link pages.dev, semua telefon murid dan papan pintar dapat membukanya Dengan deploy Cloudflare kuiz-suria.pages.dev Satu link untuk semua ✓ ✓ ✓ Telefon, tablet, papan pintar
Rajah 1B · Game di internet. Murid buka link atau imbas QR, terus main.

Main di mana-mana

Di kelas, di rumah, di telefon ibu bapa. Tiada pemasangan aplikasi.

Murid tak perlu akaun

Gemini dan Claude ada had umur. Dengan link sendiri, murid tak perlu log masuk apa-apa.

Link kekal

Tak hilang walaupun chat AI dipadam. Boleh guna semula tahun depan.

Percuma & bersih

Tiada iklan, tiada ruang chat. Murid nampak game sahaja, penuh skrin.

“Boleh tak kongsi terus link dari Gemini atau Claude?”

Boleh untuk mencuba atau tunjuk kepada rakan guru. Tetapi untuk murid, link sebegitu mungkin meminta log masuk, memaparkan ruang chat AI, dan bergantung pada akaun peribadi cikgu. Deploy di Cloudflare memberi game itu rumah sendiri.

Langkah 2Carta pemilihan

Kemahiran apa yang murid perlu latih?

Mula dari kemahiran, bukan dari jenis game. Tekan Guna jenis ini dan borang prompt akan diisi automatik.

Langkah 3Penjana prompt

Isi borang, salin prompt

Prompt dikemas kini serta-merta. Contoh sudah diisi; tukar kepada topik cikgu sendiri.

Ciri tambahan

Prompt untuk ditampal


      
Tampal di Gemini (pilih Canvas) atau Claude.

    

  






  

    
Langkah 4–5Bina, uji, simpan

    
Gemini atau Claude: dua-dua boleh

  

  

    

      
Gemini

      

        
          Ilustrasi skrin Gemini: ruang chat di kiri dengan butang Canvas, game dipaparkan di panel Canvas sebelah kanan
          
          
          
          
          gemini.google.com
          
          
          
          
          Tampal prompt di sini…
          Canvas
          A
          
          
          Kuiz Suria
          Preview
          Code
          Share ⤴
          B
          C
          
          🪐 Planet terdekat dengan Matahari?
          Utarid
          Zuhrah
          Bumi
          Marikh
        
        
Rajah 2 · Ilustrasi skrin Gemini (bukan tangkapan skrin sebenar).

      

      
    
        
  • ATekan Canvas, kemudian tampal prompt dan hantar.
    • 
        
  • BPreview: main dan uji game di sini.
    • 
        
  • CShare / Export atau tab Code untuk ambil kod.
    • 
      

      
    
        
  1. Buka gemini.google.com (akaun Google / DELIMa).
    2. 
        
  2. Dalam kotak mesej, tekan Canvas sebelum hantar prompt.
    3. 
        
  3. Game dipaparkan di panel kanan. Tekan Preview untuk main.
    4. 
        
  4. Siap? Gunakan butang Share / Export atau tab Code → salin semua kod.
    5. 
      

    

    

      
Claude

      

        
          Ilustrasi skrin Claude: ruang chat di kiri, game dipaparkan sebagai Artifact di kanan dengan butang Copy dan Download
          
          
          
          
          claude.ai
          
          
          📄 Kuiz Sistem SuriaArtifact · klik untuk buka
          
          Tampal prompt di sini…
          ↑
          A
          
          Kuiz Sistem Suria
          Copy
          ↓ Save
          B
          
          🚀 Kuiz Sistem Suria
          ▶ Main
        
        
Rajah 3 · Ilustrasi skrin Claude (bukan tangkapan skrin sebenar).

      

      
    
        
  • ATampal prompt dan hantar. Game terus dibina.
    • 
        
  • BCopy kod atau Download fail dari penjuru artifak.
    • 
      

      
    
        
  1. Buka claude.ai dan log masuk.
    2. 
        
  2. Tampal prompt terus dan hantar.
    3. 
        
  3. Game muncul sebagai Artifact di panel kanan, terus boleh dimain.
    4. 
        
  4. Siap? Tekan menu artifak → Download, atau tab Code → Copy.
    5. 
      

    

  

  

    

      
        Cara simpan yang betul: folder kuiz-sistem-suria mengandungi fail index.html. Contoh salah: index.html.txt, nama fail lain, atau fail tanpa folder
        
        
        ✓ BETUL
        
        kuiz-sistem-suria/
        
        
        </>
        index.html
        Satu folder, satu fail index.html
        
        ✕ SALAH
        
          
          index.html.txtmasih .txt
          
          Kuiz Suria.htmlnama lain
          
          Desktop/index.htmltiada folder
        
      
      
Rajah 4 · Cara simpan fail sebelum upload.

    

    
Simpan sebagai index.html. Jika menyalin kod: Windows guna Notepad → Save As → jenis All Files → nama index.html. Mac guna TextEdit → Format → Make Plain Text dahulu. Letak fail itu seorang diri dalam satu folder, contoh kuiz-sistem-suria. Nama mesti tepat index.html, huruf kecil: itulah halaman pertama yang dibuka bila murid tekan link.

  


  
Prompt pembaikan yang selalu digunakan

  






  

    
Langkah 6Deploy

    
Terbitkan di Cloudflare Pages

    
Percuma, tiada iklan, link kekal. Cara Direct Upload: upload folder sahaja, tidak perlu GitHub. Gambar di bawah ialah tangkapan skrin sebenar; ikut label kuning A B.

  

  
    
    
  1. 6.1
    Daftar akaun percuma
    Pergi ke dash.cloudflare.com → Sign up dengan emel. Sahkan emel. Sekali sahaja.
    2. 
    
  2. 6.2
    Buka Workers & Pages
    A Tekan Workers & Pages di menu kiri (di bawah Compute).
    B Tak jumpa? Taip Workers dalam kotak Quick search.
    Rujuk Rajah 5
    
      
    Menu kiri Cloudflare dengan Workers & Pages dan Quick search ditanda
    Rajah 5 · Menu kiri Cloudflare.
    3. 
    
  3. 6.3
    Tekan Create application
    A Butang biru di penjuru kanan atas.
    Rujuk Rajah 6
    
      
    Halaman Workers & Pages dengan butang Create application ditanda
    Rajah 6 · Halaman Workers & Pages.
    4. 
    
  4. 6.4
    Tekan “Continue to Pages”
    A Pautan kecil di bawah sekali. Jangan pilih GitHub atau pilihan lain dalam kotak.
    Rujuk Rajah 7
    
      
    Skrin Create an app dengan pautan Continue to Pages di bawah ditanda
    Rajah 7 · Skrin “Create an app”.
    5. 
    
  5. 6.5
    Pilih Drag and drop your files
    A Tekan Get started pada kotak kedua (ikon awan).
    Rujuk Rajah 8
    
      
    Skrin Get started dengan butang Get started untuk Drag and drop your files ditanda
    Rajah 8 · Skrin “Get started”.
    6. 
    
  6. 6.6
    Namakan projek
    A Taip nama: huruf kecil dan sengkang sahaja, contoh kuiz-sistem-suria. Nama ini jadi alamat game: kuiz-sistem-suria.pages.dev
    B Tekan Create project.
    Rujuk Rajah 9
    
      
    Medan Project name dan butang Create project ditanda
    Rajah 9 · Beri nama projek.
    7. 
    
  7. 6.7
    Upload folder game
    A Seret folder ke dalam kotak bergaris, atau klik perkataan folder.
    Rujuk Rajah 10
    
      
    Kotak upload Cloudflare: Drag in or click to upload a file or folder
    Rajah 10 · Kotak upload.
    8. 
    
  8. 6.8
    Pilih folder, tekan Upload
    Cari folder game cikgu (contoh kuiz-sistem-suria, rujuk Rajah 4). Pilih folder itu, jangan buka ke dalamnya.
    A Tekan Upload.
    Rujuk Rajah 11
    
      
    Tetingkap pilih folder pada Mac dengan butang Upload ditanda
    Rajah 11 · Tetingkap pilih folder (Mac). Nama fail peribadi dikaburkan.
    9. 
    
  9. 6.9
    Semak fail, tekan Deploy site
    A Pastikan senarai menunjukkan folder dan index.html di dalamnya, dengan tanda ✓ biru.
    B Tekan Deploy site di bawah kanan.
    Rujuk Rajah 12
    
      
    Fail berjaya dimuat naik: folder site dengan index.html, dan butang Deploy site ditanda
    Rajah 12 · Fail berjaya dimuat naik.
    10. 
    
  10. 6.10
    Berjaya! Ini link game cikgu
    Skrin “Success!” muncul dalam beberapa saat.
    A Inilah link game cikgu. Klik untuk buka. Jika keluar ralat, tunggu 1–2 minit dan muat semula.
    Rujuk Rajah 13
    
      
    Skrin Success dengan link buatgame.pages.dev ditanda
    Rajah 13 · Skrin Success dan link game.
    11. 
    
  11. 6.11
    Uji dan kongsi
    A Game kini hidup di alamat sendiri. Buka link di telefon sendiri dahulu dan main sampai habis.
    Kemudian kongsi di Google Classroom / WhatsApp kelas, atau jana kod QR (Chrome: ikon kongsi → QR code) untuk ditayang di skrin.
    Rujuk Rajah 14
    
      
    Game Pulau Tatabahasa dibuka di pelayar pada alamat buatgame.pages.dev
    Rajah 14 · Contoh sebenar: game Pulau Tatabahasa di buatgame.pages.dev
    12. 
    
  12. 6.12
    Nak kemas kini?
    Workers & Pages → buka projek → Create new deployment → upload folder baharu. Link kekal sama, murid tak perlu link baharu.
    13. 
  






  

    
Sebelum kongsi dengan murid

    
Senarai semak

    
AI boleh tersilap fakta dengan yakin. Cikgu tetap pakar isi kandungan.