jquery Simple don't step on the white block games

Write simple things, effect

1.html Code

1     <Divclass= "Warp">2         <Divclass= "title">3             <H3>Don't step on the white block.</H3>4         </Div>5         <ulclass= "Garea">6         </ul>7     </Div>

2.CSS Code

1 Body,2 ul,3 Li,4 P{5 margin:0;6 padding:0;7}8 9 Li{Ten List-style:None; One             /*border:1px solid #000;*/ A} -  - . Warp{ the width:960px; - margin:0 Auto; -} -  + . Title{ - text-align:Center; +} A  at         . Garea{ - Border:1px solid #000; - width:300px; - Height:550px; - margin:0 Auto; -} in  -         . Garea Li{ to Height:90px; +} -  the         . Garea Li P{ * float: Left; $ width:73px;Panax Notoginseng Height:100%; - Border:1px #c9c9c9 Solid; the} +  A . Black{ the Background-color:#000; +}

View Code3.js code, remember to introduce jquery first

1Init ();//Initialize page black and white blocks2 3         functioninit () {4Localstorage.setitem (' score ', ' 0 ');//Initialize current score5 6             varhtml = ' '7              for(Let i = 0; i < 6; i++) {8HTML + = ' <li> ';9                 varRandom = Math.floor (Math.random () * 3 + 1);Ten                  for(Let j = 0; J < 4; J + +) { One                     varBlack = ""; A                     if(j = random) {black = "black" }; -HTML + = ' <p class= "' + Black + '" onclick= "Cai (this); ></p> '; -                 } theHTML + = ' </li> '; -             } -$ ("ul"). prepend (HTML) -             if(Localstorage.getitem (' Maxscore ')) { +$ ('. Maxscore '). html (' History up to: ' + localstorage.getitem (' Maxscore '))) -             } +         } A         functionCai (obj) { at             //determine whether to click on the last line -             if($ (obj). Parent (). Index ()! = ' 5 ') { -                 return false; -             } -  -             //Judging If you step on the white block in             if(Obj.classname = = "") { -                 if(Localstorage.getitem (' score ') > Localstorage.getitem (' Maxscore ')-1) { toAlert ("Game over! You get the higher score is "+ localstorage.getitem (' score ')); +}Else { -Alert ("Game over! Your score is "+ localstorage.getitem (' score ')); the                 } *$ ('. Maxscore '). html (' History up to: ' + localstorage.getitem (' Maxscore '))) $Localstorage.setitem (' score ', ' 0 ')Panax Notoginseng                 //Game Over!  -}Else { the                 //The game continues + $ (obj). Parent (). remove (); A                 varp = ""; the                 varRandom = Math.floor (Math.random () * 4 + 1); +                  for(vari = 4; I >= 1; i--) { -                     varBlack = ""; $                     if(i = = random) {black = "black" }; $p + = ' <p class= "' + Black + '" onclick= "Cai (this); ></p> '; -                 }; -  the                 varhtml = ' <li> ' + p + ' </li> ' -$ ("ul"). prepend (HTML);Wuyi  the                 if(!localstorage.getitem (' Maxscore ')) { -Localstorage.setitem (' Maxscore ', ' 0 '); Wu                 } -  About                 if(Localstorage.getitem (' Score ')) { $Localstorage.setitem (' Score ', Localstorage.getitem (' score ') * 1 + 1) -                     if(Localstorage.getitem (' score ') * 1 > Localstorage.getitem (' maxscore ') * 1) { -Localstorage.setitem (' Maxscore ', Localstorage.getitem (' score ') * 1) -                     } A                 } +             } the};

Complete.

jquery Simple don't step on the white block games