HTML5 Canvas write colorful beads (6): Trial

In the previous section, we talked about how to find the path. During discussions with friends, we were not very right. We went a long way. In fact, the code is mainly about determining the direction, for example, the target is on the top right, it should be right first or first, but it will not be processed. If this is done, the effect will be better, but it will inevitably lead to detours. Greedy is like this, not optimal, close to optimal. I also hope that other students will have some comments to discuss. This is my personal idea.

Now that you can move around, you can determine whether rows, columns, or diagonal lines of the same color can be eliminated. As long as the color balls are greater than or equal to 5, they are cleared and can be moved. If it cannot be cleared, add three more balls.

[Javascript]
ClearLine: function (x1, y1, color, isClick) {if (this. isEmpty (x1, y1 ))
{If (isClick) game. ready. flyin ();
Return;
};
// Specify a coordinate to see if any line is satisfied. // four line1 lines can be eliminated. | /\
Var current = this. getBubble (x1, y1 );
If (! Current. color) {console. log (current );}
Var arr1, arr2, arr3, arr4; arr1 = this. bubbles [y1];
// The horizontal line is very simple, that is, an array, ready-made arr2 = [];
For (var y = 0;
Y <game. cellCount;
Y ++) arr2.push (this. getBubble (x1, y ));
// A vertical line is a column.
Arr3 = [current];
Arr4 = [current];
For (var I = 1;
I <game. cellCount;
I ++) {if (x1-I> = 0 & y1-I> = 0)
// \ Upper part of the diagonal line... arr3.unshift (this. getBubble (x1-I, y1-I ));
If (x1 + I <game. cellCount & y1 + I <game. cellCount)
// \ Arr3.push (this. getBubble (x1 + I, y1 + I ));
If (x1-I> = 0 & y1 + I <game. cellCount)
/// Arr4.push (this. getBubble)
(X1-I, y1 + I ));
If (x1 + I <game. cellCount & y1-I> = 0)
/// Arr4.unshift (this. getBubble (x1 + I, y1-I ));
}
Var line1 = getLine (arr1 );
Var line2 = getLine (arr2 );
Var line3 = getLine (arr3 );
Var line4 = getLine (arr4 );
Var line = line1.concat (line2). concat (line3). concat (line4 );
If (line. length <5 ){
If (isClick) game. ready. flyin ();
Return ;}
Else {
Var me = this;
Var I = 0;
Game. play ("clearline", function ()
{
If (I = line. length)
{Game. score. addScore (line. length); game. stop ("clearline ");
Me. isMoving = false;
// Game. ready. flyin ();
Return;
} Me. isMoving = true;
Var p = line [I];
Me. setBubble (p. x, p. y, null );
I ++ ;},
100 );
} Function getLine (bubbles) {var line = [];
For (var I = 0;
I <bubbles. length; I ++) {var B = bubbles [I];
If (B. color = color)
{Line. push ({"x": B. x, "y": B. y });
} Else {
If (line. length <5) line = [];
Else return line;
}
}
If (line. length <5) return [];
Return line;
}
},

ClearLine: function (x1, y1, color, isClick ){
If (this. isEmpty (x1, y1 )){
If (isClick) game. ready. flyin ();
Return;
};
// Specify a coordinate to see if any line is satisfied and can be eliminated
// 4 lines 1 | /\
Var current = this. getBubble (x1, y1 );
If (! Current. color) {console. log (current );
} Var arr1, arr2, arr3, arr4; arr1 = this. bubbles [y1];
// The horizontal line is very simple, that is, an array, ready-made arr2 = [];
For (var y = 0;
Y <game. cellCount;
Y ++) arr2.push (this. getBubble (x1, y ));
// A vertical line is a column.
Arr3 = [current];
Arr4 = [current];
For (var I = 1;
I <game. cellCount;
I ++) {if (x1-I> = 0 & y1-I> = 0)
// \ Upper part of the diagonal line... arr3.unshift (this. getBubble (x1-I, y1-I ));
If (x1 + I <game. cellCount & y1 + I <game. cellCount)
// \ Arr3.push (this. getBubble (x1 + I, y1 + I ));
If (x1-I> = 0 & y1 + I <game. cellCount)
/// Arr4.push (this. getBubble (x1-I, y1 + I ));
If (x1 + I <game. cellCount & y1-I> = 0)
/// Arr4.unshift (this. getBubble (x1 + I, y1-I ));
}
Var line1 = getLine (arr1 );
Var line2 = getLine (arr2 );
Var line3 = getLine (arr3 );
Var line4 = getLine (arr4 );
Var line = line1.concat (line2). concat (line3). concat (line4 );
If (line. length <5) {if (isClick) game. ready. flyin ();
Return;
} Else {
Var me = this;
Var I = 0; game. play ("clearline", function (){
If (I = line. length) {game. score. addScore (line. length );
Game. stop ("clearline ");
Me. isMoving = false;
// Game. ready. flyin ();
Return;
} Me. isMoving = true;
Var p = line [I];
Me. setBubble (p. x, p. y, null );
I ++;
},100 );
} Function getLine (bubbles)
{Var line = [];
For (var I = 0;
I <bubbles. length;
I ++) {var B = bubbles [I];
If (B. color = color ){
Line. push ({"x": B. x, "y": B. y });
} Else {if (line. length <5) line = [];
Else return line;
}
}
If (line. length <5) return [];
Return line;
}
},
Let's look at the Code. There are two main points: 1. Four arrays with vertical and vertical slashes that may need to be processed, and then check whether these four arrays are continuous. To determine whether a continuous state array is required, you only need to maintain it.
Because multiple rows are eliminated at the same time, continuous lines must be connected and rewarded when settlement is made.
The isClick parameter is mainly used to determine whether the user clicks to cancel the line or whether the new bubble is generated by the new bubble. If the condition is not met and the request is sent in, the request cannot be sent in again. Otherwise, an endless loop is generated.

The satisfied Line Elimination code is also relatively simple, that is, playing a line Elimination animation. In fact, this animation is really boring. If you want to design it better, you can make a gradient offset to eliminate it. Now, I found it unwise to design an array to maintain the state at first, because it is troublesome to draw stars and bombs with rewards .. So, show the points. In this way, you can try it out first :)

[Javascript]
Game. score = {basic: 0, operate: 0, star1: 0, star2: 0, boom: 0, draw: function ()
{Var startX = game. cellWidth * 10 + game. map. startX;
Var startY = game. map. startY;
Var ctx = game. ctx; ctx. save ();
Ctx. translate (startX, startY );
Ctx. clearRect (0, 0,150,400 );
Ctx. strokeStyle = "#456 ";
// Ctx. strokeRect (0, 0,150,200 );
Ctx. font = "24px ";
Ctx. fillStyle = "# fefefefe ";
Ctx. fillText ("score:" + (this. basic * 5 + this. star1 * 8 + this. star2 * 10 + this. boom * 20), 0, 30); ctx. stroke ();
Ctx. restore ();
}, AddScore: function (length) {switch (length) {case 5: this. basic ++; break;
Case 6: this. star1 ++;
Break;
Case 7: this. star2 ++;
Break;
Default: this. boom ++;
Break;
} This. draw ();
Console. log (this. score );
},
};

Game. score = {basic: 0, operate: 0, star1: 0, star2: 0, boom: 0, draw: function (){
Var startX = game. cellWidth * 10 + game. map. startX;
Var startY = game. map. startY;
Var ctx = game. ctx; ctx. save ();
Ctx. translate (startX, startY );
Ctx. clearRect (0, 0,150,400 );
Ctx. strokeStyle = "#456 ";
// Ctx. strokeRect (0, 0,150,200); ctx. font = "24px ";
Ctx. fillStyle = "# fefefefe ";
Ctx. fillText ("score:" + (this. basic * 5 + this. star1 * 8 + this. star2 * 10 + this. boom * 20), 0, 30); ctx. stroke ();
Ctx. restore ();
}, AddScore: function (length)
{Switch (length)
{Case 5: this. basic ++;
Break;
Case 6: this. star1 ++;
Break;
Case 7: this. star2 ++;
Break; default: this. boom ++;
Break;
} This. draw ();
Console. log (this. score );
},
};
 

In section 3 of the design, we talked about the wild stars and bombs. I am too lazy and don't want to talk about them, because these processes are not complicated, the basic learning of HTML5 Canvas is also acceptable. Later, we should learn more in-depth things, such as how to handle performance, object collision, and kinematics...

Now there should be bugs in the game. You can check the code and find out that this series is here. Thank you.

Source code download: http://www.bkjia.com/uploadfile/2012/0320/20120320014310520.rar
 

From Jun Zhiqiang