이 기사의 예는 JS 모방 3366 미니 게임에서 "Are You Color Blind"게임을 공유합니다. 먼저 도전합시다.
게임 목표 : 화면에 나타나는 텍스트의 색상에 따라 색상을 선택하십시오. 색상 딜레마에 의해 방해받지 마십시오. 당신은 눈을 밝혀야합니다. 게임이 시작될 때 10 점이 있습니다. 각 정답은 하나의 점수를 얻을 수 있으며 총 10 점이 있습니다. 시간이 다가 오면 게임이 끝납니다.
작동 지침 : 마우스를 클릭하여 색상을 선택하십시오
1. 생식 사진 :
원본 이미지 :
본뜨다:
암호:
<! doctype html> <html> <head> <meta charset = "utf-8"> <title> </title> <style type = "text/css"> .wrap {width : 400px; 높이 : 600px; 국경 : 1px 솔리드 블랙; 여백 : 0 Auto; } .HEAD {너비 : 100%; 높이 : 50px; 오버플로 : 숨겨진; } .time {float : 왼쪽; 너비 : 150px; 높이 : 100%; 라인 높이 : 50px; 글꼴 크기 : 20px; 텍스트 정렬 : 센터; } .Score {너비 : 150px; 높이 : 100%; 플로트 : 오른쪽; 라인 높이 : 50px; 글꼴 크기 : 20px; /*Text-Align : Center;*/} .middle {너비 : 100%; 높이 : 450px; } .text {너비 : 100%; 높이 : 300px; 글꼴 크기 : 200px; 텍스트 정렬 : 센터; 라인 높이 : 300px; } .Alert {너비 : 80%; 높이 : 150px; 여백 : 0 Auto; 텍스트 안정 : 2em; 글꼴 크기 : 25px; } .bottom {너비 : 100%; 높이 : 100px; 오버플로 : 숨겨진; } .BottomText {너비 : 20%; 높이 : 100px; 플로트 : 왼쪽; 텍스트 정렬 : 센터; 라인 높이 : 100px; 글꼴 크기 : 70px; 커서 : 포인터; . <div> blue </div> <div> 옐로우 </div> </div> </body> <script type = "text/javaScript"> // 변경된 코어는 비 반복되지 않은 분서 외 배열 (배열에서 첨자 값) 함수 무작위 (min, max) {return parseint (math.random () * (max-min + 1)) + Min; } // 비 반복 배열 함수 randomarr () {var arr = []; while (arr.length <5) {var temp = random (0, 4); if (arr.indexof (temp) == -1) {arr.push (temp); }} 반환 ARR; } function fresh () {// 중간 단어 변경 var textindex = random (0, 4); colorIndex = random (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 = docum var timediv = document.querySelector ( ". Time"); var scorediv = document.querySelector ( ". score"); var alertDiv = document.querySelector ( ". Alert"); var textarr = [ "Red", "Green", "Blue", "Yellow", "Black"]; var colorarr = [ "빨간색", "녹색", "파란색", "노란색", "검은 색"]; var colorIndex = 0; var timer = null; var isplaying = false; var countdown = 10; var 점수 = 0; 신선한(); for (var i = 0; i <bottomdivs.length; i ++) {bottomdivs [i] .onclick = function () {// judge if (colorIndex == this.index && countdown! = 0) {// screat ++를 새로 고침합니다. isplaying = true; // 점수 증가 Fresh (); scrediv.innerhtml = "score :"+score; AlertDiv.style.opacity = 0; } else if (colorIndex! = this.index && isplaying) {// 카운트 다운 감소 -; // 업데이트 시간 변경 timediv.innerhtml = "시간 :" + countdown + "s"; // 청소 타이머 if (countdown <= 0) {clearinterval (타이머); isplaying = false; }}}}} // 타이머, timer에 대한 게임을 듣습니다. timer = setInterval (function () {countdown-; timediv.innerhtml = "time :" + countdown + "s"; if (countdown <= 0) {clearInterval (timer); isplaying = isplaying (game}). }}, 1000); </script> </html>위는이 기사에 관한 것입니다. 모두가 성공적으로 도전 할 수 있기를 바랍니다.