Lab Building Project Lesson study notes-jquery Flip puzzle game

jquery Flip puzzle game is mainly through jQuery and Bootstrap 3 implementation, the UI is mainly used by Bootstrap the pop-up Modal window, the other modules involved less, so do not need to be particularly familiar with Bootstrap, game logic through jQuery and JavaScript implementation.

Project:

game/index.html

<!        DOCTYPE html>
　　
game/css/style.css：
. container {    width:600px;    margin:0 Auto;} /* Game level */.scorescontainer {    float:right;    Text-align:right;    font-size:18px;} /* Game button */.abovegame:after {    display:block;    margin:20px 0;    Content: "";    Clear:both;} /* Game Area */.board {    position:absolute;    Background-color: #5f5f5f;    border-radius:4px;}. gamesquare {    float:left;    margin-right:15px;    border-radius:3px;}
Game/js/game.js
function Stylehelper () {/////control the block size in the game area//this.setgridsize = function (level) {var margin = thi        S.getmargin (level);        var res = ($ ('. Container '). Width ()-margin * level)/(level);        Set the size and spacing of the block $ ('. Gamesquare '). CSS (' margin-right ', margin);        $ ('. Gamesquare '). CSS (' width ', res);        $ ('. Gamesquare '). CSS (' height ', res);        Set the height, right margin, and bottom margin of each row to $ ('. Gamerow '). CSS (' height ', res);        $ ('. Gamerow '). CSS (' margin-right ', Margin * (-1));        $ ('. Gamerow '). CSS (' margin-bottom ', margin);        Set the padding for the game area $ ('. Board '). CSS (' padding ', margin);    $ ('. Board '). CSS (' Padding-bottom ', 0);    }; Get Margin This.getmargin = function (level) {if ( level<= 6) return 15; if ( level>   ) return 5;    return 20-level; };}    function game () {/////Control game//var = this;    Game level this.level = 1;    Create objects to control the game THIS.GB;    this.sh = new Stylehelper ();        This.processclick = function (W, h) {This.gb.processClick (W, h);        This.updatecounts ();        if (This.gb.isGameWin ()) {this.gameend ();    }}//start Game This.begingame = function () {self.setuplevel ();        }//Game Over this.gameend = function () {this.level++;    This.resetgame ();        }//Game Clearance This.resetgame = function () {$ (' #levelDescriptor '). HTML ("entry level" + This.level);        SetTimeout (function () {self.setuplevel ();    }, 500);        }//Initialize game level this.setuplevel = function () {THIS.GB = new GameBoard (This.level, this.level);            $ ('. Board '). HTML ("");              Empty the game panel this.gb.populate ();           Resets all tiles to orange self.gb.renderBoard (); Render the game panel and create a tile SELf.sh.setGridSize (This.level);             Control the block size in the game area self.updatecounts ();            Update shows current level self.applybindings ();  Flips the color of tiles around a point tile}//Displays the current level this.updatecounts = function () {$ (". Currlevel"). HTML ("current level:<b>"+ This.level +"</b> "); } this.applybindings = function () {$ ('. Gamesquare '). Click (function () {//To get the location of the clicked tile Var            CNAME = $ (this). Context.className.split ("") [1];            var coord = cname.substring (5). Split ("Q");            var height = parseint (coord[1]);            var width = parseint (coord[0]); Self.processclick (width, height);    Flips the color of the tile around the point tile});        }//Start new Game This.onnewgameclick = function () {this.level = 1;    This.setuplevel ();    }}function gameboard (wd, HI) {/////game panel////Tile coordinates this.high = hi-1;    This.wide = wd-1;    This.count = 0; Transverse coordinates are wide and the longitudinal coordinates are high//0 | 1 | 2 | 3 |   ....//------------//0 |   |   |     |   --------------//1 | | [2]    [1]//-//2//////:////Create tile two-dimensional array this.board = new Array (wd); for (var i = 0; I <= This. wide; i++) {This.board[i]= newArray (HI); }//render the game panel and create a tile This.renderboard= function (){var s= ""; for (Var j= 0;J <= This.high;J + +) {s += "<div class= ' Gamerow ' >"; for (var i= 0;I <= this.wide;i++) {s += "<div class= ' gamesquare coord"+ i + "Q" + j + "'></Div>"; } s + = "</Div>";        } $ ('. Board '). HTML (s); for (var i = 0; I<= This. wide; i++) {for (Var j= 0;J <= This.high;J + +)            {This.processclickview (I, j); } }} This.processclick= function (W,h) {////Flip the color of the tile around the point tile////Find the tile that needs to flip color around the point tile var lowx= w-1; var highx= w+ 1; var Lowy= h-1; var highy= h+ 1; Check if the clicked tile is an edge tile if (w== 0) Lowx= 0; if (w== this.wide) Highx= This.wide; if (H== 0) Lowy= 0; if (H== This.high) Highy= This.high; //Flip the point tile vertical direction tile for (var i= Lowy;I <= Highy;i++) {if (This.board[w][i]== 0) {This.board[w][i]= 1; this.count++; } else {This.board[w][i]= 0; this.count--;        } this.processclickview (w, i); }//Flip tile for the horizontal direction of the point tile for (var i= lowx;I <= HIGHX;i++) {if (I== W) continue; if (This.board[i][h]== 0) {This.board[i][h]= 1; this.count++; } else {This.board[i][h]= 0; this.count--;        } this.processclickview (I, h); }}//Flip tile color This.processclickview= function (W,h) {var coord= ". Coord"+ w + "q" + H; if (This.board[w][h]== 0) {$ (coord). CSS ("Background-color", "#e8BB39");        } else {$ (coord). CSS ("Background-color", "#6060e0"); }}//Reset all tiles to orange this.populate= function (){for (var i= 0;I <= this.wide;i++) {for (Var j= 0;J <= This.high;J + +) {This.board[i][j]= 0; }}}//Game victory This.isgamewin= function (){return This.count== (this.wide + 1) * (This.high + 1); }}//Initialize game $ (document). Ready (function () {//create game Var games= newGame ();    Start Game game.begingame ();    Resets the game area tile $ (' #resetLevelConfirm '). Click (function () {game.setuplevel ();    });    Start a new game $ (' #newGameConfirm '). Click (function () {Game.onnewgameclick (); });});
Detailed explanation: http://www.shiyanlou.com/inside view jquery Flip puzzle game
 
Lab Building Project Lesson study notes-jquery Flip puzzle game