JS implementation to find color block games

Before using WPF to do a simple small game, look for different color blocks, WPF can be implemented, JS more easy, and then use JS to do a, logic almost, but the code is implemented differently

First up effect

The key code is as follows

<! DOCTYPE html>"http://www.w3.org/1999/xhtml">"Content-type"Content="text/html; Charset=utf-8"/> <title> Games </title> <meta name="Viewport"Content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no"> <script src="Scripts/jquery-1.8.2.min.js"></script> <style>. divhead {height:50px; Vertical-Align:middle; Line-height:50px; Font-size:20px;            Color: #ff6a00;            width:400px;            Display:block; Text-Align:center; }. divhead span {font-size:32px;                Color: #0094ff; Font-Weight:bold;            }. divcontent {width:400px;            position:initial; border:1px Solid #808080; Margin:0; }. divcontent. divitem {float: Left; Display:inline-Block;                width:98px;                border:1px solid #ff6a00; Background-color: #ffd800;            height:98px; }    </style> <script type="Text/javascript">varLevel =2;//first off, 2x2        varLevelshow =2;//Show Level fields        varCavwidth = -;//Define container total width height unchanged        varItemwidth =0;//Color block Width height        varMaxlevel =8;//Maximum Level        varcolors = [           ["#FF6B6B","#F16565"],           ["#FF9869","#E88A5F"],           ["#FFB269","#E8A15F"],           ["#FFC369","#E1AC5C"],           ["#F0E663","#E1D95C"],           ["#DAF063","#D5E960"],           ["#FFFF93","#C1E95B"],           ["#8CD74E","#93DC57"],           ["#7FEBC7","#90FBD7"]        ]; //Color Array$ (function () {onInit ();        }); function OnInit () {$ ("#level"). HTML (Levelshow-1); $(". Divcontent"). empty (); //Loading DataItemwidth = cavwidth/Level ; varOtherindex = Getrandomnum (level * level-1);//not the same one.Console.log (Otherindex); //lbllevel.content = string. Format ("{0} off", level-1);            varSTRs = Colors[getrandomnum (Colors.length-1)]; varCOLORBTNBG = strs[0];  for(vari =0; I < level; i++) {                 for(varj =0; J < level; J + +) {                    //Add a color block (button) to a container                    varItem = $ ('<div></div>');//Create a Sub divItem.addclass ("Divitem"); Item.css ({'width': (Itemwidth-2) +'px',//2 is Border width                        'Height': (Itemwidth-2) +'px',                        'Background-color': COLORBTNBG}); Item.appendto ($ (". Divcontent")); //randomly generated color block number, color change to a similar color, when clicked on the color block to find out the difference, enter the game next level                    if(Otherindex = = I * level +j) {//Strs[1]                        varOther = $ (". Divcontent"). Find ("Div") [Otherindex]; //other.attr ("Background-color", Strs[1]);Other.style.backgroundColor = strs[1]; $ (other). Bind ({click:function () {//The number is not increasing when the maximum level is reached, otherwise a row of color blocks will be more than one column at a time                                if(Level <=maxlevel) { level= level +1; } levelshow= Levelshow +1;                                OnInit ();                            Console.log (level);                    }                        }); }                    //CavContent.Children.Add (BTN);                }            }        }        //Generate random numbersfunction Getrandomnum (Max) {varMin =0; varRange = Max-Min; varRand =Math.random (); return(Min + math.round (Rand *Range)); }    </script>class="Divhead">Section<span id=" Level"></span>off</div> <divclass="divcontent"> </div></body>View Code
JS implementation to find color block games