Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to write Color Mini Game based on JS". In the operation of practical cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Introduction and rules of the game

Game name: "read the word and say the color"

Game mode: ① picture mode ② answer mode

Rules of the game: ① look at the picture mode, according to the form generated words and font color, say the corresponding font color. (word is a distractor) ② answer mode, according to the requirements of the question; choose the correct answer.

Interference level: entry (5 colors), primary (8 colors), intermediate (10 colors), advanced (12 colors)

Second, general design and code explanation ① picture viewing mode

Specific ideas

First, define the word corresponding to the color, and the hexadecimal of the corresponding color (there are 12 colors here)

Encapsulate a method to get a word (color) and a hexadecimal that does not correspond to a color (for example: blue (# 000000), that is, to display a blue word, and the font color is black)

Set the corresponding level to generate a "two-dimensional table" (entry: 5 colors, 5x5; primary: 8 colors, 8x8; intermediate: 10 colors, 10x10; advanced: 12 colors, 12x12.)

Let's do it!

Core code

Define setting colors (12 colors)

/ / define setting colors (12 colors) let colorNameList = ['red', 'green', 'blue', 'yellow', 'black', 'white', 'gray', 'purple', 'pink', 'cyan', 'orange', 'brown'] / / hexadecimal let colorHexList of the corresponding color = ['# FF0000','# 00FF00colors,'# 0000FFFcards,'# FFFF00','# 0000FFFcolors,'# FFFFFF','#999999','# 9933FFFcards,'# ff00cc','# 65ffcdrels,'# ffa500','# D2691E'] / / the map form corresponding to the color let colorMap = {'red':'# FF0000',' green':'# 00FF00FF00FF00FF00FFF00FF00FFF00FF00FFFFFFFFFFF00FFFFFFFF00FFFFFFFFFFFFFFFFFFFFF00FFFFFFFFFFFFFF00FFFFFFFFF00FFF00FFFFFF00FFF00ZY 'Blue':'# FFFF00', 'black':'# 0000FFFFFFFFFFF00FFFFFFF00FFFFFFFFF00FFFFFFFFFFFF00FFFFFFFF00FFF00FFF00FFFFFFF00FFF00FFF 'Brown':'# D2691E'}

Encapsulate the method of getting a word and a font color that does not correspond to it

/ get a color object function getRandomColor (size) {/ / size is the parameter used by the incoming level / / console.log (size) var numHex = Math.floor (Math.random () * size); var numName = Math.floor (Math.random () * size) If (numHex = = numName) {/ / avoid the same color of word and word if (numHex > 1 & & numHex < size) {numHex-= 2;} else {numHex + = 2;} Var color = {colorHex: colorHexList [numHex], colorName: colorNameList [numName], numHex: numHex, numName: numName} return color; / / can be balanced to obtain random integers from 0 to 9.}

Get "two-dimensional table" (draw "picture")

/ / get 2D coordinate system (drawing) function getTwoArray (size) {/ / console.log (e); var textList = new Array (); for (var I = 0; I < size; ionization +) {textList [I] = new Array ();} / / console.log (textList) var textStr = ""; for (var I = 0; I < size) Var theColor +) {if (I% 2 = = 0) {textStr + = ";} else {textStr + =";} for (var j = 0; j < size; jacks +) {var theColor = getRandomColor (size); textList [I] [j] = theColor; textStr + ="+ theColor.colorName +" } textStr + = ";} return textStr; / / can equalize to get random integers from 0 to 9.}

Picture mode operation

/ / display picture mode function bindImg () {var traget = document.getElementById ("show-img-div"); var btnList = document.getElementsByClassName ("nfz-btn"); if (traget.style.display = = "none") {traget.style.display = "block"; that.bindBtn (btnList);} else {traget.style.display = "none"; that.bindBtn (btnList) }} / / Picture mode shows the corresponding function showImg (e) {var size = e.getAttribute ("data-value"); size = parseInt (size); that.bindImg (); const colorList = getTwoArray (size); / / console.log (colorList); var imgBody = document.getElementById ("imgBody"); imgBoy [XSS _ clean] = colorList;}

Prohibit other buttons

/ / disable button function bindBtn (btnList) {for (var btn of btnList) {btn.disabled =! btn.disabled;}} ② answer mode

Specific ideas

First of all, it needs to be based on the picture mode (except for the operation method of the picture mode). Similarly, you need a word that defines the color, and a hexadecimal of the corresponding color (there are 12 colors here)

Encapsulate a method to get a word (color) and a hexadecimal that does not correspond to a color (for example: blue (# 000000), that is, to display a blue word, and the font color is black)

You also need to define color subscript, options, and other related operations (see code comments for details)

Encapsulate the method of getting the question, click the option method, next question, display score, reset the game.

Let's do it!

Core code

Related parameters that need to be defined

/ / there are the previously defined colors, so do not repeat them here (see the complete code) / / Color subscript (easy to record, remove the same color, avoid the same color) var numberList = [0,1,2,3,4,5,6,7,8,9,10,11]; / / console.log (colorMap); var optList = ["A", "B", "C", "D"] / / option var msg = ""; / / prompt var isNext = true; / / whether the next question var optRightNum = 0; / / correct answer subscript let questionNumber = 10; / / default number of questions 10 (subscript from 0) let theQuerstionNumber = 0; / / number of questions let theResultNum = 0; / / score var theRightNum = 0; / / correct option

Show answer mode

/ / display answer function showQuestion (e) {that.bindQuestion (); if (e & & e.getAttribute ("data-value")) {questionNumber = e.getAttribute ("data-value");} var questionNum = document.getElementById ("questionNum"); answer Num [XSS _ clean] = questionNumber; that.getQuestion ();}

Let's have a question.

/ / Let's have a question function getQuestion () {optRightNum = Math.floor (Math.random () * 4); / / the subscript of the correct answer (get the random number 0x3) var size = questionNumber; size = parseInt (size); var theColor = getRandomColor (size); / / console.log (theColor); / / for (var I = 0trai

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.