Rewrite minesweeper (based on jquery) The novice has a shortage of places please understand

I remember when I first began to learn JS wrote a mine, an afternoon time is calculated to kill, the whole head is dizzy.

After entering the job, the free time to write a mine.

directly on the code.

(function() {functionModule () {this.length = 9; this. $con = $ (". Con"); This. Init (); } Module.prototype ={constructor: "module", init:function() {This. Create (); $ (". Con span"). ON ("MouseDown", $.proxy (This.downeve, this)); $ (". Con span"). ON ("MouseUp", $.proxy (This.upeve, this)); this. $con-On ("ContextMenu", function() {return false; })},//Generate element Create:function() {for (var i = 0; i < this.length * THIS.LENGTH; i++{this. $con. Append ("<span></span>")); } var _this = this; $ (". Con span"). each (function() {_this.bindstate ($ (This)); }); var random = This. Randomeve (); for (var i = 0; i < random.length; i++{$ (". Con span"). EQ (Random[i]). Data (). State.ismine = True; } $ (". Con span"). each (function() {_this.minenumeve ($ (This). index ()); }); },//Bind property Bindstate:function(ed) {Ed.data ("state", {open:false,//Whether open ismine:false,//Whether is mine minenum:0,//Mine number Banner:false,//IS flag}); },//click event Clickeve:function(e) {var $this =$ (e.currenttarget), index = $this. index (); var arr = This. Getsudoku (index); $this. Data (). State.open = True; if ($this. Data (). State.ismine) {//Mine $this. addclass ("Lei"); This. Gamneover (); return False; } else{This. Openeve (arr); $this. addclass ("White"); This.showeve ($this); }},//Right-click event riclickeve:function(e) {var $this =$ (e.currenttarget); if (! $this. Data (). State.open) {$this. Toggleclass ("banner"); $this. Data (). State.banner =! $this. Data (). State.banner; } else{return False}},//Double-click event douclickeve:function(e) {var _this = this; var index =$ (e.currenttarget). index (); var arr = This. Getsudoku (index); var count = 0, len = 0; Arr.foreach (function(value) {if (!value.data (). State.open &&!Value.data (). State.banner) {Value.addclass ("white")); len++; if (!Value.data (). State.ismine) {count++; }}) if (len = = Count && len! = 0) {Arr.foreach (function(value) {if (!value.data (). State.open &&!Value.data (). State.banner) {Value.addclass ("white")); _this.showeve (value); Value.data (). State.open = True; }})} setTimeout (function() {Arr.foreach (function(value) {if (!Value.data (). State.open) {Value.removeclass ("white")); }}), 300)},//mouse click to Judge downeve:function(e) {var _this = this; var $this =$ (e.currenttarget); if (e.buttons = = 1{if (! $this. Data (). State.banner &&! $this. Data (). State.open) {_this.clickeve (e);} else{return False; }} if (e.buttons = = 2{_this.riclickeve (e);} if (e.buttons = = 3) {if (! $this. Data (). State.banner) {_this.douclickeve (e);} else{return False; }}},//nine Gongkare Openeve:function(arr) {var _this = this, Count = 0; Arr.foreach (function(value) {if (!Value.data (). State.ismine) {count++; }}) if (count = =Arr.length) {Arr.foreach (function(value) {Value.addclass ("white"); Value.data (). State.open = True; _this.showeve (value); })}}, Showeve:function(value) {Switch(Value.data (). State.minenum) {Case 1: Value.css ({"Color": "#00f"}); Break; Case 2: Value.css ({"Color": "Green"}); Break; Case 3: Value.css ({"Color": "Red"}); Break; Case 4: Value.css ({"Color": "#0e0474"}); Break; Case 5: Value.css ({"Color": "#740404"}); Break; } if(Value.data (). State.minenum) {value.html (Value.data (). State.minenum);} },//Random mine randomeve:function() {var random =[]; for (var i = 0; i < ten; i++) {Random[i] = Math.floor (Math.random () * This.length * this.length-1); if (i > 0{for (var j = i-1; J >= 0; j--) {if (random[i] = =Random[j]) {i--; Break; }}}} returnRandom },//Determine number of mines minenumeve:function(index) {var _this = this; if ($ (". Con span"). EQ (index). Data (). State.ismine) {//Not for mine var arr =_this.getsudoku (index); Arr.foreach (function(value) {Value.data (). state.minenum++; }) }; },//Get the element inside the nine lattice getsudoku:function(index) {var arr =[]; /** First line star **/if (index = = 0{Arr.push ($ (". Con span"). EQ (Index + 1)); Arr.push ($ (". Con span"). EQ (Index + 9)); Arr.push ($ (". Con span"). EQ (Index + 10)); } if (index = = 8) {Arr.push ($ (". Con span"). EQ (index-1)); Arr.push ($ (". Con span"). EQ (Index + 8)); Arr.push ($ (". Con span"). EQ (Index + 9)); if (Index < 8 && index > 0) {Arr.push ($ (". Con span"). EQ (index-1)); Arr.push ($ (". Con span"). EQ (Index + 1)); Arr.push ($ (". Con span"). EQ (Index + 8)); Arr.push ($ (". Con span"). EQ (Index + 9)); Arr.push ($ (". Con span"). EQ (Index + 10)); }/** First line end **//** Middle star **/if (Index > 8 && Index < 72) {if (index% 9 = = 0) {Arr.push ($ (". Con span"). EQ (index-9)); Arr.push ($ (". Con span"). EQ (index-8)); Arr.push ($ (". Con span"). EQ (Index + 1)); Arr.push ($ (". Con span"). EQ (Index + 9)); Arr.push ($ (". Con span"). EQ (Index + 10)); } if ((Index + 1)% 9 = = 0) {Arr.push ($ (". Con span"). EQ (index-10)); Arr.push ($ (". Con span"). EQ (index-9)); Arr.push ($ (". Con span"). EQ (index-1)); Arr.push ($ (". Con span"). EQ (Index + 8)); Arr.push ($ (". Con span"). EQ (Index + 9)); if (index% 9 > 0 && (index + 1)% 9! = 0) {Arr.push ($ (". Con span"). EQ (index-10)); Arr.push ($ (". Con span"). EQ (index-9)); Arr.push ($ (". Con span"). EQ (index-8)); Arr.push ($ (". Con span"). EQ (index-1)); Arr.push ($ (". Con span"). EQ (Index + 1)); Arr.push ($ (". Con span"). EQ (Index + 8)); Arr.push ($ (". Con span"). EQ (Index + 9)); Arr.push ($ (". Con span"). EQ (index + ));}} /** Middle End **//** last line star **/if (index = = + ) {Arr.push ($ (". Con span"). EQ (index-1 ); Arr.push ($ (". Con spa n "). EQ (index-9 )); Arr.push ($ (". Con span"). EQ (index-10 )), if (index = = ) {Arr.push ($ (". Con span"). EQ (index + 1 )), AR R.push ($ (". Con span"). EQ (index-8 )); Arr.push ($ (". Con span"). EQ (index-9 )); if (Index > && i Ndex < ) {Arr.push ($ (". Con span"). EQ (index + 1 ); Arr.push ($ (". Con span"). EQ (index-1 )); Arr.push ($ (". Con span"). EQ (index-8 )); Arr.push ($ (". Con span"). EQ (index-9 ); Arr.push ($ (". Con span"). EQ (index-10 )); }/** last line end **/return  arr;},//Game over Gamneover:function  () {alert ("Game Over" )}} new  module ();} )(); 

Generate elements on initialization and bind attributes (open, mine, number of mines, flags), Ps:data () method is really useful

Create:function() {for            (var i = 0; i < this.length * THIS.LENGTH; i++) {this                . $con. Append ("<SPAN&G T;</span> ");            }            var _this = this;            $ (". Con span"). each (function() {                _this.bindstate ();}), var random = this. Randomeve (); var i = 0; i < random.length; i++) {$ (". Con span"). EQ (Random[i]). Data (). State.ismine = True;} $ (". Con span"). each (function() {_ This.minenumeve ($ (this). index ());}); },//Bind attribute Bindstate:function(ed) {Ed.data ("state", {open:false,//whether to open ismine:false,//Whether it is a mine minenum:0,/ /mine number Banner:false,//Whether it is a banner }); },

Dynamically generating elements and binding initial properties to elements via data

At the very beginning, the nine Gongge elements were made by the half-dead behind the dead; you can encapsulate a function through the index of the element to get the elements of the current element nine (all of a sudden there is a lot of code tears, this part did not think good, the old logic error)

Getsudoku:function(index) {var arr =[]; /** First line star **/if (index = = 0{Arr.push ($ (". Con span"). EQ (Index + 1)); Arr.push ($ (". Con span"). EQ (Index + 9)); Arr.push ($ (". Con span"). EQ (Index + 10)); } if (index = = 8) {Arr.push ($ (". Con span"). EQ (index-1)); Arr.push ($ (". Con span"). EQ (Index + 8)); Arr.push ($ (". Con span"). EQ (Index + 9)); if (Index < 8 && index > 0) {Arr.push ($ (". Con span"). EQ (index-1)); Arr.push ($ (". Con span"). EQ (Index + 1)); Arr.push ($ (". Con span"). EQ (Index + 8)); Arr.push ($ (". Con span"). EQ (Index + 9)); Arr.push ($ (". Con span"). EQ (Index + 10)); }/** First line end **//** Middle star **/if (Index > 8 && Index < 72) {if (index% 9 = = 0) {Arr.push ($ (". Con span"). EQ (index-9)); Arr.push ($ (". Con span"). EQ (index-8)); Arr.push ($ (". Con span"). EQ (Index + 1)); Arr.push ($ (". Con span"). EQ (Index + 9)); Arr.push ($ (". Con span"). EQ (Index + 10)); } if ((Index + 1)% 9 = = 0) {Arr.push ($ (". Con span"). EQ (index-10)); Arr.push ($ (". Con span"). EQ (index-9)); Arr.push ($ (". Con span"). EQ (index-1)); Arr.push ($ (". Con span"). EQ (Index + 8)); Arr.push ($ (". Con span"). EQ (Index + 9)); if (index% 9 > 0 && (index + 1)% 9! = 0) {Arr.push ($ (". Con span"). EQ (index-10)); Arr.push ($ (". Con span"). EQ (index-9)); Arr.push ($ (". Con span"). EQ (index-8)); Arr.push ($ (". Con span"). EQ (index-1)); Arr.push ($ (". Con span"). EQ (Index + 1)); Arr.push ($ (". Con span"). EQ (index + 8 )); Arr.push ($ (". Con span"). EQ (index + 9 ); Arr.push ($ (". Con span"). EQ ( Index + ten )); }}/** Middle end **//** last line star **/if (index = = + ) {Arr.push ($ (". Con span"). EQ (index-1 ); Arr.push ($ (". Con Span "). EQ (index-9 )); Arr.push ($ (". Con span"). EQ (index-10 )), if (index = = ) {Arr.push ($ (". Con span"). EQ (index + 1 )), AR R.push ($ (". Con span"). EQ (index-8 )); Arr.push ($ (". Con span"). EQ (index-9 )); if (Index > && i Ndex < ) {Arr.push ($ (". Con span"). EQ (index + 1 ); Arr.push ($ (". Con span"). EQ (index-1 )); Arr.push ($ (". Con span"). EQ (index-8 )); Arr.push ($ (". Con span"). EQ (index-9 ); Arr.push ($ (". Con span"). EQ (index-10 )); }/** last line end **/return  arr;},            /span>       

When judging the number of mines to change a way of thinking found good to write more and seems to be better efficiency. Previously, the number of mines in the nine of the element was judged based on the current element (non-mine). When it was rewritten, the number of mines was significantly higher than the number of non-mines. Why not use mine elements to manipulate elements in the nine lattice?
The following approach was adopted: the acquisition of the nine Gongge elements of the landmine element gives the Minenum (number of mines) attribute of the non-landmine element within the nine element plus 1. OK, and save a big lost code, how did not think before, was himself stupid cry.

Minenumeve:function(index) {            var _this = this;            if ($ (". Con span"). EQ (index). Data (). State.ismine) {                //For mine                var arr = _this.getsudoku (index);                Arr.foreach (function(value) {                    value.data (). state.minenum++;})};},     

As for the Click event, the double click event, and the right key event are not explained.

Say click to write a piece of thunder writing when still stuck in that, at present can only open nine Gongge. (now seems to be figured out, write a callback function should be able to solve, and so have passion to improve under the hands of the next);

Game end victory did not make judgment, but this function is not difficult (forgive me lazy) overall comparison rough look at it!

Finally put on the structure bar, the structure of the more simple style

<! DOCTYPE html>
At the time of writing seemingly did not write difficulty choice but if you understand a slight change in the difficulty of the selection function is not difficult (lazy cancer late, no way).
Rewrite minesweeper (based on jquery) The novice has a shortage of places please understand