Jump to content

  • Log In with Google      Sign In   
  • Create Account

Banner advertising on our site currently available from just $5!


1. Learn about the promo. 2. Sign up for GDNet+. 3. Set up your advert!






Trickier than I thought

Posted by DareDeveloper, 10 April 2014 · 286 views

Tetris 2048 JavaScript HTML5
Combining the logic of Tetris and 2048 is trickier than I thought.

Not even figuring out what I want the program to do ...
the logic gets more and more complex and the special cases are a nuisance.

What I have so far is tiles that can penetrate tiles with the same number, tiles that merge when a block collides while same-number-tiles are on top of each other ...

http://www.procgames.com/demos/notprocatall.html

... and the beginning of freshly merged tiles staying active.

http://www.procgames.com/demos2/notprocatall.html

The biggest problem is the approach I picked:
the current block is modified and contains only the merged tiles, while the other tiles (collided ones and numbers that are not stacked) are put into the game field and stay stationary.

The remaining block keeps moving as long as it does not collide, but that is still too strict.
The tiles should trickle down independently until all of them have collided.

I thought using the existing block collision method was a smart thing to do, because I want the player to have control over the new pseudo-block.
That would be doable, but the problem is that within a round there should be several collision tests now (will the merged tile move in the next round, or is it not alive any more?) ... which really does not quite fit ...
GameStateDefault.prototype.update = function(gameContext) {

	this.isMovingBlocked = false;
	this.frameAge += this.getFrameDuration();

	if (this.frameAge > this.getTurnDuration()) {

		this.frameAge = 0;

		this.handleNextTurnEvent(gameContext);
		this.copyFieldToCanvas();
		this.copyBlockToCanvas();

		gameContext.clearRect(0,0,640,500);
		gameContext.fillStyle = "#edc22e";
		gameContext.font = "bold 20px Arial";

		// this.gameplayField.draw(gameContext);
		// this.gameplayBlock.draw(gameContext);

		var indexX;
		var indexY;
		for (indexY = 0; indexY < this.fieldHeight; indexY++) {
			for (indexX = 0; indexX < this.fieldWidth; indexX++) {
				this.drawTileAndMerges(this.getXOffset(), 0, indexX, indexY, this.canvasArray[indexY][indexX], this.mergeArray[indexY][indexX], gameContext);
			}
		}

		this.previewBlock.drawAt(this.getXOffset() + (this.gameplayField.width * this.getTilesize()) + 10, 10, gameContext);
	}

	this.frameCount++;
}
...
GameStateDefault.prototype.checkForCollisions = function(gameContext) {

	// var message = "this.gameplayBlock.isRigid: " + this.gameplayBlock.isRigid;

	// var aliveCount = 0;

	var blockPosX = this.gameplayBlock.posX;
	var newBlockPosY = this.gameplayBlock.posY + 1;
	var gameplayBlockArray = this.gameplayBlock.blockArray;

	var indexX;
	var indexY;
	for (indexY = 0; indexY < gameplayBlockArray.length; indexY++) {

		var fieldIndexY = this.gameplayBlock.posY + indexY;

		for (indexX = 0; indexX < gameplayBlockArray.length; indexX++) {

			var fieldIndexX = this.gameplayBlock.posX + indexX;

			if (TILETYPE_NONE != gameplayBlockArray[indexY][indexX]) {
				if (this.fieldHeight <= (newBlockPosY + indexY)) {
					//if (this.gameplayBlock.isRigid) {
						return 1;
					//} else {
						//this.gameplayField.gameArray[fieldIndexY][fieldIndexX] = gameplayBlockArray[indexY][indexX];
						//gameplayBlockArray[indexY][indexX] = TILETYPE_NONE;
					//}
				} else {
					if (TILETYPE_NONE != this.gameplayField.gameArray[newBlockPosY + indexY][blockPosX + indexX]) {
						if (gameplayBlockArray[indexY][indexX] != this.gameplayField.gameArray[newBlockPosY + indexY][fieldIndexX]) {

							//if (this.gameplayBlock.isRigid) {
								return 1;
							//} else {
								//if (this.gameplayField.gameArray[fieldIndexY][fieldIndexX] == gameplayBlockArray[indexY][indexX]) {
								//	gameplayBlockArray[indexY][indexX] *= 2;
								//	this.gameplayField.gameArray[fieldIndexY][fieldIndexX] = TILETYPE_NONE;
								//	aliveCount++;
								//} else {
								//	gameplayBlockArray[indexY][indexX] = TILETYPE_NONE;
								//	this.gameplayField.gameArray[fieldIndexY][fieldIndexX] = gameplayBlockArray[indexY][indexX];
								//}
							//}
						//} else {
							//aliveCount++;
						}
					}
				}
			}
		}
	}

	// showMessage(message);

	//if ((false == this.gameplayBlock.isRigid) && (0 == aliveCount)) {
		//return 1;
	//}

	return 0;
}
...
GameStateDefault.prototype.handleMerges = function(gameContext) {

	var mergeCount = 0;

	var gameplayBlockArray = this.gameplayBlock.blockArray;
	// var activeTilesBlockArray = this.activeTilesBlock.blockArray;
	// this.activeTilesBlock.posX = this.gameplayBlock.posX;
	// this.activeTilesBlock.posY = this.gameplayBlock.posY;

	var indexX;
	var indexY;
	for (indexY = 0; indexY < gameplayBlockArray.length; indexY++) {

		for (indexX = 0; indexX < gameplayBlockArray.length; indexX++) {
			if (gameplayBlockArray[indexY][indexX] != TILETYPE_NONE) {
				if (gameplayBlockArray[indexY][indexX] != this.gameplayField.gameArray[this.gameplayBlock.posY + indexY][this.gameplayBlock.posX + indexX]) {
					this.gameplayField.gameArray[this.gameplayBlock.posY + indexY][this.gameplayBlock.posX + indexX] = gameplayBlockArray[indexY][indexX];
					gameplayBlockArray[indexY][indexX] = TILETYPE_NONE;
				} else {
					this.gameplayField.gameArray[this.gameplayBlock.posY + indexY][this.gameplayBlock.posX + indexX] = TILETYPE_NONE;
					gameplayBlockArray[indexY][indexX] = (2 * gameplayBlockArray[indexY][indexX]);
					this.gameplayBlock.isRigid = false;
					mergeCount++;
				}
			}
		}
	}

	return mergeCount;
}
The weekend is approaching, though ... so I am confident that I will think of something ... soon enough Posted Image




Interesting, I ran into a case where pushing down caused the block to move through other blocks.  I had myself a tower that sprouted up, like a T shape, and pressing down while over an edge of the T causes pieces to fall through.

Good idea to try out html5 with something simple. Yeah, the game logic is pretty muddy, I don't see any interesting strategies. Smooth animation would help... if you do that you might have to rethink your collision code... which could solve your dilemma or convince you to try something completely different, hehe.

Interesting, I ran into a case where pushing down caused the block to move through other blocks.  I had myself a tower that sprouted up, like a T shape, and pressing down while over an edge of the T causes pieces to fall through.

I have tried to reproduce that ... did not work even with pressing down multiple times.

Probably it is a weird scenario. There are a lot of funky things going on, though.

Thanks for checking it out. I like your physics based Tower Defense btw.

 

Good idea to try out html5 with something simple. Yeah, the game logic is pretty muddy, I don't see any interesting strategies. Smooth animation would help... if you do that you might have to rethink your collision code... which could solve your dilemma or convince you to try something completely different, hehe.

Simple was the idea ... and I think I have already spent too much time considering the goals.

I'll write another post soon with a link to a final version, but I think I am moving on to either WebGL or another planning stage now ...

PARTNERS