Javascript - ตัวคลิกคุกกี้
แหล่งที่มาของงาน : https://github.com/becodeorg/BXL-Swartz-5.34/blob/main/1.The-Field/12.Javascript/cookieClicker.md
ลิงก์ไปยังเวอร์ชันสด : https://teo-cozma.github.io/Javascript/
สมาชิกในทีม
- Brigita Sabutyte (จาวาสคริปต์และ HTML)
- เดวิด ไทเรล (จาวาสคริปต์)
- ทีโอดอร่า คอซมา (HTML และ CSS)
ภาษา
- HTML
- ซีเอสเอส
- จาวาสคริปต์
เครื่องมือ
- รหัส Visual Studio (โปรแกรมแก้ไขข้อความ)
- Discord, Google Meet, Github, Replit (การสื่อสาร)
- Adobe XD (การสร้างต้นแบบ)
- บริการตรวจสอบความถูกต้องของมาร์กอัป W3C (การตรวจสอบ HTML)
- บริการตรวจสอบ W3C CSS (การตรวจสอบ CSS)
- Google Lighthouse (การตรวจสอบประสิทธิภาพ)
ภาพ
ทรัพยากร
Cookie Clicker คืออะไร?
- 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
บทช่วยสอนสำหรับโครงการของเรา:
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
บริการตรวจสอบความถูกต้อง:
- https://validator.w3.org/#validate_by_input
- http://jigsaw.w3.org/css-validator/
บันทึกโครงการ
วันแรก (25/10)
การทบทวนคำแนะนำ
- อะไร : คุกกี้คลิกเกอร์
- ทำไม : โครงการรวมบัญชี (ทักษะ Javascript เป็นหลัก)
- เมื่อ : เริ่มวันนี้ ทำงานเป็นทีม 4 วันเต็ม จนถึง 28/10
- วิธีการ : เป็นกลุ่มละสามคน ทำงานร่วมกัน และใช้ภาษาโค้ดตามลำดับ
- ผู้จัด : เทโอโดร่า คอซมา, บริจิต้า ซาบูไทต์, เดวิด ไทเรล
- บทบาทไหน? มีส่วนหน้า แบ็กเอนด์ และการจัดการโครงการ บทบาททั้งหมดสามารถใช้แทนกันได้และโค้ดก็ยังถูกใช้ร่วมกัน แต่โดยรวมแล้ว บุคคลหนึ่งคนสามารถมุ่งเน้นไปที่บทบาทที่กำหนดได้มากกว่า
- แบ็กเอนด์ (Javascript) : David
- แบ็กเอนด์ (Javascript) + ส่วนหน้า (โครงสร้าง HTML) : Brigita
- ส่วนหน้า (CSS + อาจจะเป็น Sass) + ผู้จัดการโครงการ : Teodora
การระดมความคิด
3 ส่วน :
ส่วนคุกกี้ : ส่วนหัว 1 สำหรับตัวนับคุกกี้ H1 สำหรับจำนวนคลิก
- คุกกี้แบบโต้ตอบ + ชื่อ + ตัวนับคุกกี้ = ส่วนที่ 1
- "ภายใน HTML ให้ใส่ปุ่มคลิกซึ่งจะเพิ่มตัวนับและป้ายกำกับเริ่มต้นที่ 0 เพื่อแสดงตัวนับดังกล่าว"
ส่วนคะแนน :
- ส่วนคะแนน: การนับคะแนน
- คุกกี้ 1 อัน : คุกกี้เป็นปุ่มของตัวเอง
(คุกกี้ + คะแนน = ครึ่งซ้าย)
- ส่วนร้านค้า :
- ความสำเร็จและการอัพเกรด ?
- ส่วนร้านค้า = ปุ่มอัปเกรดตัวคลิก + ตัวนับจุด = ส่วนที่ 2:
สร้างตัวคูณ (สองหรือสามจุด) --> ขั้นตอนนี้เพื่อตรวจสอบ
ราคาตัวคูณ (ซื้อ)
การอัพเดตคะแนน
ตัวนับภายในตัวคูณ
ต้นทุนเพิ่มขึ้น (ต้นทุนของตัวคูณที่สูงขึ้น)
- จอแสดงผลเฉพาะเช่นกัน (ปุ่มด้านล่าง ?)
ขั้นตอนที่ 12 : องค์ประกอบที่จำเป็น ปุ่มบางปุ่มจะถูกปิดใช้งาน เช่น: ต่ำกว่า 20 แต้ม ผู้เล่นไม่สามารถเข้าถึงคุณสมบัติบางอย่างได้
(ครึ่งขวา)
ตัวอย่าง (ข้อมูลอ้างอิง) : http://orteil.dashnet.org/cookieclicker/
ภารกิจสำหรับวันนี้
เช้านี้ (10.30 - 12.30 น.)
- การวิจัยในโครงการ (คำแนะนำในการมอบหมายงาน)
- ดูว่าอะไรที่สอดคล้องกับขั้นตอนบังคับในปัจจุบัน (โบนัสจะถูกกันไว้ชั่วคราว)
- ดูโค้ดของตัวคลิกคุกกี้ดั้งเดิมอย่างเจาะลึก
(https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s) คำอธิบายของเกม (และคุณสมบัติที่มีอยู่ของมัน!)
- 1 คลิก = 1 คุกกี้
- 15 คลิก = 15 คุกกี้ = 1 เคอร์เซอร์ (ซื้อแล้ว)
- 10 เคอร์เซอร์ = 1 คุกกี้/วินาที (CpS)
- คุกกี้ 100 ชิ้น = คุณยายที่ผลิตและทำการตลาดคุกกี้ของคุณ
- คุกกี้เป็นสกุลเงินที่ช่วยให้คุณสามารถซื้อฟาร์ม เหมือง โรงงาน ฯลฯ = เศรษฐกิจคุกกี้ที่แพร่หลายและล้นหลาม สิ่งนี้จะขยายไปสู่คุกกี้เวิร์สในที่สุด
- ความเหนือกว่าของการดำรงอยู่ = ขึ้นแล้วเริ่มต้นใหม่อีกครั้ง
- คุกกี้ทองคำวางไข่แบบสุ่ม
- ประโยชน์ของคุณยาย: อาจเกิดการกบฏและการเปิดเผย ช่วยทุกคนด้วยผลประโยชน์ทางเศรษฐกิจ หรือหาประโยชน์จากพวกเขาเพื่อสร้างความมั่งคั่งมากขึ้น
- "แฮ็คโค้ด" เล็กๆ ในคอนโซล : Game.Earn(x)
(http://orteil.dashnet.org/cookieclicker/)
บันทึกข้อมูล/ประวัติเวอร์ชัน
- ประหยัด ปลอดภัย
- รูปแบบการแสดงเคอร์เซอร์
- คุณสมบัตินำเข้า/ส่งออก : ดึงข้อมูลบันทึกเกมจากเวอร์ชัน onld (ปิดใช้งานหลังจากผ่านไปหนึ่งสัปดาห์)
- ปุ่มขาย
- คุกกี้ทองคำสุ่ม (วิธีกำหนดความถี่)
- สถิติการคลิก
- การคลิกเพิ่ม
- ความไม่พอใจของคุณยายและวันสิ้นโลก --> สิ่งมีชีวิตที่กลับกลายเป็นว่ากินคุกกี้
- ส่วนเมนูสถิติสำหรับการอัพเกรดและความสำเร็จ
- ความสำเร็จของรสชาตินม -_-
- เมนูตัวเลือก :
- ทั่วไป : บันทึก + บันทึกอัตโนมัติ, ส่งออก/นำเข้า, ลบบันทึก ;
- การตั้งค่า : ระดับเสียง กราฟิกสุดอลังการ เสียง... ทั้งหมดนี้ล้วนเป็นโบนัส
เบื้องหลังรหัส (สอบสวนกับสารวัตร)
- โครงสร้าง HTML (สิ่งที่เราอาจเก็บไว้สำหรับลักษณะที่ปรากฏ):
- ส่วนหัว : ลิงก์ทั้งหมดไปยังสไตล์และสคริปต์ (ชื่อเรื่องกะพริบ...)
- ร่างกาย :
- ไม่มีห่อแบนเนอร์
- Topbar : ลิขสิทธิ์และลิงค์ไปยัง Social Media (เหมือน footer แต่อยู่ด้านบนของหน้า) เราจะต้องรวมเนื้อหาที่มีลิขสิทธิ์ไว้กับชื่อของเราในปีนี้และลิงก์ไปยังหน้า Landing Page ของเรา (?)
- Div id:"game" : ส่วนที่แท้จริงของเกม
- ส่วนต่างๆ อยู่ใต้แท็ก "ส่วน" และมีชื่อเป็นของตัวเองขึ้นอยู่กับตำแหน่ง (ซ้าย, ขวา, กลาง) + ตัวแยก
- Anchors : เป็นประเภทคลาสของตัวเองหรือเปล่า ? มองมันขึ้นมา
- Cookie Anchor = คุกกี้ที่คลิกได้ !!!
- เราจะเพิ่มชื่อ backery สมมติหรือไม่
- ตัวนับคุกกี้ : x คุกกี้ ; ต่อวินาที :s
- เราสร้างเมนูพร้อมตัวเลือก สถิติ ข้อมูล... หรือเปล่า?
- นอกจากนี้ ยังมีส่วนย่อยสำหรับแต่ละรายการเมนู ?
- (ปัญหาด้านเทคนิค: หน้าจะรีเฟรชอยู่เสมอเพื่ออัปเดตข้อมูล ทำให้ยากที่จะอยู่ในส่วนใดส่วนหนึ่งเพื่อดูโค้ด ก่อนที่จะกะพริบ)
- แท็ก "b" : มีไว้เพื่ออะไร ?
- div บางส่วนถูกซ่อนอยู่ ?
- ส่วนร้านค้า :
- ซื้อ/ขาย : สิ่งเหล่านี้ควรเชื่อมโยงกับเหตุการณ์ Javascript เนื่องจากค่าจะเปลี่ยนไปในแต่ละคลิก
- ผลิตภัณฑ์ (ทุ่นระเบิด คุณย่า) : เมื่อเกมเริ่มครั้งแรก สิ่งเหล่านี้ควรถูกซ่อน/บดบัง (ข้อมูลอ้างอิงอื่นที่น่าสนใจ : https://particle-clicker.web.cern.ch/)
บ่ายวันนี้ (13.30 - 17.00 น.)
- การรวบรวมแนวคิด การวิจัย และการรวบรวมทรัพยากร
- ปัญหา/ความท้าทายทางเทคนิคใดที่อาจรออยู่ข้างหน้า
- ตัวคูณทำงานอย่างไร?
- แสดงเค้าโครงของส่วนต่างๆ และปุ่มต่างๆ (แม้ว่าจะไม่ได้น่ากังวลเป็นพิเศษก็ตาม)
- ทำความเข้าใจวิธีการใช้ Javascript
- รวบรวมทรัพยากรและข้อมูลเกี่ยวกับวิธีการเขียนโค้ดสำหรับแต่ละปุ่ม
วิธีการทำงานกลุ่มของเราคืออะไร?
เราแต่ละคนทำงานอย่างไร?
- ตามลำพัง
- การวิจัยที่มุ่งเน้น
- เน้นการเข้ารหัส
- เราทำ "เซสชันการเขียนโค้ดสด" โดยที่เราแชร์หน้าจอและพิมพ์โค้ดของเรา และแต่ละเซสชันให้ข้อมูลทันทีหรือไม่
เราจะทำให้กำหนดเวลานี้ได้ผลสำหรับเราได้อย่างไร?
เราจะแบ่งงานการเขียนโค้ดอย่างไร? เราจะกำหนดงานต่อไปนี้และมอบหมายงานได้อย่างไร? ถ้าเราแต่ละคนทำงานตามเวลาของตัวเอง เราจะตกลงและรวมโค้ดสุดท้ายได้อย่างไร ?
การตัดสินใจว่าจะสื่อสารและแบ่งปันข้อมูลอย่างไร :
- ใน Discord ห้อง 4 (แชท+โทร)
- ... (เครื่องมือการทำงานร่วมกันอื่นๆ)
- Github แน่นอน พื้นที่เก็บข้อมูลจะถูกแชร์
การตัดสินใจในขั้นตอนต่อไป:
- วิจัยเสร็จวันนี้ ?
- เริ่มวางแผน (+ เขียน ?) โครงสร้าง HTML? โครงสร้างจาวาสคริปต์ ?
- เราปฏิบัติตามแต่ละขั้นตอนในจดหมายหรือไม่?
- ได้มีการตัดสินใจแล้ว อย่างน้อยที่สุดก็จะรวมขั้นตอนบังคับ (อินพุตและปุ่มทั้งหมดที่มีฟังก์ชันที่สำคัญที่สุด) ไว้ด้วย และโบนัสได้ถูกกันไว้แล้วในตอนนี้ (แต่อาจรวมไว้ด้วยหากเป็นไปได้)
- ขั้นตอนเหล่านี้จะต้องปฏิบัติตามทีละขั้นตอนหรือบางส่วนพร้อมกัน ?
- นี่เป็นคำถามสำคัญที่ต้องหยิบยกขึ้นมาเนื่องจากมีการใช้บทบาทร่วมกัน : 2 คนทำงานร่วมกันบนแบ็กเอนด์ และ 2 คนสำหรับส่วนหน้า
- ดังนั้นใน Javascript จะมีการแจกแจงขั้นตอนเหล่านี้หรือไม่
- ในการสร้างโปรเจ็กต์จริง ๆ เราต้องใช้เงินไปจากเดิมเท่าไหร่ และเราจะสร้างเป็นของเราเองมากน้อยเพียงใด ?
วิธีการทำงานรายวัน :
- เราแต่ละคนทำงานด้วยตัวของเราเองตั้งแต่เริ่มต้น และในตอนท้ายของวัน แบ่งปันโค้ดของเราผ่าน Discord จากนั้น "ยอมรับ" ทุกอย่างใน Replit
การคิดล่วงหน้า-ส่วนการประเมินผล
- ประเมินความคืบหน้าอย่างสม่ำเสมอ และตรวจสอบให้แน่ใจว่าได้รวมคุณสมบัติที่ต้องมีไว้ด้วย
- อัปเดต ReadMe เป็นประจำ
- ในตอนท้าย (ในวันสุดท้าย หรือแม้แต่ในระหว่างกระบวนการเขียนโค้ด) ให้ใช้เครื่องมือตรวจสอบและประสิทธิภาพ (ดูเครื่องมือตรวจสอบ Lighthouse และ W3C) บางทีในวันพฤหัสบดี
สเต็ปบ่ายวันนี้ (14.30 - 16.30 น.)
- ค้นคว้าเพิ่มเติมและวางแผนงานสำหรับวันพรุ่งนี้:
- Brigita : การวิจัยและการเขียน HTML
- เดวิด : การวิจัย Javascript
- Teodora: การวิจัยด้วยภาพและการสร้างต้นแบบ
วันที่สอง (26/10)
ประชุมช่วงเช้า เวลา 09.00 น. :
- ขั้นตอนที่ 5 เสร็จสมบูรณ์
- รหัสการแบ่งปัน
- ปัญหาทางเทคนิค : การเชื่อมต่อ HTML กับ Javascript ทำให้ฟังก์ชันทำงานได้อย่างถูกต้อง
- นอกจากนี้ โบนัสยังมีไว้สำหรับผู้เล่น ดังนั้นขั้นตอนที่ 11 และขั้นต่อไปจึงเป็นข้อบังคับ
- Autoclicker กำลังดำเนินการโดย David
- ตัวคูณทำได้โดย Brigita ; ค้างอยู่เช่นกัน
- แก้ไขปัญหาในสคริปต์
สำหรับเช้านี้ (9.30 - 12.30 น.)
ดำเนินการตามขั้นตอนที่กำหนดต่อไป มองเข้าไปในปัญหาใด ๆ ประชุมเวลา 13.30 น. เพื่อหารือความคืบหน้าและแก้ไขปัญหาต่างๆ
สำหรับบ่ายวันนี้ (13.30 - 16.30 น.) เตียว : ทำให้เว็บไซต์ responsive. หมายเหตุ : ปุ่มตัวคูณควรรวมค่าใช้จ่ายด้วย! + ค้นหาสคริปต์เพื่อปิดการใช้งานปุ่มบางปุ่มตามจำนวนคุกกี้ เดวิด : แบ่งปันฟังก์ชั่น ; ฟังก์ชั่นโหลดได้รับการแก้ไขแล้ว Brigita : รหัสและฟังก์ชั่นที่ใช้ร่วมกัน ; ปัญหาไวยากรณ์ได้รับการแก้ไขแล้ว
ประชุม Scrum (16.30 - 17.00 น.)
วันที่สาม (27/10)
ประชุมช่วงเช้า (09.00 น.)
เมื่อวานทำอะไรไป:
- ตอบสนอง (รอดำเนินการ)
- บันทึก/โหลดการตรวจสอบ (รอดำเนินการ)
- ตัวคูณ (แก้ไขแล้ว)
สิ่งที่ต้องทำในวันนี้:
พบกันช่วงเย็น (16.45 - 17.00 น.)
สิ่งที่เราทำได้:
- ปุ่มเปิด/ปิด
- ทำให้ตัวคูณทำงานได้ (เฉพาะกับ AutoClicker)
- เริ่มทำงานกับบูสเตอร์ (โบนัส)
- CSS ที่ตอบสนอง
พรุ่งนี้จะต้องทำอะไร:
- ทำตามขั้นตอน Javascript ทั้งหมด:
- ทำให้บูสเตอร์ทำงาน
- เพิ่มฟังก์ชั่นรีเซ็ต
- อัปเดตโค้ด HTML "หลัก" ด้วยสคริปต์ที่ถูกต้องและจัดรูปแบบ
- ปรับใช้เพจและใช้ LightHouse เพื่อตรวจสอบการเข้าถึง การใช้งาน SEO ฯลฯ
วันที่สี่ (28/10)
ประชุมช่วงเช้า (9.00 - 9.30 น.)
สิ่งที่ต้องทำในวันนี้:
ทำงานช่วงบ่าย (13.30 - 16.00 น.)
ผลลัพธ์ =
- ประสิทธิภาพ = 91;
- การเข้าถึง = 95 ;
- แนวทางปฏิบัติที่ดีที่สุด = 100 ;
- SEO = 92 ;
รายงานหลังโครงการ (16.20 - 17.00 น. และพรุ่งนี้ 29/53) :
- ปัญหาทางเทคนิคที่เหลืออยู่ : ตัวคูณ พรุ่งนี้จะทบทวนอีกครั้ง
(29/10)
