สาธิตสด :- เกมอิโมจิ

ลิงค์ถ่ายทอดสด : https://emojigame1.netlify.app/
ในงานมอบหมายนี้ เรามาสร้าง เกมอิโมจิกัน

ดูภาพด้านล่าง:

ลิงก์อ้างอิงเพื่อทำความเข้าใจแอปพลิเคชัน -- https://assets.ccbp.in/frontend/content/react-js/emoji-game-output.gif --

ไฟล์การออกแบบ

ขนาดเล็กพิเศษ (ขนาด < 576px), ขนาดเล็ก (ขนาด >= 576px) - เอาต์พุต
เล็กพิเศษ (ขนาด < 576px), เล็ก (ขนาด >= 576px) - ชนะเกม
เล็กพิเศษ (ขนาด < 576px), เล็ก (ขนาด >= 576px) - แพ้เกม
ขนาดกลาง (ขนาด >= 768px), ใหญ่ (ขนาด >= 992px) และขนาดใหญ่พิเศษ (ขนาด >= 1200px) - เอาต์พุต
ขนาดกลาง (ขนาด >= 768px), ใหญ่ (ขนาด >= 992px) และขนาดใหญ่พิเศษ (ขนาด >= 1200px) - เกมที่ชนะ
ขนาดกลาง (ขนาด >= 768px), ใหญ่ (ขนาด >= 992px) และขนาดใหญ่พิเศษ (ขนาด >= 1200px) - แพ้เกม

คำแนะนำในการตั้งค่าโครงการ

ดาวน์โหลดการพึ่งพาโดยรัน npm install
เริ่มต้นแอปโดยใช้ npm start

คำแนะนำในการเสร็จสิ้นโครงการ

เพิ่มฟังก์ชันการทำงาน

แอปจะต้องมีฟังก์ชันดังต่อไปนี้

คะแนน และ คะแนนรวม ของเกมปัจจุบันควรเป็น 0 ในตอนแรก
เมื่อมีการคลิก อิโมจิ
- หากอีโมจิที่ถูกคลิกไม่เหมือนกับอีโมจิใดๆ ที่ถูกคลิกก่อนหน้านี้ คะแนน ควรเพิ่มขึ้น 1
- หากคลิกอิโมจิทั้งหมดเพียงครั้งเดียว
  - สถานะเกม พร้อมกับ คะแนนที่ดีที่สุด และปุ่ม เล่นอีกครั้ง ควรแสดงตามที่แสดงใน ไฟล์ออกแบบ (ตัวเกม)
  - คะแนนที่ดีที่สุด ควรเท่ากับ คะแนนสูงสุด
- หากอิโมจิที่ถูกคลิกเหมือนกับอิโมจิใดๆ ที่ถูกคลิกก่อนหน้านี้
  - สถานะเกม พร้อมกับ คะแนนปัจจุบัน และปุ่ม เล่นอีกครั้ง ควรแสดงตามที่แสดงใน ไฟล์ออกแบบ (เกมแพ้)
  - หากคะแนนที่ได้รับในเกมปัจจุบันสูงกว่าคะแนนก่อนหน้า คะแนนสูงสุด ควรได้รับการอัปเดตตามนั้น
เมื่อคลิกปุ่ม Play Again แล้ว เราก็จะสามารถเล่นเกมได้อีกครั้ง
ปุ่ม เล่นอีกครั้ง ควรรีเซ็ตเกมและทำคะแนน แต่ไม่ใช่ ค่าคะแนนสูงสุด
รายการอิโมจิจะถูกส่งผ่านไปยังคอมโพเนนต์ EmojiGame เป็นพร็อพ emojisList ในรูปแบบของออบเจ็กต์อาร์เรย์
วัตถุอิโมจิแต่ละรายการจะมีคุณสมบัติดังต่อไปนี้
สำคัญ ประเภทข้อมูล
รหัส ตัวเลข
อิโมจิชื่อ สตริง
อีโมจิUrl สตริง
ค่าของ id คีย์ในออบเจ็กต์อิโมจิควรใช้เป็นคีย์ในคอมโพเนนต์ EmojiCard
ค่าของคีย์ emojiName ในวัตถุอิโมจิควรใช้เป็นข้อความแสดงแทนของรูปภาพ emoji
งานของคุณคือดำเนินการให้เสร็จสิ้น
- src/components/EmojiGame/index.js
- src/components/EmojiGame/index.css
- src/components/NavBar/index.js
- src/components/NavBar/index.css
- src/components/EmojiCard/index.js
- src/components/EmojiCard/index.css
- src/components/WinOrLoseCard/index.js
- src/components/WinOrLoseCard/index.css

เคล็ดลับด่วน

คุณสมบัติ CSS ของเคอร์เซอร์จะกำหนดประเภทของเคอร์เซอร์ของเมาส์ (ถ้ามี) ให้แสดงเมื่อตัวชี้เมาส์อยู่เหนือองค์ประกอบ ใช้เคอร์เซอร์คุณสมบัติ CSS พร้อมด้วย pointer ค่าเพื่อระบุลิงก์ คลิกที่นี่เพื่อทราบข้อมูลเพิ่มเติม
โครงร่างคือเส้นที่ลากรอบๆ องค์ประกอบที่อยู่นอกเส้นขอบ คุณสมบัติเค้าร่าง CSS ชวเลขกำหนดคุณสมบัติเค้าร่างทั้งหมด ใช้ outline คุณสมบัติ CSS ที่มีค่า none เพื่อซ่อนคุณสมบัติโครงร่างทั้งหมด คลิกที่นี่เพื่อทราบข้อมูลเพิ่มเติม

ทรัพยากร

รูปภาพ

https://assets.ccbp.in/frontend/react-js/game-logo-img.png
https://assets.ccbp.in/frontend/react-js/face-with-stuck-out-tongue-img.png
https://assets.ccbp.in/frontend/react-js/face-with-head-bandage-img.png
https://assets.ccbp.in/frontend/react-js/face-with-hugs-img.png
https://assets.ccbp.in/frontend/react-js/face-with-laughing-img.png
https://assets.ccbp.in/frontend/react-js/face-with-laughing-with-hand-infront-mouth-img.png
https://assets.ccbp.in/frontend/react-js/face-with-mask-img.png
https://assets.ccbp.in/frontend/react-js/face-with-silence-img.png
https://assets.ccbp.in/frontend/react-js/face-with-stuck-out-tongue-and-winking-eye-img.png
https://assets.ccbp.in/frontend/react-js/grinning-face-with-sweat-img.png
https://assets.ccbp.in/frontend/react-js/smiling-face-with-heart-eyes-img.png
https://assets.ccbp.in/frontend/react-js/grinning-face-img.png
https://assets.ccbp.in/frontend/react-js/smiling-face-with-star-eyes-img.png
https://assets.ccbp.in/frontend/react-js/won-game-img.png
https://assets.ccbp.in/frontend/react-js/lose-game-img.png