تشارككم الأمثلة في هذه المقالة لعبة "هل أنت ملون أعمى" في لعبة JS Imitation 3366 Mini. دعونا نتحدى ذلك أولاً.
هدف اللعبة: اختر اللون وفقًا لون النص الذي يظهر في الشاشة. لا تنزعج أبدًا من معضلة اللون. يجب أن تضيء عينيك. سيكون هناك 10 نقاط في بداية اللعبة. ستحصل كل إجابة صحيحة على نقطة واحدة ، وستكون هناك 10 نقاط في المجموع. ستنتهي اللعبة بعد استخدام الوقت.
تعليمات العملية: انقر فوق الماوس لتحديد اللون
1. صورة التكاثر:
الصورة الأصلية:
قلد:
شفرة:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <style type = "text/css"> .wrap {width: 400px ؛ الارتفاع: 600 بكسل ؛ الحدود: 1 بكسل سوداء صلبة. الهامش: 0 Auto ؛ } .head {width: 100 ٪ ؛ الارتفاع: 50 بكسل ؛ الفائض: مخفي. } .time {float: Left ؛ العرض: 150 بكسل ؛ الارتفاع: 100 ٪ ارتفاع الخط: 50 بكسل ؛ حجم الخط: 20 بكسل ؛ محاذاة النص: المركز ؛ } .score {width: 150px ؛ الارتفاع: 100 ٪ تعويم: صحيح. ارتفاع الخط: 50 بكسل ؛ حجم الخط: 20 بكسل ؛ /*text-align: center ؛*/} .middle {width: 100 ٪ ؛ الارتفاع: 450 بكسل ؛ } .text {width: 100 ٪ ؛ الارتفاع: 300 بكسل ؛ حجم الخط: 200 بكسل ؛ محاذاة النص: المركز ؛ ارتفاع الخط: 300 بكسل ؛ } .alert {width: 80 ٪ ؛ الارتفاع: 150 بكسل ؛ الهامش: 0 Auto ؛ استولى النص: 2EM ؛ حجم الخط: 25 بكسل ؛ } .bottom {العرض: 100 ٪ ؛ الارتفاع: 100px ؛ الفائض: مخفي. } .bottomtext {العرض: 20 ٪ ؛ الارتفاع: 100px ؛ تعويم: اليسار. محاذاة النص: المركز ؛ رفع الخط: 100px ؛ حجم الخط: 70 بكسل ؛ المؤشر: مؤشر. } </style> </head> <body> <viv> <viv> <viv> <viv> الوقت: 10s </viv> <div> النتيجة: 0 </viv> </viv> <viv> <viv> Blue </viv> <viv> الأزرق </div> <viv> أصفر </div> </viv> </body> <script type = "text/javaScript"> // يحصل الأساسية المتغيرة على صفيف غير متكرر خارج الترتيب (MAX-max-min + 1) + min ؛ } // دالة الصفيف غير المتكررة randomarr () {var arr = [] ؛ بينما (arr.length <5) {var temp = random (0 ، 4) ؛ if (arr.indexof (temp) == -1) {arr.push (temp) ؛ }} return arr ؛ } fresh fresh () {// Word Word change var textIndex = عشوائي (0 ، 4) ؛ colorIndex = عشوائي (0 ، 4) ؛ textDiv.innerhtml = textarr [textIndex] ؛ textDiv.Style.Color = colorArr [colorIndex] ؛ // الحصول على Out of Order Subcript Array var textrandoms = randomarr () ؛ var colorrandoms = randomarr () ؛ لـ (var i = 0 ؛ i <bottomdivs.length ؛ i ++) {// الحصول على نص من خلال المشتركين خارج الترتيب وتعيين القيمة إلى div bottomdivs [i] .innerhtml = textarr [textrandoms [i]] ؛ BottomDivs [i] .style.color = colorarr [colorrandoms [i]] ؛ // حفظ المشتركين خارج الترتيب BottomDivs [i] .index = textrandoms [i] ؛ }} var textDiv = document.querySelector (". text") ؛ var bottomdivs = document.querysElectorAll (". BottomText") ؛ var timediv = document.queryselector (". time") ؛ var scorediv = document.queryselector (". Score") ؛ var alertdiv = document.queryselector (". Alert") ؛ var textarr = ["Red" ، "Green" ، "Blue" ، "Yellow" ، "Black"] ؛ var colorarr = ["Red" ، "Green" ، "Blue" ، "Yellow" ، "Black"] ؛ var colorIndex = 0 ؛ var timer = null ؛ var isplaying = false ؛ VAR العد التنازلي = 10 ؛ VAR SCORE = 0 ؛ طازج()؛ لـ (var i = 0 ؛ i <bottomdivs.length ؛ i ++) {bottomdivs [i] .onclick = function () {// regle if (colorIndex == this.index && countdown! = 0) {// refresh score ++ ؛ isplaying = صحيح ؛ // زيادة الدرجات الطازجة () ؛ scorediv.innerhtml = "Score:"+Score ؛ alertdiv.style.Opacity = 0 ؛ } آخر إذا (colorIndex! = this.index && isplaying) {// انخفاض العد التنازلي -؛ // تحديث الوقت تغيير timediv.innerhtml = "الوقت:" + العد التنازلي + "s" ؛ // ugge cleaning timer if (countdown <= 0) {clearinterval (timer) ؛ isplaying = false ؛ }}}}} // timer ، استمع إلى اللعبة لـ timer = setInterval (function () {if (isplaying) {countdown -؛ timediv.innerhtml = time: }} ، 1000) ؛ </script> </html>ما سبق هو كل شيء عن هذا المقال. آمل أن يتمكن الجميع من تحديها بنجاح.