After watching the video yesterday, I sorted out my ideas and completed the simple version of eliminating stars.
Ideas:
Module 1:initialization
- Initialize total score, current score, background picture, selected star score
- Initialize the stars (generate a two-dimensional array, style each object of the two-dimensional array (length, width, background image), generate a two-dimensional array div element node and insert it into the game panel)
Module 2:Predictions
judge:
Move the mouse to a certain square to determine whether there are small blocks connected up, down, left and right (using a recursive method), and then store it in the array choose[]. When moving to other squares, choose is empty
Flashing:
Set the selected small squares to style (zoom)
Show selection score:
Set the initial score and incremental score, calculate the selected score based on the selected block number
Module 3:Click
disappear:
Click the selected small squares, set all connected small squares to empty in the position of the two-dimensional array, and clear the choice array
move:
Move down: Set a pointer to the bottom line. Whenever row +1, if you encounter a block that is not empty, pointer++. If you encounter a behavior of the column, set the number of rows of pointer to i.
Move left: If there is a column at the bottom row that is empty, turn the column -1 of all the squares on the right
judge:
After each click is completed, determine whether the game is over
Code section
html
The html structure is very simple
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./"></script> <link rel="stylesheet" href="" > </head> <body> <div > <div >Target score：2000</div> <div >Current score：0</div> <div >0piece 0point</div> </div> </body> </html>
CSS
The layout of the css is also very simple, I believe I don't need to say it
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
width: 100%;
}
#pop_star {
width: 500px;
height: 100%;
background: url("./pic/");
margin-left: auto;
margin-right: auto;
position: relative;
background-size: cover;
font-size: 0px;
}
#target_score {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
font-size: 20px;
position: relative;
}
#now_score {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
font-size: 20px;
position: relative;
}
#select_score {
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
color: white;
font-size: 20px;
position: relative;
opacity: 0;
}
JS
/*
Create a two-dimensional array
*
*
* */
var table ;
var suqareWidth = 50 ; //A star/block side lengthvar boardWidth = 10 ; //The number of horizontal and vertical blocksvar squareSet = [];//Set of small squares, two-dimensional arrayvar choose = [];//There are adjacent small squares, put them in this arrayvar timer = null ;
var baseScore = 5 ;
var stepScore = 10 ;
var totalScore = 0 ;
var targetScore = 1500;
var flag = true ;
var tempSquare = null;//When processing mouse actions, the action is blocked, resulting in event processing completion and there is incoherencefunction createSquare(value , row , col){
//Create small block node var blocks = ('div');
//Set style = suqareWidth + 'px';
= suqareWidth + 'px';
= 'inline-block';
= 'border-box';
= 'absolute';
= "12px";
//The rows and columns of small squares, the rows and columns of small squares = value ;
= row ;
= col ;
return blocks;
}
function refresh(){
for(var i = 0 ; i < ; i ++){
for (var j = 0 ; j < squareSet[i].length ; j++) {
//Ratifying judgment if (squareSet[i][j] == null) {
continue;
}
//Show the rows and columns of the panel corresponding to the small squares in the two-dimensional array. squareSet[i][j].row = i;
squareSet[i][j].col = j;
//Column*Block Length squareSet[i][j]. = "left 0.3s, bottom 0.3s";
squareSet[i][j]. = squareSet[i][j].col * suqareWidth + 'px';
squareSet[i][j]. = squareSet[i][j].row * suqareWidth + 'px';
//Background image squareSet[i][j]. = "url('img/" + squareSet[i][j].num + ".png')";
squareSet[i][j]. = 'cover';
squareSet[i][j]. = 'scale(0.95)';//It is the picture that is reduced to 0.95 times the original one }
}
}
function checkLinked(square , arr){
//Ratifying judgment if(square == null){
return;
}
//Add small squares to arr (square);
/*
Determine whether the small square located on the left side of the small square can be included in the selection array
1. The small square cannot be the leftmost
2. There must be small squares on the left side of the small square
3. The left side of the small square should be the same color as the small square
4. The left side of the small square is not included in the array
5. Recursion
*
* */
//left if( > 0 && squareSet[][ - 1]
&& squareSet[][ - 1].num ==
&& (squareSet[][ - 1]) == -1){
checkLinked(squareSet[][ - 1] , arr);
}
//To the right if( < boardWidth - 1 && squareSet[][ + 1]
&& squareSet[][ + 1].num ==
&& (squareSet[][ + 1]) == -1){
checkLinked(squareSet[][ + 1] , arr);
}
//up if( < boardWidth - 1 && squareSet[ + 1][ ]
&& squareSet[ + 1][].num ==
&& (squareSet[ + 1][ ]) == -1){
checkLinked(squareSet[ + 1][] , arr);
}
//up if( > 0 && squareSet[ - 1][]
&& squareSet[ - 1][].num ==
&& (squareSet[ - 1][]) == -1){
checkLinked(squareSet[ - 1][] , arr);
}
}
//Let the selected small square flashfunction flicker(arr){
var num = 0 ;
//Set the timer to make one of them flash timer = setInterval(function(){
for (var i = 0 ; i < ; i++) {
//Set the zoom style arr[i]. = "3px solid #BFEFFF";
arr[i]. = "scale("+(0.9 + 0.05 *(-1 , num))+")";
}
//After the small square is flashing, num++, make it scale again num++;
},300);
}
function back(){
//If the timer still exists, the counter is clear if(timer != null){
clearInterval(timer);
}
//Return to the original style for(var i = 0 ; i < ; i++){
for(var j = 0 ; j < squareSet[i].length ; j++){
//Ratifying judgment if (squareSet[i][j] == null) {
continue;
}
squareSet[i][j]. = "0px solid #BFEFFF";
squareSet[i][j]. = "scale(0.95)";
}
}
}
//Select the scorefunction selectScore(){
var socre = 0 ;
//Travel over the choice for(var i = 0 ; i < ; i++){
socre += baseScore + stepScore * i ;
}
//Ratifying judgment if (socre <= 0) {
return ;
}
//Set the style of select_score var select_score = ('select_score');
select_score.innerHTML = + "piece" + socre + "point";
select_score. = null ;
//Set transparency so that it suddenly appears select_score. = 1 ;
//Let it disappear gradually setTimeout(function(){
select_score. = 'opacity 1s';
select_score. = 0;
},1000);
}
// When the mouse moves to this small square, it flashesfunction mouseOver(obj){
//When the mouse suddenly moves to another position when it moves to the square if(!flag){
tempSquare = obj;
return ;
}
//When the mouse moves away the selected block, return it to its original style back();
//Select the same small square adjacent to each other //Pass an array choose = [];
checkLinked(obj , choose);//obj is the small square that the mouse is currently moving to, and choose is an array of small squares that store ringing ringing if ( <= 1) {
choose = [] ;
return;
}
//Change the selected setting style to make it flash flicker(choose);
//Show the fraction of the selected small square selectScore();
}
function move(){
/*
1. Set a pointer, at the beginning, pointer points to the bottom line
2. Is the pointer and j the same? ++?
3. If the column has small blocks changed, all ++ will be left, otherwise j++ and pointer will remain unchanged, and the condition will be judged in a loop.
3. When j moves to a small square in a row of the column, and the small square exists, set the position of the small square pointed to by j to the position of the small square pointed to by the pointer.
* */
//Move down for (var i = 0 ; i < boardWidth ; i ++) {
var pointer = 0;//Pointer points to a small square, stop when encountering null, and wait for the small square above to fall here for (var j = 0 ; j < boardWidth ; j ++) {
if (squareSet[j][i] != null) {
if (j != pointer) {
squareSet[pointer][i] = squareSet[j][i];
squareSet[j][i].row = pointer;
squareSet[j][i] = null;
}
pointer ++;
}
}
}
//Move horizontally for (var i = 0 ; i < squareSet[0].length ; ) {
if (squareSet[0][i] == null) {
for (var j = 0 ; j < boardWidth ; j ++) {
squareSet[j].splice(i, 1);
}
continue;
}
i ++;
}
refresh();
}
function isFinish(){
for (var i = 0 ; i < ; i++) {
for (var j = 0 ; j < squareSet[i].length ; j++) {
//Judge whether there are any eliminateable blocks around it var temp = [];
checkLinked(squareSet[i][j] , temp);
if( > 1){
return false ;
}
}
}
return true;
}
function init(){
//Get the panel table = ('pop_star');
//Create a two-dimensional array for(var i = 0 ; i < boardWidth ; i++){
squareSet[i] = new Array();
for(var j = 0 ; j < boardWidth; j++){
//Create small blocks var square = createSquare((() * 5), i, j);
//Move the mouse to this block = function(){
mouseOver(this);
}
//Operation when clicking on small block = function(){
//Other operations cannot affect their execution when the small block is clicked if( == 0 || !flag ){
return ;
}
flag = false;
tempSquare = null ;
/*
1. Increase the current score
2. Small squares disappear
3. Downward or want to do a move
4. Determine whether the game ends
*/
var socre = 0 ;
//Travel over the choice for(var i = 0 ; i < ; i++){
socre += baseScore + stepScore * i ;
}
totalScore += socre ;//Total score //Change the style ('now_score').innerHTML = 'Current score:' + totalScore;
//The small square disappears /*
1. Remove the selected small block from the two-dimensional array
2. Remove the div on the panel, otherwise the div will always occupy the grid
* */
for(var i = 0 ; i < ; i++){
//Immediate function, start the function immediately, otherwise, it will not be executed (function(i){
setTimeout(function(){
//Set a value of the two-dimensional array to empty, and the following will move forward squareSet[choose[i].row][choose[i].col] = null ;
//Remove div (choose[i]);
},i * 100);
})(i);
}
//move setTimeout(function(){
move();
setTimeout(function(){
var finished = isFinish();
if(finished){
if (totalScore >= targetScore) {
alert('Successfully passed');
} else{
alert('Failed to pass the level');
}
}else{//You can continue choose = [] ;
flag = true;
mouseOver(tempSquare);
}
} , 300 + * 150);
}, * 100);
}
//Put small squares into a two-dimensional array squareSet[i][j] = square;
//Insert the created small square into the panel (square);
}
}
//Show small stars and refresh the entire panel
refresh();
}
//After the page loading is completed, all operations are initialized = function(){
init();
}
In fact, there is also an optimization here. The general idea is to increase the target score every time the game passes. When the game ends, the level passes, and the target score returns to the initial value.
If you don’t understand anything, you can comment in the comment section.
For details of the source code of the jq advanced version, please see me github.Website
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.