My front story----Happy Tycoon (￣︶￣) ↗ (Roll dice + chessboard)

11 is coming soon ~ ~ as the front-end of the small partner ~ Activity page must be indispensable ~ that how to attract eyeballs it? Of course is playing the game ~ this time brings me a small game for 11, as a foil in the activity page ~ ~

So what kind of game do we have? First ~

Because the actual because of the company's activities, I do not post it ~ Here to use this chessboard to roughly illustrate the effect of the ~ here are the rules of the game:

1, when the user sees the board, the pawn appears in the last stop position;

2, when the user clicks the start, the middle of the dice start shaking, and finally stop in the server back before the number;

3, when the dice end animation, the pawn or move, step by step forward, encountered four vertices when the automatic turn, and finally stay in the dice step forward position before;

4, when the pieces end moving, the page shows the last number of games left by the user, and if you move to the location of the gift, the pop-up mask tells the user to win;

5, during the entire game, the user is not allowed to continue to click the Start button, and when the user left the number of times after the Start button color;

The rules of the game are explained, then the demand analysis is here, the following describes the page layout:

HTML structure:

<Divclass= "Game">    <Divclass= "Gameimg">             <DivID= "Pieces"class= "p0-0">    <!--Chess Pieces -                 <imgsrc= "Images/pieces.png" />             </Div>        <Divclass= "Play">             <Divclass= "Dice">     <!--Dice -                 <imgID= "Dice"class= "Dicelo2"src= "Images/dice.png" />             </Div>             <Divclass= "Playnum">you also have today<spanID= "PN">0</span>second game Opportunity</Div>             <DivID= "Playbtn">                  <imgsrc= "Images/btn_start_gray.png" />             </Div>         </Div>    </Div></Div>

The overall structure is a large div tag with the background of the entire board, and the pieces are positioned in 18 positions on the background map by relative layout, and the dice and start buttons and descriptions are centered on the background image.

CSS style:

For CSS styles, the main use is relative positioning, set the 18-position CSS style, and the naming rules are named according to the ' p0-0 ' way? Why would I do that? This allows the location of the matrix coordinates to be saved with the class name. The position on the board 1 corresponds to the coordinates of 1-0, 2 corresponds to 2-0 ... and so on. Finally, you can conveniently set the position of the pieces. At the same time, the animation of the dice is based on a whole PNG image to locate. From 1 to 6 of the dice and then the 3 images that are moving, altogether 9 pictures are saved in a whole PNG, then the relative positioning is still used to show the user. The first is that the dice begin to move, and I cycle through the last 3 animated images, and then hover over the position to display the corresponding number before the animation ends.

It's obvious what I'm trying to do with some of the pictures.

Javascrpt Logic Chapter:

The first is to enter the page loading, the process is the first through the JSONP request server, get the user's last pawn position, and the number of remaining times and other basic information, and then render in the page, I am not here to expand, here is to say that is responsible for the chess piece movement and dice shake logic part.

Then according to the rules of the game, the first is the roll of the dice, when the Start button after the request server end call the dice execution function, and then the number of dice returned by the server and the location to the copy of the Dice animation function.

/* * * operation of the dice execution function * * @method play_dice * * @param  {ing}  Dice_num  [Dice number] * @param  {int}  */function  play_dice (Dice_num, Next_step) {     var _stop = dice_num,        = next_step;    Diceroll ($ (' #dice '), _stop, _pande);}

/** * shake the dice animation function * * @method diceroll * * @param {object} dice [Dice Object] * @param {int} num [result of shaking] * @param {int} _pande [where the pieces stop]*/functiondiceroll (Dice, num, _pande) {vari = 0, b= 0, a=function(i) {b= SetTimeout (function() {Dice.removeclass (). addclass (' Dicelo ' + (i% 3 + 7));//clears the number of points after the last animationi++; if(I > 5) {                  //The dicelo9 here is the class name of the last animation of the dice, which is deleted and then added in turn Dicelo7,dicelo8Dice.removeclass (' Dicelo9 '). addclass (' Dicelo ' +num); varj = $ (' #pieces '). attr (' class '). substr (1) | | 1, N= j +_pande; varOldstep = _pande-num-1; Person.step=num; Run (person,true);//1 Right, 2 down, 3 left, 4 upcleartimeout (b); I= 0; } Else{A (i); }          }, 200);    }; A (i);}

Here through a timer, constantly cycle the dice shake this animation, and then after the execution of 5 times to let the dice stop, while clearing the timer, and then after the dice stop shaking the function of the movement of the pieces, in the run function requires two parameters, if the second argument is true , let the pawn still move, otherwise it just calculates the matrix coordinate of the piece. and person This object holds coordinates position start: [0, 0], the number of steps to advance step, and the current direction of the De,de value I set to 1 right, 2, 3 left, 4 on . Here is the function of the pawn movement.

/** * Control the movement of the chess piece and the conversion of the checkerboard coordinates * * @method Run * * @param {object} person [the coordinates of the piece moved] * @param {Boolean} isAn [if the piece needs to be moved] * * return {object} [coordinate of pawn movement]*/functionrun (person, isAn) {var_start =Person.start, _step=Person.step, _de=person.de; //the coordinate set of the pawn movement processGamelist =NewArray ();  for(vari = 1; I <= _step; i++) {        if(_de = = 1) {//Move the pawn to the right_start[0] + = 1; if(_start[0] = = 5) {_de= 2; }        }Else if(_de = = 2) {//Pawn Move Down_START[1] + = 1; if(_start[1] = = 4) {_de= 3; }        }Else if(_de = = 3) {//Move the pawn to the left_start[0] + =-1; if(_start[0] = = 0) {_de= 4; }        }Else if(_de = = 4) {//move the pawn up ._START[1] + =-1; if(_start[1] = = 0) {_de= 1; }} gamelist.push ([_start[0], _start[1]]);//Save the moved results in the collection    }    //executes when a pawn is required to move    if(isAn) {varj = 0, D= 0, C=function(j) {D= SetTimeout (function() {                  $(' #pieces '). attr (' class ',NULL). addclass (' P ' +gamelist[0][0] + '-' +gamelist[0][1]); Gamelist.shift (0); J++; if(Gamelist.length = = 0) {//If the piece moves, the result pops up.Returndice (_start);                  Cleartimeout (d); } Else{C (j); }              }, 500);        };    C (j); } Person.start=_start; Person.step= 0; Person.de=_de; returnPerson ;}

Here is still the use of the timer to repeat the movement of the pieces, because the timer is executed asynchronously, so I will be the function of the result of a motion saved in the array, and then in the asynchronous timer to iterate through the array of results, each time the first result in the array is removed, after the move to remove the first result, The next result comes on top, the first result that is next taken out is the one that needs to be moved, finally clears the timer at the end of the move and the queue is emptied, and then I execute the returndice function in the code to show the result after the move. If you win, bring up the mask to prompt the user for an award.

Summarize:

To here, all of the basic logic is understood, in fact, the overall is 3 functions of the loop call, in order to ensure the performance on the mobile side, in each timer after the end of the need to clear off the timer, or there will be a timer coverage, in my test if not timely removal of the timer, In the execution of the 20000+, there will be a move step less than the actual situation, the first time I wrote a check function at the end of the final piece to ensure that the end of the position and the return of the server back to the same, originally thought to be the error, the results later testing when the check will appear when the Checkers flashes, This is a very bad user experience, and according to the logic of my pawn movement, it is impossible to appear dislocation, so theoretically do not need to check the function, so after careful review of the code found the second pawn movement of the timer after use and did not clear in time, in the user's game less times is difficult to appear bug , but the automatic test time close to the infinite number of times is prone to error, so it is very important bug, fortunately found in time ... O (︶^︶) O Finally, in order to ensure that the user cannot continue to click the Start button during a single game, the global lock is set to False when the dice start, and then the global lock is opened after the last pawn has been moved. So far, all the rules of the game are met ~ ~

Let's get here today ... Next time bring a page the effect of the marquee ~ ~

My front story----Happy Tycoon (￣︶￣) (Roll dice + chessboard)