Javascript - Pengklik Cookie
Sumber tugas : https://github.com/becodeorg/BXL-Swartz-5.34/blob/main/1.The-Field/12.Javascript/cookieClicker.md
Tautan ke versi langsung : https://teo-cozma.github.io/Javascript/
Anggota tim
- Brigita Sabutyte (Javascript dan HTML)
- David Tirel (Javascript)
- Teodora Cozma (HTML dan CSS)
Bahasa
Peralatan
- Kode Visual Studio (editor teks)
- Perselisihan, Google Meet, Github, Replit (Komunikasi)
- Adobe XD (prototipe)
- Layanan Validasi Markup W3C (pemeriksaan HTML)
- Layanan Validasi CSS W3C (inspeksi CSS)
- Google Lighthouse (pemeriksaan kinerja)
Gambar
Sumber daya
Apa itu Pengklik Kue?
- http://orteil.dashnet.org/cookieclicker/
- https://en.wikipedia.org/wiki/Cookie_Clicker
- https://cookie-clicker2.com/
- https://particle-clicker.web.cern.ch/
- https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s
Tutorial untuk proyek kami:
https://www.flaticon.com/free-icons/cookie
https://www.youtube.com/watch?v=uUgOBe_wb6E
https://www.youtube.com/watch?v=j_nI6G3ZDiE
https://codesource.io/how-to-disable-button-in-javascript/
https://stackoverflow.com/questions/57477529/disable-a-button-if-empty-input
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=vU2akkcSV-g
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=KgYkgBno5Gs
https://stackoverflow.com/questions/8583524/how-to-set-time-limit
Layanan validasi :
- https://validator.w3.org/#validate_by_input
- http://jigsaw.w3.org/css-validator/
Catatan proyek
Hari pertama (25/10)
Tinjauan instruksi
- Apa : Pengklik Cookie.
- Mengapa : proyek konsolidasi (terutama keterampilan Javascript).
- Kapan : Mulai hari ini, kerja tim selama 4 hari penuh, hingga 28/10.
- Caranya : dalam kelompok beranggotakan tiga orang, berkolaborasi, dan menggunakan bahasa kode masing-masing.
- Siapa : Teodora Cozma, Brigita Sabutyte, David Tirel.
- Peran yang mana? Ada frontend, backend dan manajemen proyek. Semua peran dapat dipertukarkan dan kode tetap dibagikan, namun secara keseluruhan, satu orang dapat lebih fokus pada peran tertentu.
- Bagian Belakang (Javascript): David.
- Backend (Javascript) + Frontend (struktur HTML): Brigita.
- Frontend (CSS + mungkin Sass) + Manajer Proyek : Teodora.
Bertukar pikiran
3 bagian :
Bagian cookie : Header 1 untuk penghitung cookie. H1 untuk jumlah klik.
- Cookie interaktif + judulnya + penghitung cookie = bagian pertama.
- "Di dalam HTML, letakkan tombol klik yang akan menambah penghitung dan label diinisialisasi pada 0 untuk menampilkan penghitung tersebut."
Bagian skor :
- Bagian skor: penghitungan skor.
- 1 cookie : cookie adalah tombolnya sendiri.
(Cookie + skor = separuh kiri)
- Bagian toko:
- Prestasi dan peningkatan?
- Bagian toko = klik pemutakhiran tombol + penghitung titik = bagian ke-2 :
Buatlah pengganda (double atau triple points) --> langkah ini untuk ditinjau
Harga pengganda (dibeli)
Pembaruan skor
Penghitung dalam pengganda
Kenaikan biaya (biaya pengganda lebih tinggi)
- Tampilan khusus juga (tombol di bawahnya?)
Langkah 12 : elemen yang diperlukan, tombol tertentu dinonaktifkan. misal: di bawah 20 poin, pemain tidak dapat mengakses fitur tertentu.
(Setengah kanan)
Contoh (referensi): http://orteil.dashnet.org/cookieclicker/.
Tugas untuk hari ini
Pagi ini (10:30 - 12:30)
- Penelitian proyek (instruksi penugasan).
- Lihat apa yang sesuai dengan langkah wajib saat ini (bonus disisihkan untuk saat ini).
- Lihat secara mendalam kode clicker cookie asli.
(https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s) Deskripsi game (dan kualitas eksistensialnya!)
- 1 klik = 1 kue.
- 15 klik = 15 cookie = 1 kursor (dibeli).
- 10 kursor = 1 cookie/detik (CpS).
- 100 kue = nenek yang memproduksi dan memasarkan kue Anda.
- Cookie adalah mata uang yang memungkinkan Anda membeli lahan pertanian, tambang, pabrik, dll. = Ekonomi cookie yang meresap dan melimpah. Hal ini akhirnya berkembang menjadi cookieverse.
- Transendensi keberadaan = Naik dan mulai lagi.
- Kue emas muncul secara acak.
- Waspadai nenek: potensi pemberontakan dan kiamat. Selamatkan semua orang dengan keuntungan ekonomi, atau eksploitasi mereka untuk menghasilkan lebih banyak kekayaan.
- "Peretasan kode" kecil di konsol : Game.Earn(x).
(http://orteil.dashnet.org/cookieclicker/)
Log info/Riwayat versi
- Penghematan yang aman
- Gaya tampilan kursor
- Fitur impor/ekspor : mengambil save game dari versi lama (dinonaktifkan setelah seminggu)
- tombol jual
- Kue emas acak (cara menentukan frekuensinya)
- Mengklik statistik
- Mengklik meningkat
- Ketidakpuasan dan kiamat nenek --> muncul makhluk yang memakan kue
- Bagian menu statistik untuk peningkatan dan pencapaian
- Menu pilihan :
- Umum: simpan + simpan otomatis, ekspor/impor, hapus simpan;
- Pengaturan : volume, grafik indah, suara... ini semua adalah bonus.
Di balik kode (diselidiki dengan inspektur)
- Struktur HTML (apa yang mungkin kami pertahankan untuk tampilannya):
- Head : semua link ke style dan script (Judulnya berkedip...)
- Tubuh :
- Tidak ada pembungkus spanduk
- Topbar : hak cipta dan tautan ke Media Sosial (seperti footer tetapi di bagian atas halaman). Kami pasti perlu menyertakan hal-hal hak cipta dengan nama kami, tahun ini dan link ke halaman arahan kami (?).
- Div id:"game" : bagian sebenarnya dari game tersebut.
- Bagian-bagian tersebut berada di bawah tag "bagian", dan memiliki nama sendiri-sendiri tergantung posisinya (kiri, kanan, tengah) + pemisah.
- Anchors : apakah mereka tipe kelasnya sendiri? Cari tahu.
- Jangkar cookie = cookie yang dapat diklik !!!
- Apakah kami menambahkan nama pendukung fiktif?
- Penghitung kue: x kue; per detik : s.
- Apakah kita membuat menu dengan opsi, statistik, info,...?
- Juga, subbagian untuk setiap item menu?
- (Masalah teknis: halaman terus disegarkan untuk memperbarui data sehingga sulit untuk tetap berada di satu bagian untuk melihat kode, sebelum berkedip)
- Tag "b" : untuk apa ?
- Beberapa div disembunyikan?
- Bagian toko:
- Beli/Jual : ini harus ditautkan ke peristiwa Javascript karena nilainya akan berubah dengan setiap klik.
- Produk (tambang, nenek): saat permainan pertama kali dimulai, produk ini harus disembunyikan/dikaburkan. (Referensi menarik lainnya : https://particle-clicker.web.cern.ch/)
Sore ini (13:30 - 17:00)
- Mengumpulkan ide, penelitian, dan mengumpulkan sumber daya.
- Kesulitan/tantangan teknis apa yang mungkin terjadi?
- Bagaimana cara kerja pengganda?
- Menampilkan tata letak bagian dan tombolnya (meskipun hal ini tidak terlalu mengkhawatirkan).
- Memahami cara menerapkan Javascript.
- Kumpulkan sumber daya dan informasi tentang cara menulis kode untuk setiap tombol.
Apa metodologi kerja kelompok kami?
Bagaimana cara kerja kita masing-masing?
- Sendiri
- Fokus pada penelitian
- Fokus pada pengkodean
- Apakah kita melakukan "sesi pengkodean langsung", di mana kita berbagi layar dan mengetik kode, dan masing-masing langsung memberikan masukannya?
Bagaimana kita bisa membuat tenggat waktu ini berhasil bagi kita?
Bagaimana kita membagi pekerjaan pengkodean? Bagaimana kita menentukan tugas-tugas berikut dan mendelegasikannya? Jika kita masing-masing mengerjakan waktu kita sendiri, bagaimana kita menyepakati dan mengkonsolidasikan kode akhir?
Memutuskan bagaimana berkomunikasi dan berbagi informasi :
- Di Discord, ruang 4 (obrolan + panggilan).
- ... (alat kolaborasi lainnya).
- Pastinya Github, repositorinya akan dibagikan.
Memutuskan langkah selanjutnya:
- Selesaikan penelitian hari ini?
- Mulai merencanakan (+ menulis?) struktur HTML? Struktur Javascript?
- Apakah kita mengikuti setiap langkahnya?
- Telah diputuskan, setidaknya langkah-langkah wajib (semua input dan tombol yang memiliki fungsi paling penting) akan disertakan, dan bonus telah disisihkan untuk saat ini (tetapi dapat disertakan jika memungkinkan.)
- Langkah-langkah ini harus diikuti satu demi satu, atau beberapa langkah sekaligus?
- Ini adalah pertanyaan penting untuk diajukan karena peran dibagi: 2 orang berkolaborasi di backend, 2 orang di frontend.
- Oleh karena itu, dalam Javascript, apakah langkah-langkah ini akan didistribusikan?
- Ketika benar-benar membangun proyek tersebut, berapa banyak yang kita ambil dari proyek aslinya, dan berapa banyak yang kita buat sendiri?
Metode kerja sehari-hari:
- Kami masing-masing bekerja sendiri di awal, dan di penghujung hari, membagikan kode kami melalui Discord, lalu "melakukan" semuanya di Replit.
Berpikir ke depan - bagian evaluasi
- Nilai kemajuan secara teratur dan pastikan fitur-fitur yang harus dimiliki disertakan.
- Perbarui ReadMe secara teratur.
- Menjelang akhir (pada hari terakhir, atau bahkan selama proses pengkodean), gunakan alat validasi dan kinerja (Lihat alat Validasi Lighthouse dan W3C); mungkin pada hari Kamis.
Langkah sore ini (14:30 - 16:30)
- Lebih banyak penelitian dan pemetaan tugas untuk masa depan:
- Brigita : Penelitian dan penulisan HTML.
- David : Penelitian Javascript.
- Teodora: penelitian visual dan pembuatan prototipe.
Hari kedua (26/10)
Rapat pagi pukul 09.00 :
- Langkah 5 selesai.
- Berbagi kode.
- Masalah teknis : menghubungkan HTML dengan Javascript, membuat fungsi berfungsi dengan baik.
- Selain itu, bonusnya untuk para pemain, jadi langkah 11 dan selanjutnya adalah wajib.
- Autoclicker sedang dilakukan oleh David.
- Pengganda dilakukan oleh Brigita ; tertunda juga.
- Menyelesaikan masalah dalam skrip.
Untuk pagi ini (9:30 - 12:30)
Lanjutkan langkah yang ditugaskan. Cari tahu masalah apa pun. Bertemu pada pukul 13.30 untuk membahas kemajuan dan menyelesaikan masalah apa pun.
Untuk siang ini (13:30 - 16:30) Teo : membuat situs responsive. Catatan : tombol pengganda juga harus menyertakan biaya! + temukan skrip untuk menonaktifkan tombol tertentu sesuai dengan jumlah cookie. David: berbagi fungsi; fungsi beban teratasi. Brigita : kode dan fungsi bersama; masalah sintaksis teratasi.
Rapat scrum (16:30 - 17:00)
Apa yang telah dilakukan?
Masalah apa yang muncul + terselesaikan?
- Masalah dengan pengganda.
Apa langkah selanjutnya?
Masalah :
- Mencari tahu cara memusatkan elemen !!!!!!! (Harus menyegarkan ingatanku lagi).
- Cara menonaktifkan tombol menggunakan Javascript : kesulitan coding.
- Simpan dan Muat tidak berfungsi dengan pengganda.
- Tidak dapat terus menggunakan Sass karena masalah kompilasi ke dalam CSS utama. Jadi kembali ke penataan dengan vanilla CSS.
Masalah apa yang harus diperbaiki besok :
- Tombol Simpan dan Muat;
- Dapatkan pengali bertambah 2 (lagi) ;
- Mengaktifkan/menonaktifkan tombol tergantung kondisi (Langkah 12) ;
- Bonus : Langkah 11.
Hari ketiga (27/10)
Pertemuan pagi (9:00)
Pertemuan malam (16:45 - 17:00)
Hari keempat (28/10)
Pertemuan pagi (9:00 - 9:30)
Apa yang perlu dilakukan hari ini :
Kerja sore (13:30 - 16:00)
Hasil =
- Kinerja = 91;
- Aksesibilitas = 95 ;
- Praktik terbaik = 100 ;
- SEO = 92;
Laporan pasca proyek (16:20 - 17:00 dan besok 29/10) :
- Masalah teknis yang tersisa: pengganda. Besok akan dikaji lagi.
(29/10)
