"2048 games"--css/native js crawl pit Pure CSS modal dialog box & Game End

Introduction: 2048 the end of the game interface, using the pure CSS to make modal dialog box, the General modal dialog box will be used bootstrap the modal dialog box components for ease of use, but in the production to run on the mobile side of the small project, you can not use bootstrap, because the file is too large, the download time , consuming traffic.

The composition of a modal dialog box

2 Div, one full graphic, one display content

• Pit: How to make a div full of graphic? Resolution: 2 Ways

1. wide and high 100%→position:absolute;→top=0;left=0;
2. Four directions Margin-top/left/right/bootom are set to 0

• Pit: How do I get a div centered across the window?

1. Error procedure: Top/left 50% cannot be centered because Top/left is positioned in the upper-left corner
2. Correct practice: Top/left 50%→margin-top:-100px; (half of the height) margin-left:-150px; (half of the width)

• Pit: The transparency of the modal box background div opacity is inherited from the parent element.
• Solution: Background:rgba (55,55,55,.5); Use RGBA () to avoid inheritance
• Key Code ↓

<DivID= "Gameover">    <P>GAME over! <BR>Score:<spanID= "final">0</span><BR>        <aclass= "BTN"href= "Javascript:start ();">TRY again!</a>    </P></Div>

P{width:480px;margin:0 Auto;font-size:40px;Font-weight:Bold;font-family:Arial;Padding-top:15px;}#gameover{position:Absolute;Top:0; Left:0;width:100%;Height:100%;background:Rgba (55,55,55,0.5);}

Second, the game is over

• Game status: 2048 games have two game states

1. Run in →game over modal dialog box does not display
2. Game end →game over modal dialog box display

• Standard state preservation: Defines constants for each state name (generally all uppercase letters), making special values meaningful and easy to maintain

1. Const running= 1,gameover=0;
2. RUNNING and Gameover are just a name, actually stored or 1/0, so the storage space is not increased
3. Pit: Judging when the game is over
4. FIX: Create a key function function Isgameover () {}

• The game has no end condition:

1. There are 0
2. The current element is equal to the right element (not compared to the left element, since the element on the left has been compared to the current element; the right-most column element has no right-side element and no comparison with C < CN-1)
3. The current element is equal to the lower element (not compared to the above element, since the above element is already compared to the current element; the bottom row element has no lower element and no comparison R < RN-1)

• After each move, call once Isgameover () to determine if the game is over

1. Pit: Call Isgameover () after randomly generated number → random number to fill up the space before you can play the game to end the judgment

• Key Code ↓

var status=0; // save game State   0: Game over  1: Run in const running= 1,gameover=0;

function start () {    // Create an empty array to save to data    status=running;  resets the game state to the running    score=0;   Zero The score ...     }

//determine if the game is overfunctionIsgameover () { for(varr=0;r<rn;r++){         for(varC=0;c<cn;c++){            if(data[r][c]==0)                return false; if(c<cn-1&&data[r][c]==data[r][c+1])                return false; if(r<rn-1&&data[r][c]==data[r+1][c])return false; }        return true; }}

if (before!= after ) {randomnum ();          Isgameover ();        Updataview (); }

NOTE: Reprint please indicate the source

"2048 games"--css/native js crawl pit Pure CSS modal dialog box & Game End