Jump to content

  • Log In with Google      Sign In   
  • Create Account

DareDeveloper's Journal

Isometric View

Posted by , 10 May 2014 - - - - - - · 937 views
Raid Aces, Isometric, JavaScript and 1 more...
Isometric View I render more than just the central map piece now ... and it is now an isometric view.

There are still quite a few problems with it:

I do not wait with rendering until all the images have been loaded: I update the map each time one of the 9 images is loaded.
That means it will render the map several times with errors. Not exactly a bug, that is more like an unimplemented feature, right Posted Image ?

I wanted to render without a grid, but the way I do the seams now does not allow that. I draw edges that lead to stripes in the resulting composed image. I would have to know something about the neighbor landscapes (or have access to the full map) in order to deal with that problem.

Pretty happy with the progress ... next on the list:
  • Actually create items in a scene graph and use it to offer a controllable camera
  • MOBA areas placed in a pseudo random way to get playable maps with bases, jungle spawns, special item spawns, lanes with arenas, sneak paths etc.)
Then I might add the menu game state with GUI entities ...

Posted Image

Added Symmetry and "Added Performance"

Posted by , 04 May 2014 - - - - - - · 701 views
JavaScript, Raid Aces, Symmetry and 1 more...
Did some optical changes (different heights are suggested) and the maps are now symmetrical (sometimes point, sometimes axis).


The StackExchange question helped and my ego is on the verge of being crushed. Basically I let all the timers (25) start at the same time.
That is something that even my little Java concurrency experience should have told me can not be right.
For some reason I thought I could just set the time I want the CPU to be idle with setTimeout.
After I multiplied that time with the image index (0 to 24) it completes faster and it is more responsive, even if it is still a little bumpy.

I need to get better at thinking about what to change and play with when I struggle with this kind of problem.
Stupid brain ...

I'll call it a game ...

Posted by , 13 April 2014 - - - - - - · 762 views
Tetris, 2048, Canvas, HTML5 and 1 more...
Here it is: http://www.procgames.com/demos4/notprocatall.html (might have seen that coming if you saw the last journal entry...)

Well, it is anything but finished ... only in the sense that I will not work on it any longer ... and it is buggy as hell.
I implemented the recursive trickling of merged tiles the ugly way ... and I did add
  • the removal of full rows (as a way to deal with low numbers under higher ones)
  • score counter
  • and a game over screen (which has a hard time showing up but it usually does eventually).
I would feel bad, because giving up is not a habit I should get into, but I think I can make a strong case for investing energy elsewhere:

1.) I am not turning this into a habit. I work as a programmer and I have to search for bugs and work on the same code for weeks or month. The resilience is there, working on this project would only be a nuisance.
2.) I have reached the goals:
  • I know how to use the cavas now
  • I have done something with JavaScript ... I even used some OO, even if the code is pretty bad
  • What I have gives a nice enough impression of what a combination of the game mechanics feels like
3.) If this idea can be turned into a real game it would take a lot of time and effort to find out how ... a lot more than just working on the game a few more days.
4.) It is not something that people are interested in. Hopefully nobody will study the code. People also apparently don't want to see a tutorial about basic games (https://www.gamedev.net/topic/654740-what-are-you-interested-in/?mode=show)
5.) It has nothing to do with procedural content generation ... which is what is currently occupying my mind. My heart is not in the project ...

So what is next?:
probably some more HTML5 / JavaScript experiments, this time with WebGL and without letting the code rot as much.

You reached level 7 with 3787216 points.

Trickier than I thought

Posted by , 10 April 2014 - - - - - - · 532 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 ...


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


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;


		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);

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 {

	// 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;

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