Cocos Creator writes 2048 mini-games and sends wechat mini-games

Without further ado, let’s start with the renderings



Those who are interested can also try wechat mini program

Let’s take a look at our game objects:



It’s just a camera, a background, a start button, and a 44 Sprite background.



We put the 4An array of 4 corresponds to a 4 by 4 Sprite.

When the array is 0, Sprite is blank. When the array is not zero, Sprite displays the corresponding digital Sprite.

All you need to do is dynamically control Sprite changes.

/ / drawing
	drawmap:function()
	{
		var i =0
		var j =0
		
		var txt ="\n"
		for ( i = 1; i <= 4; i++)
		{
			for ( j = 1; j <= 4; j++)
			{

				if (this.a[i][j]! =0)			// If there is no number in the position, it is not drawn
				{
					txt = txt+(this.a[i][j]+"*")
					/ * * /
					if (i==1 && j==1)
					{
						cc.loader.loadRes(this.a[i][j]+".png", cc.SpriteFrame, function (err, spriteFrame) {
						var backNode = cc.find("Canvas");

						backNode.getComponent("HelloWorld").buttons[1] [1].getComponent(cc.Sprite).spriteFrame  =spriteFrame

					})
					}
					else if(i==1 && j==2)
					{
						cc.loader.loadRes(this.a[i][j]+".png", cc.SpriteFrame, function (err, spriteFrame) {
						var backNode = cc.find("Canvas");
					
						backNode.getComponent("HelloWorld").buttons[1] [2].getComponent(cc.Sprite).spriteFrame  =spriteFrame

					})
					}
			}
			//....}}Copy the code

// The conditions for judging victory and defeat are basically the same

// Call game over
gameover:function()
{
	var i =0
	var j =0
	// For any position, the position is empty or surrounded by numbers equal to the position, indicating that the movement can continue (the game can continue)
	for (i = 1; i <= 4; i++)
		for ( j = 1; j <= 4; j++)
			if (!this.a[i][j] || this.a[i][j] == this.a[i + 1][j] || this.a[i][j] == this.a[i - 1][j] || this.a[i][j] == this.a[i][j + 1] | |this.a[i][j] == this.a[i][j - 1])return false;
	// Otherwise the game ends
	return true;
},

// Judge victory
win:function()
{
	var i =0
	var j =0
	// If any of the positions reach 2048, victory is achieved
	for ( i = 1; i <= 4; i++)
		for ( j = 1; j <= 4; j++)
			if (this.a[i][j] == 2048)return true;
	return false;
},
Copy the code

// Mobile can refer to the simplified version

/ / move
	move:function(c)
	{
		var i =0
		var j =0
		var k =0
		var x =0
		var y =0
		
		// Back up a to B
		for(i=0; i<=4; i++) {for(j=0; j<=4; j++) {this.b[i][j]=this.a[i][j]
			}
        }
		
		// initialize this.mov to false (all points are not moved)
		for(i=0; i<=4; i++) {for(j=0; j<=4; j++) {this.mov[i][j]=false}}if(c==8) / / up
		{	
			for (j = 1; j <= 4; j++)
				for (i = 2; i <= 4; i++)
				{
					if (this.a[i][j]==0)continue
					k = i
					while (this.a[k - 1][j]==0 && k >= 2)
					{
						
						this.a[k - 1][j] = this.a[k][j]
						this.a[k][j] = 0
						k--	
					}
					
					if (this.a[k][j] == this.a[k - 1][j] && this.mov[k - 1][j]==0)
					{
						
						this.a[k - 1][j] = 2 * this.a[k][j]
						this.playSound(this.a[k][j]*2)
						this.a[k][j] = 0
						this.mov[k - 1][j] = true
	
						var anim = this.buttons[k - 1][j].getComponent(cc.Animation); anim.play(); }}}else if(c==2) / / down
		{
		//...
Copy the code

It can be said that a simple version of the basic algorithm is made, and it is very simple to transplant to CoCOS Creator.

If you need the complete code, please contact me. We can discuss it together.