ตัวอย่างในบทความนี้แบ่งปันกับคุณว่า "คุณเป็นคนตาบอดสี" ในเกม JS Imitation 3366 Mini มาท้าทายกันก่อน
วัตถุประสงค์ของเกม: เลือกสีตามสีของข้อความที่ปรากฏในหน้าจอ ไม่เคยถูกรบกวนจากภาวะที่กลืนไม่เข้าคายไม่ออกสี คุณต้องทำให้ดวงตาของคุณสว่างขึ้น จะมี 10 คะแนนในตอนต้นของเกม แต่ละคำตอบที่ถูกต้องจะได้รับหนึ่งจุดและจะมีทั้งหมด 10 คะแนน เกมจะจบลงหลังจากเวลาหมด
คำแนะนำการทำงาน: คลิกที่เมาส์เพื่อเลือกสี
1. ภาพการทำซ้ำ:
ภาพต้นฉบับ:
เลียนแบบ:
รหัส:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <style type = "text/css"> .wrap {width: 400px; ความสูง: 600px; ชายแดน: 1px Solid Black; มาร์จิ้น: 0 อัตโนมัติ; } .head {width: 100%; ความสูง: 50px; ล้น: ซ่อน; } .time {float: ซ้าย; ความกว้าง: 150px; ความสูง: 100%; ระดับความสูง: 50px; ขนาดตัวอักษร: 20px; TEXT-ALIGN: CENTER; } .Score {Width: 150px; ความสูง: 100%; ลอย: ขวา; ระดับความสูง: 50px; ขนาดตัวอักษร: 20px; /*TEXT-ALIGN: CENTER;*/} .MIDDLE {WIDTH: 100%; ความสูง: 450px; } .Text {ความกว้าง: 100%; ความสูง: 300px; ขนาดตัวอักษร: 200px; TEXT-ALIGN: CENTER; ความสูงของสาย: 300px; } .alert {Width: 80%; ความสูง: 150px; มาร์จิ้น: 0 อัตโนมัติ; Indent-Indent: 2EM; ขนาดตัวอักษร: 25px; } .Bottom {Width: 100%; ความสูง: 100px; ล้น: ซ่อน; } .BottomText {WIDTH: 20%; ความสูง: 100px; ลอย: ซ้าย; TEXT-ALIGN: CENTER; ความสูงของสาย: 100px; ขนาดตัวอักษร: 70px; เคอร์เซอร์: ตัวชี้; } </style> </head> <body> <div> <div> <div> <div> เวลา: 10s </div> <div> คะแนน: 0 </div> </div> </div> <div> </div> </div> <div> เลือกคำที่ถูกต้องจากด้านล่าง <div> สีน้ำเงิน </div> <div> สีเหลือง </div> </div> </body> <script type = "text/javascript"> // core ที่เปลี่ยนไปจะได้รับอาร์เรย์ที่ไม่ได้ทำซ้ำ (ค่าตัวห้อยในอาร์เรย์) แบบสุ่ม (min, max) {return parseint } // ฟังก์ชั่นอาร์เรย์ที่ไม่ใช่การทำซ้ำแบบสุ่ม () {var arr = []; ในขณะที่ (arr.length <5) {var temp = สุ่ม (0, 4); if (arr.indexof (temp) == -1) {arr.push (temp); }} return arr; } function fresh () {// การเปลี่ยนคำระดับกลาง var textindex = สุ่ม (0, 4); colorIndex = สุ่ม (0, 4); textdiv.innerhtml = textarr [textindex]; textdiv.style.color = colorarr [colorindex]; // รับอาร์เรย์ตัวห้อยคำสั่งซื้อ var textrandoms = randomarr (); var colorrandoms = randomAr (); สำหรับ (var i = 0; i <bottomdivs.length; i ++) {// รับข้อความผ่านตัวห้อยที่ไม่ได้สั่งซื้อและกำหนดค่าให้กับ div bottomdivs [i] .innerhtml = textarr [textrandoms [i]]; bottomdivs [i] .style.color = colorarr [colorrandoms [i]]; // บันทึก subscripts out-of-order bottomdivs [i] .index = textrandoms [i]; }} var textDiv = document.QuerySelector (". text"); var bottomDivs = document.QuerySelectorAll (". bottomtext"); var timeDiv = document.querySelector (". เวลา"); VAR SOREDIV = Document.QuerySelector (". คะแนน"); var alertDiv = document.querySelector (". Alert"); var textarr = ["สีแดง", "สีเขียว", "สีน้ำเงิน", "เหลือง", "ดำ"]; var colorarr = ["สีแดง", "สีเขียว", "สีน้ำเงิน", "เหลือง", "ดำ"]; var colorIndex = 0; ตัวจับเวลา var = null; var isplaying = false; var countdown = 10; คะแนน var = 0; สด(); สำหรับ (var i = 0; i <bottomdivs.length; i ++) {bottomdivs [i] .onclick = function () {// ตัดสินถ้า (colorIndex == this.index && countdown! = 0) {// Refresh score ++; isplaying = true; // เพิ่มคะแนนสด (); SORDIV.INNERHTML = "คะแนน:"+คะแนน; AlertDiv.style.Opacity = 0; } อื่นถ้า (colorIndex! = this.index && isplaying) {// ลดการนับถอยหลัง -; // อัปเดตเวลาเปลี่ยนเวลา timediv.innerhtml = "เวลา:" + countdown + "s"; // ผู้ตัดสินการทำความสะอาดตัวจับเวลาถ้า (นับถอยหลัง <= 0) {clearInterval (ตัวจับเวลา); isplaying = false; }}}}} // ตัวจับเวลา, ฟังเกมสำหรับ timer = setInterval (function () {ถ้า (isplaying) {countdown -; timediv.innerhtml = "เวลา:" + countdown + "s"; if (countdown <= 0) {clearinterval (timer) }}, 1,000); </script> </html>ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ ฉันหวังว่าทุกคนจะท้าทายได้สำเร็จ