HTML5 canvas write colorful beads (6): Trial

In the previous section, I talked about how to find the path. During discussions with my friends, I was not quite right.CodeIt is mainly about determining in the general direction. For example, if the target is in the upper right corner, it should be right or first. 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.

Clearline: function (x1, Y1, color, isclick) {If (this. isempty (x1, Y1) {If (isclick) game. ready. flyin (); Return ;}; // specify a coordinate to check whether a 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 crossline is very simple. It is an array. the ready-made arr2 = []; for (var y = 0; y <game. cellcount; y ++) arr2.push (this. getbubble (x1, y); // The vertical bar 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 :)

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.

Trial address: http://zhengliangjun.sinaapp.com/colorline.html
Source code download: http://download.csdn.net/download/maddemon/4154990