Contoh -contoh dalam artikel ini berbagi dengan Anda game "Are You Color Blind" di game mini JS Imitation 3366. Mari kita tantang dulu.
Tujuan Game: Pilih warna sesuai dengan warna teks yang muncul di layar. Jangan pernah terganggu oleh dilema warna. Anda harus menerangi mata Anda. Akan ada 10 poin di awal pertandingan. Setiap jawaban yang benar akan mendapatkan satu poin, dan akan ada total 10 poin. Permainan akan berakhir setelah waktu habis.
Instruksi Operasi: Klik pada mouse untuk memilih warna
1. Gambar reproduksi:
Gambar Asli:
meniru:
Kode:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <itement> </itement> <style type = "text/css"> .wrap {width: 400px; Tinggi: 600px; Perbatasan: 1px solid black; margin: 0 otomatis; } .head {lebar: 100%; Tinggi: 50px; meluap: tersembunyi; } .time {float: kiri; Lebar: 150px; Tinggi: 100%; Line-Height: 50px; font-size: 20px; Teks-Align: tengah; } .score {width: 150px; Tinggi: 100%; float: benar; Line-Height: 50px; font-size: 20px; /*Text-Align: center;*/} .middle {width: 100%; Tinggi: 450px; } .text {width: 100%; Tinggi: 300px; Ukuran font: 200px; Teks-Align: tengah; Line-Height: 300px; } .alert {lebar: 80%; Tinggi: 150px; margin: 0 otomatis; Teks-inden: 2em; Ukuran font: 25px; } .bottom {width: 100%; Tinggi: 100px; meluap: tersembunyi; } .bottomText {width: 20%; Tinggi: 100px; float: kiri; Teks-Align: tengah; Line-Height: 100px; Ukuran font: 70px; kursor: pointer; } </style> </head> <body> <div> <div> <div> <div> Time: 10s</div> <div> Score: 0</div> </div> <div> <div> Blue</div> <div>Select the correct word from the bottom according to the color of the above word, and start automatically</div> </div> <div>Red</div> <div>Green</div> <div>Black</div> <Div> blue </div> <div> yellow </div> </div> </body> <script type = "text/javaScript"> // Core yang berubah memperoleh array out-of-order yang tidak dapat diputar (nilai subskrip dalam array) fungsi acak (min, maks) {return parseint (math.random () * (max-min + Min +)) {return parseInint (math.random () * (max-min + Min +)) {return parseInint (math.random () * (max-min + Min +)) {return parseInint (math.random () * (max-Min +) } // fungsi array non-repeating randomArr () {var arr = []; while (arr.length <5) {var temp = acak (0, 4); if (arr.indexof (temp) == -1) {arr.push (temp); }} return arr; } function fresh () {// kata -kata perantara perubahan var textIndex = acak (0, 4); colorIndex = acak (0, 4); TextDiv.innerHtml = TextArr [TextIndex]; TextDiv.Style.Color = ColorArr [ColorIndex]; // Keluar dari Array Subscript Var Textrandoms = RandomArr (); var colorrandoms = randomArr (); untuk (var i = 0; i <bottomDivs.length; i ++) {// Dapatkan teks melalui subskrip out-of-order dan tetapkan nilai ke div BottomDivs [i] .InnerHTML = TextArr [Textrandoms [i]]; bottomdivs [i] .style.color = colorarr [colorrandoms [i]]; // Simpan subskrip out-of-order Bottomdivs [i] .index = Textrandom [i]; }} var TextDiv = Document.QuerySelector (". Teks"); var bottomDivs = document.querySelectorAll (". Bottomtext"); var timediv = document.queryselector (". time"); var sorev = document.queryselector (". skor"); var alertDiv = document.queryselector (". alert"); var texarr = ["merah", "hijau", "biru", "kuning", "hitam"]; var colorarr = ["merah", "hijau", "biru", "kuning", "hitam"]; var colorIndex = 0; var timer = null; var isplaying = false; var countdown = 10; var skor = 0; segar(); untuk (var i = 0; i <bottomDivs.length; i ++) {BottomDivs [i] .onClick = function () {// Judge if (colorIndex == this.index && countDown! = 0) {// Refresh Skor ++; isplaying = true; // Tingkatkan skor segar (); scoringiv.innerhtml = "skor:"+skor; alertDiv.style.opacity = 0; } lain if (colorIndex! = this.index && isplaying) {// kurangi hitung mundur -; // Perbarui Waktu Ubah Timediv.innerHtml = "Waktu:" + Countdown + "S"; // juri timer pembersih if (countdown <= 0) {clearInterval (timer); isplaying = false; }}}}} // timer, dengarkan game untuk timer = setInterval (function () {if (isPlaying) {countDown -; timediv.innerHtml = "waktu:" + countdown + "s"; if (countdown <= 0) {clearInterval (timer); game {"{" {"" }, 1000); </script> </html>Di atas adalah semua tentang artikel ini. Saya berharap semua orang bisa menantangnya dengan sukses.