JQuery practices-do not step on the white block web edition, jquery practices
Too many rows too many rowsIntroduction
I finally finished my exam and went home from the holiday. This is easier than the previous jQuery practice-web version 2048 games. The basic idea is similar.
Preview: Do not step on the white block web page
This blog does not give a detailed explanation, but just gives a general introduction to the functions. The implementation details are explained in the annotations, and the source code on the Internet is a bit messy, if you want to view the neat source code or video, contact me via QQ (free of charge) (find a partner to learn together)
Train of Thought
This game can be abstracted into three layers
◆ The bottom layer is the basic style (visible)
◆ The middle layer is the most important. It is a 4x3 two-dimensional array. In the game, we operate on this two-dimensional array (invisible)
◆ The top layer is also a 4x3 two-dimensional array that the user can finally see
We use the bottom layer to display the most basic 12 small squares with different colors. The middle layer of each lattice has different values. The top layer is responsible for displaying the style.
Basic structure and style
The basic structure and style are quite simple. You can directly view the code.
Structure:
1 <body> 2 <div id = "header"> 3 View CodeStyle:
1 body {2 background-color: #008694; 3 font: 12px/20px "", arial; 4} 5 # header {6 display: block; 7 margin: 0 auto; 8 width: 500px; 9 text-align: center; 10} 11 12 # header h1 {13 font-family: Arial; 14 font-size: 40px; 15 font-weight: bold; 16} 17 # timer {18 z-index: 4; 19 font-size: 24px; 20 color: # fa3c3c; 21 font-weight: 700; 22 text-shadow: 2px 2px 3px rgba (0, 0, 0 ,. 3) 23} 24 # container {25 width: 302px; 26 height: 402px; 27 28 margin: 50px auto; 29 background-color: #55d769; 30 31 border: 5px solid #000; 32 position: relative; 33} 34. grid {35 width: 100px; 36 height: 100px; 37 background-color: # fff; 38 39 border: 1px solid #000; 40 position: absolute; 41} 42. block {43 width: 100px; 44 height: 100px; 45 border: 1px solid #000; 46 font-family: Arial; 47 font-weight: bold; 48 font-size: 20px; 49 color: # fff; 50 text-align: center; 51 position: absolute; 52} 53. coBlock {54 55 background-color: #000; 56} 57. gameover {58 display: block; 59 margin: 0 auto; 60 width: 300px; 61 text-align: center; 62 vertical-align: middle; 63 64 position: absolute; 65} 66 67. gameover p {68 font-family: Arial; 69 font-size: 50px; 70 color: white; 71 margin: 50px auto; 72 73 margin-top: 150px; 74} 75 76. gameover span {77 font-family: Arial; 78 font-size: 50px; 79 color: white; 80 margin: 50px auto; 81} 82 83. restartGame {84 display: block; 85 margin: 20px auto; 86 87 width: 180px; 88 padding: 10px 10px; 89 background-color: #8f7a66; 90 91 font-family: arial; 92 font-size: 30px; 93 color: white; 94 95 border-radius: 10px; 96 97 text-decoration: none; 98} 99 100. restartGame: hover {101 background-color: #9f8b77; 102}View Code
The position of each grid is not set here. The position is set by js Code, and the two-dimensional array on the second layer and the display layer on the third layer are set by js, there is no big difference between this and jQuery practices-web version 2048 games
Code:
1 function init(){ 2 timerRan = 0.000; 3 4 keyDown = true; 5 6 for(var i=0;i<4;i++){ 7 board[i] = []; 8 for(var j=0;j<3;j++){ 9 10 board[i][j] = [];11 12 var grid = $('#grid-'+ i +'-'+ j);13 grid.css({14 'top':getPosTop(i,j),15 'left':getPosLeft(i,j)16 });17 18 $('#container').append('<div class="block" id="block-'+ i +'-'+ j +'"></div>');19 var block = $('#block-'+ i +'-'+ j);20 block.css({21 'top':getPosTop(i,j),22 'left':getPosLeft(i,j)23 });24 25 board[i][j] = 0;26 }27 }View Code1 function getPosTop(i,j){2 return i*100;3 }4 5 function getPosLeft(i,j){6 return j*100;7 }View Code▓ Initialization
At the beginning of the game, a black square should be displayed at random positions on each line, and a prompt message should be displayed on the black square at the bottom of the line.
Code:
1 for (var I = 0; I <4; I ++) {2 3 var randj = parseInt (Math. floor (Math. random () * 3); 4 5 if (I> 0 & board [I-1] [randj] = 1) {6 randj = parseInt (Math. floor (Math. random () * 3); 7} 8 9 $ ('# block-' + I + '-' + randj ). addClass ('coblock'); 10 11 board [I] [randj] = 1; 12} 13 14 $ ('# block-3-0 '). text ('start game by J '); 15 $ (' # block-3-1 '). text ('start game by K '); 16 $ (' # block-3-2 '). text ('start game by L ');View CodeBasic operations
We use the switch loop to perform different operations based on different user input.
Code:
1 $(document).keydown(function(event) { 2 switch(event.keyCode){ 3 case 74: 4 if(board[3][0] == 1 && keyDown){ 5 timeRan(); 6 clearText(); 7 moveDown(); 8 }else{ 9 isgameover();10 }11 break;12 case 75:13 if(board[3][1] == 1 && keyDown){14 timeRan();15 clearText();16 moveDown();17 }else{18 isgameover();19 }20 break;21 case 76:22 if(board[3][2] == 1 && keyDown){23 timeRan();24 clearText();25 moveDown();26 }else{27 isgameover();28 }29 break;30 31 }32 });View CodeThe purpose of setting the global variable keyDown here is to prevent the user from continuing to press keys at the end of the game.
The timeRan () function shows the game time.
Code:
1 function timeRan(){2 clearTimeout(timer);3 timerRan += 0.001;4 $('#timer').text(timerRan.toString().slice(0,5));5 timer = setTimeout(function(){6 timeRan();7 },1);8 }View Code
ClearText () is a function that removes the following line of prompt information after the game starts.
Code:
1 function clearText(){2 $("#block-3-0").text("");3 $("#block-3-1").text("");4 $("#block-3-2").text("");5 }View Code
The moveDown () function is the most important function for Square movement. Because the square is to move down, we need to traverse the two-dimensional array from the very bottom, if the grid is black and is the bottom line, it simply turns the color of the grid back to white. If the grid is black and is from the first row to the third row, the grid turns white, and a grid at the bottom of it turns black. Finally, a Black Grid is displayed at a random position on the first line.
Code:
1 function moveDown(){ 2 for(var i=3;i>=0;i--){ 3 for(var j=2;j>=0;j--){ 4 if(board[i][j] == 1){ 5 if(i == 3){ 6 $('#block-'+ i +'-'+ j).removeClass('coBlock'); 7 board[i][j] = 0; 8 }else{ 9 $('#block-'+ i +'-'+ j).removeClass('coBlock');10 board[i][j] = 0;11 12 $('#block-'+ (i+1) +'-'+ j).addClass('coBlock');13 board[i+1][j] = 1;14 15 }16 }17 }18 }19 20 var randj = parseInt(Math.floor(Math.random() * 3));21 $('#block-0-'+ randj).addClass('coBlock');22 board[0][randj] = 1;23 }View Code
Isgameover () is a function used to display the game end style, which is relatively simple.
Code:
1 function isgameover () {2 keyDown = false; 3 clearTimeout (timer); 4 $ ('# iner '). append ('<div id = "gameover" class = "gameover"> <p> This time </p> <span>' + timerRan. toString (). slice () + '</span> <a href = "javascript: restartGame ()" class = "restartGame"> restart </a> </div> '); 5 var gameover = $ ("# gameover"); 6 gameover.css ("width", "300px"); 7 gameover.css ("height", "400px "); 8 gameover.css ("background-color", "rgba (0, 0, 0, 0.5)"); 9}View Code1 function restartGame(){2 $('#timer').text('0.000');3 $('#gameover').remove();4 $('.block').remove();5 init();6 7 }View CodeSummary
This little game, if you have learned the previous jQuery practice-web version 2048 games, will think this is quite simple, the basic ideas and methods are similar, if you have any suggestions or want to view the neat source code or video, contact me via QQ (free of charge) (find a partner to study together)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
