JS implementation to find color block games

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.