Absolute introduction
The exam was finally over and I went home on holiday. Don't step on the white dot web version this time is better than beforejQuery writes web version 2048 mini gameTo be simple, the basic ideas are almost the same.
This blog is not a detailed explanation, but only introduces the function of the function. The implementation details are explained in the notes. The source code on the Internet is a bit messy. If you want to see a relatively neat source code or video, you can contact me QQ (free) (find a partner to learn together)
Ideas
This game can be abstracted into 3 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 (not visible)
◆The top layer is also a 4x3 two-dimensional array, which users can finally see.
We display the most basic 12 small squares through the bottom layer, with different colors. The middle layer corresponding to each grid has different values, and the upper layer is responsible for displaying the style.
Basic structure and style
The basic structure and style are quite simple, just look at the code
structure:
<body> <div > <h1>Don't step on white pieces</h1> <div >0.0000</div> </div> <div > <div class="grid" ></div> <div class="grid" ></div> <div class="grid" ></div> <div class="grid" ></div> <div class="grid" ></div> <div class="grid" ></div> <div class="grid" ></div> <div class="grid" ></div> <div class="grid" ></div> <div class="grid" ></div> <div class="grid" ></div> <div class="grid" ></div> </div> </body>
style:
body{
background-color: #008694;
font: 12px/20px "Bold" ,arial;
}
#header {
display: block;
margin: 0 auto;
width: 500px;
text-align: center;
}
#header h1 {
font-family: Arial;
font-size: 40px;
font-weight: bold;
}
#timer {
z-index: 4;
font-size: 24px;
color: #fa3c3c;
font-weight: 700;
text-shadow: 2px 2px 3px rgba(0, 0, 0, .3)
}
#container{
width: 302px;
height: 402px;
margin: 50px auto;
background-color: #55d769;
border: 5px solid #000;
position: relative;
}
.grid {
width: 100px;
height: 100px;
background-color: #fff;
border: 1px solid #000;
position: absolute;
}
.block {
width: 100px;
height: 100px;
border: 1px solid #000;
font-family: Arial;
font-weight: bold;
font-size: 20px;
color: #fff;
text-align: center;
position: absolute;
}
.coBlock{
background-color: #000;
}
.gameover {
display: block;
margin: 0 auto;
width: 300px;
text-align: center;
vertical-align: middle;
position: absolute;
}
.gameover p {
font-family: Arial;
font-size: 50px;
color: white;
margin: 50px auto;
margin-top: 150px;
}
.gameover span {
font-family: Arial;
font-size: 50px;
color: white;
margin: 50px auto;
}
.restartGame {
display: block;
margin: 20px auto;
width: 180px;
padding: 10px 10px;
background-color: #8f7a66;
font-family: Arial;
font-size: 30px;
color: white;
border-radius: 10px;
text-decoration: none;
}
.restartGame:hover {
background-color: #9f8b77;
}
There is no setting of the position of each grid here. The position is set by the js code, and the second layer of the two-dimensional array and the third layer of the display layer are set by the js. Here andjQuery writes web version 2048 mini gameThere is no big difference
Code:
function init(){
timerRan = 0.000;
keyDown = true;
for(var i=0;i<4;i++){
board[i] = [];
for(var j=0;j<3;j++){
board[i][j] = [];
var grid = $('#grid-'+ i +'-'+ j);
({
'top':getPosTop(i,j),
'left':getPosLeft(i,j)
});
$('#container').append('<div class="block" ></div>');
var block = $('#block-'+ i +'-'+ j);
({
'top':getPosTop(i,j),
'left':getPosLeft(i,j)
});
board[i][j] = 0;
}
}
function getPosTop(i,j){
return i*100;
}
function getPosLeft(i,j){
return j*100;
}
initialization
At the beginning of the game, a black square should be displayed at random positions in each row, and a prompt message should be displayed on the black square in the bottom row.
Code:
for(var i=0;i<4;i++){
var randj = parseInt((() * 3));
if(i >0 && board[i-1][randj] == 1){
randj = parseInt((() * 3));
}
$('#block-'+ i +'-'+ randj).addClass('coBlock');
board[i][randj] = 1;
}
$('#block-3-0').text('Press J to start the game'); $('#block-3-1').text('Press K to start the game'); $('#block-3-2').text('Press L to start the game');
Basic Operation
We use switch loops to perform different operations according to different user inputs
Code:
$(document).keydown(function(event) {
switch(){
case 74:
if(board[3][0] == 1 && keyDown){
timeRan();
clearText();
moveDown();
}else{
isgameover();
}
break;
case 75:
if(board[3][1] == 1 && keyDown){
timeRan();
clearText();
moveDown();
}else{
isgameover();
}
break;
case 76:
if(board[3][2] == 1 && keyDown){
timeRan();
clearText();
moveDown();
}else{
isgameover();
}
break;
}
});
The purpose of setting the keyDown global variable here is to prevent the user from continuing to press the key at the end of the game.
timeRan() function displays game time
Code:
function timeRan(){
clearTimeout(timer);
timerRan += 0.001;
$('#timer').text(().slice(0,5));
timer = setTimeout(function(){
timeRan();
},1);
}
The clearText() function removes the prompt information on the bottom line after the game starts
Code:
function clearText(){
$("#block-3-0").text("");
$("#block-3-1").text("");
$("#block-3-2").text("");
}
moveDown() is the main function of block movement. Because the block needs to move downward, we need to traverse the two-dimensional array from the bottom. If the grid is black and on the bottom line, it just simply changes the color of the grid back to white. If the grid is black and on the first line to the third line, the grid becomes white, and a grid directly below it becomes black. Finally, a black grid is displayed at a random position on the first line.
Code:
function moveDown(){
for(var i=3;i>=0;i--){
for(var j=2;j>=0;j--){
if(board[i][j] == 1){
if(i == 3){
$('#block-'+ i +'-'+ j).removeClass('coBlock');
board[i][j] = 0;
}else{
$('#block-'+ i +'-'+ j).removeClass('coBlock');
board[i][j] = 0;
$('#block-'+ (i+1) +'-'+ j).addClass('coBlock');
board[i+1][j] = 1;
}
}
}
}
var randj = parseInt((() * 3));
$('#block-0-'+ randj).addClass('coBlock');
board[0][randj] = 1;
}
isgameover() is a function that displays the end of the game style, which is relatively simple
Code:
function isgameover(){
keyDown = false;
clearTimeout(timer);
$('#container').append('<div class="gameover"><p>This time</p><span>'+ ().slice(0,5) +'</span><a href="javascript:restartGame()" class="restartGame">Start again</a></div>'); var gameover = $("#gameover");
("width", "300px");
("height", "400px");
("background-color", "rgba(0, 0, 0, 0.5)");
}
function restartGame(){
$('#timer').text('0.000');
$('#gameover').remove();
$('.block').remove();
init();
}
Summarize
If I learned this little game beforejQuery writes web version 2048 mini game, you will think this is quite simple, the basic ideas and methods are similar. If you have any suggestions, or if you want to see a neat source code or video, you can contact me QQ (free) (find a partner to study together)
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!