Примеры в этой статье делятся с вами игрой "Thes You Colle Blind" в Mini Game Imation 3366. Давайте сначала бросим этим.
Игровая цель: выберите цвет в соответствии с цветом текста, который появляется на экране. Никогда не беспокоится цветовая дилемма. Вы должны зажечь глаза. В начале игры будет 10 очков. Каждый правильный ответ получит один пункт, и в общей сложности будет 10 баллов. Игра закончится после того, как время будет использовано.
Инструкции по эксплуатации: нажмите на мышь, чтобы выбрать цвет
1. Изображение воспроизведения:
Оригинальное изображение:
подражать:
Код:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <style type = "text/css"> .wrap {ширина: 400px; Высота: 600px; Граница: 1px твердый черный; Поле: 0 Авто; } .head {ширина: 100%; Высота: 50px; переполнение: скрыто; } .time {float: left; Ширина: 150px; высота: 100%; высота линии: 50px; размер шрифта: 20px; Текст-альбом: Центр; } .score {width: 150px; высота: 100%; Поплавок: верно; высота линии: 50px; размер шрифта: 20px; /*text-align: center;*/} .middle {ширина: 100%; Высота: 450px; } .Text {ширина: 100%; Высота: 300px; размер шрифта: 200px; Текст-альбом: Центр; высота линии: 300px; } .Alert {ширина: 80%; Высота: 150px; Поле: 0 Авто; Текст-интент: 2EM; размер шрифта: 25px; } .bottom {ширина: 100%; высота: 100px; переполнение: скрыто; } .bottomtext {ширина: 20%; высота: 100px; Плавание: осталось; Текст-альбом: Центр; высота линии: 100px; размер шрифта: 70px; курсор: указатель; } </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> желтый </div> </div> </body> <script type = "text/javascript"> // Функция изменяющегося ядра получает не повторный массив вне порядка (матч подростка в массиве). } // Функция не повторной массивы RandomArr () {var arr = []; while (arr.length <5) {var temp = random (0, 4); if (arr.indexof (temp) == -1) {arr.push (temp); }} return arr; } function fresh () {// Промежуточное изменение слова var textIndex = random (0, 4); colorindex = случайный (0, 4); textDiv.innerHtml = textArr [textIndex]; TextDiv.Style.color = colorarr [colorindex]; // Уйти из заказов массив подписчиков var textrandoms = randomarr (); var colorrandoms = randomarr (); for (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 (".. Booltext"); var TimeDiv = document.querySelector (". Time"); var scorediv = document.queryselector (". балл"); var alertdiv = document.queryselector (". Alert"); var textarr = ["red", "green", "синий", "желтый", "черный"]; var colorarr = ["red", "green", "синий", "желтый", "черный"]; var colorindex = 0; var timer = null; var Isplaying = false; var countdown = 10; var score = 0; свежий(); for (var i = 0; i <bottomdivs.length; i ++) {bottomDivs [i] .onclick = function () {// Судья if (colorIndex == this.Index && countdown! = 0) {// Обновление оценки ++; Isplaying = true; // увеличить балл свежо (); scorediv.innerhtml = "Оценка:"+Оценка; alertdiv.style.opacity = 0; } else if (colorindex! = this.index && isplaying) {// уменьшить обратный отсчет -; // Обновление время изменения времени timeDiv.innerhtml = "time:" + countdown + "s"; // судья Таймер очистки if (обратный отсчет <= 0) {clearInterval (таймер); Isplaying = false; }}}}} // Таймер, прослушайте игру для Timer = setInterval (function () {if (iSplaying) {countdown -; timeDiv.innerhtml = "time:" + countdown + "s"; if (countdown <= 0) {clearInterval (timer); isplaying = false; }, 1000); </script> </html>Выше всего об этой статье. Я надеюсь, что все могут успешно бросить это в виду.