8bitrocket.com
13Sep/120

A Completely Anecdotal Account Of Why The Wii U Might Not Matter To The Next Generation

Another Gamasutra blog went up today :

A Completely Anecdotal Account Of Why The Wii U Might Not Matter To The Next Generation

Usually when I write Nintendo stuff, fan boys get enraged....

-8bitsteve

 

 

16Dec/110

HTML5 Puzzle Game : Color Drop : Game Demo + AS3 vs. JavaScript Code Comparison

Color Drop HTML5

Color Drop was game that was featured in our book The Essential guide To Flash Games.  Earlier this month I decided to to see how hard it would be to tackle a similar game for HTML5 Canvas for the next version of HTML5 Canvas for O'Reilly.  Color Drop HTML5 Canvas is the result.

Same as the other demos from earlier this week, this has only really been tested in Google chrome, so your mileage may vary with other browsers.

What interested me the most about the process of converting this game from AS3 to JavaScript was the ease of reusing the existing AS3 algorithms in JavaScript.  In the code snippets below you can see the process.

The function findLikeColoredBlocks() is designed to find a list of blocks that are the same color and adjacent to the block that was clicked by the player.  There is a full discussion of the code in The Essential guide To Flash Games.

When I sat down to rewrite the code in JavaScript, I found the process very very easy. In fact, the only thing I needed to do was to remove the type definitions on variables.

JavaScript Code

function findLikeColoredBlocks(blockToMatch) {
          var blocksToCheck= new Array();
          var blocksMatched = new Array();
          var blocksTested = new Array();
          var rowList = [-1, 0, 1,-1,1,-1,0,1];
          var colList = [-1,-1,-1, 0,0, 1,1,1];

          var colorToMatch = blockToMatch.blockColor;
          blocksToCheck.push(blockToMatch);
          while(blocksToCheck.length > 0) {
              tempBlock = blocksToCheck.pop();
              if (tempBlock.blockColor == colorToMatch) {
                  tempBlock.selected = true;
                  blocksMatched.push(tempBlock);
              }

              var tempBlock2;
              for (var i = 0;i < rowList.length;i++) {
                  if ((tempBlock.row + rowList[i]) >= 0 && (tempBlock.row + rowList[i]) < BLOCK_ROWS && (tempBlock.col + colList[i]) >= 0 && (tempBlock.col + colList[i]) < BLOCK_COLS ) {
                      var tr = tempBlock.row + rowList[i];
                      var tc = tempBlock.col + colList[i];
                      tempBlock2 = board[tr][tc];
                      if (tempBlock2.blockColor == colorToMatch && blocksToCheck.indexOf(tempBlock2) == -1 && blocksTested.indexOf(tempBlock2) == -1) {
                          blocksToCheck.push(tempBlock2);
                      }
                  }

              }
              blocksTested.push(tempBlock);
          }
          return blocksMatched;
      }

AS3 Code

public function findLikeColoredBlocks(blockToMatch):Array {
          var blocksToCheck:Array = new Array();
          var blocksMatched:Array = new Array();
          var blocksTested:Array = new Array();
          var rowList:Array = [-1, 0, 1,-1,1,-1,0,1];
          var colList:Array = [-1,-1,-1, 0,0, 1,1,1];

          var colorToMatch = blockToMatch.blockColor;
          blocksToCheck.push(blockToMatch);
          while(blocksToCheck.length > 0) {
              tempBlock = blocksToCheck.pop();
              if (tempBlock.blockColor == colorToMatch) {
                  blocksMatched.push(tempBlock);
                  tempBlock.makeBlockClicked();
              }

              var tempBlock2:Block;
              for (var i:int = 0;i < rowList.length;i++) {
                  if ((tempBlock.row + rowList[i]) >= 0 && (tempBlock.row + rowList[i]) < BLOCK_ROWS && (tempBlock.col + colList[i]) >= 0 && (tempBlock.col + colList[i]) < BLOCK_COLS ) {
                      var tr:int = tempBlock.row + rowList[i];
                      var tc:int = tempBlock.col + colList[i];
                      tempBlock2 = board[tr][tc];
                      if (tempBlock2.blockColor == colorToMatch && blocksToCheck.indexOf(tempBlock2) == -1 && blocksTested.indexOf(tempBlock2) == -1) {
                          blocksToCheck.push(tempBlock2);
                      }
                  }
              }
              blocksTested.push(tempBlock);
          }
          return blocksMatched;
      }

While the display code for making HTML Canvas games is quite different between AS3 and JavaScript, the logical algorithms for iterations, loops, multi-dimensional arrays, etc. are pretty much the same.   This is good news for people who have libraries of AS2 and AS3 algorithms that need to be converted to HTML5/JavaScript will have a fairly easy time accomplishing the task.

14Dec/110

HTML5 Canvas Christmas Tree Drag And Drop Demo And Tutorial

Here is another demo from DevCon5.  Yesterday we showed you an action game, now we will show you something completely different.  A Drag And Drop style decoration application of the type we produced by the dozens ta Mattel throughout the first 10 years of this century.  We present to you: Christmas Tree Decorator.  Music by Mike Peters/The Children Of The Revolution.   This was developed for Google chrome and has not been optimized for other browsers yet.

One of the most interesting thing about this demo (to us) is that we display the mouse button pointer when rolling over things that can be clicked and dragged.  This might not sound like much, but since the HTML5 Canvas does not contain any DOM objects, we had to achieve the effect with our own custom code.  Here is how we did it:

 

  • First, in JavaScript we listen for Canvas “mousemove” event:

[cc lang="javascript"]
theCanvas.addEventListener("mousemove",onMouseMove, false)
[/cc]

 

  • Next we test to see if the mouse if over any of the bulbs.  We keep all bulbs in single array named clickBlocks to make this easy.
[cc lang="javascript"']
function onMouseMove(event) {
		var mouseX;
		var mouseY;

		if ( event.layerX ||  event.layerX == 0) { // Firefox
			mouseX = event.layerX ;
			mouseY = event.layerY;
		} else if (event.offsetX || event.offsetX == 0) { // Opera
			mouseX = event.offsetX;
			mouseY = event.offsetY;
		}
		for (var i =0; i < blocks.length; i++) {

			if (blocks[i].dragging) {
				blocks[i].x = mouseX - BLOCK_WIDTH/2;
				blocks[i].y = mouseY - BLOCK_HEIGHT/2;

			}
		}

		var cursor ="default";
		for (i=0; i< blocks.length; i++) {
			var tp = blocks[i];
			if ( (mouseY >= tp.y) && (mouseY <= tp.y+tp.height) && (mouseX >= tp.x) && (mouseX <= tp.x+tp.width) ) {
				cursor = "pointer";
			}
		}
		theCanvas.setAttribute("style", "cursor:" + cursor);

		for (i=0; i< clickBlocks.length; i++) {
			var tp = clickBlocks[i];
			if ( (mouseY >= tp.y) && (mouseY <= tp.y+tp.height) && (mouseX >= tp.x) && (mouseX <= tp.x+tp.width) ) {
				cursor = "pointer";
			}
		}
		theCanvas.setAttribute("style", "cursor:" + cursor);
	}
[/cc]
  • The key lines in that code, change the cursor depending on what the  mouse is over using CSS

[cc lang="javascript"]

theCanvas.setAttribute("style", "cursor: pointer”);

[/cc]

or

[cc lang="javascript"]

theCanvas.setAttribute("style", "cursor:default" );

[/cc]

Don't forget, you can join our new HTML5 Game Development forums and talk about this kind of stuff all day long!

13Dec/110

HTML5 Canvas "1945" Game Demo

Here is one of the game demos we showed at Devcon5 last week.  This is an action game named 1945.  It uses graphics from Ari Feldman's Spritelib and music from Musopen.com.   You cannot die in this game.  It's a demo of parallax scrolling and particle effects.  Move and shoot with the mouse.

This game has only been tested with Google Chrome.  Other browsers will probably require a little tweaking to get to work correctly.

This game is really not practical for HTML5 because it uses mouse button clicks like old style Flash web games.   Those controls would not work well on mobile.

discussion: How would you change this game to make it work on mobile platforms?   Do you even think this type of game is viable?

Don't forget, you can join our new HTML5 Game Development forums and talk about this kind of stuff all day long!

 

 

21Dec/100

16K Heli

16K Atari Inspired Retro-Remake Contest Entry:

Game Name: Heli (Play it)

Game Inspiration: Choplifter (Atari 800) (Atari 7800)


(click screen shot to play)


(click screen shot to play)

21Dec/100

16K Must Destroy Your Heart

16K Atari Inspired Retro-Remake Contest Entry:

Game Name: Must Destroy Your Heart (Play it)

Game Inspiration: Berzerk (Atari 2600) (Atari 5200)


(click screen shot to play)


(click screen shot to play)

Author: Ryan Luce
What Ryan has to say about his game:

"Here's my berzerk clone, must destroy... your heart! The swf is right at 16k(whew). I assure you any bug you find is just an undocumented feature. "

21Dec/100

16K Niculus

6K Atari Inspired Retro-Remake Contest Entry:

Game Name: Niculus (Play it)

Game Inspiration: Nebulus (Atari ST), Tower Toppler (Atari 7800)


(click screen shot to play)


(click screen shot to play)

Author: David Durham
What David has to say about his game:

""My entry is inspired the Atari ST (and other systems) game Nebulus (aka Tower Toppler/Castelian in some territories apparently) by John M Phillips. This game is really probably the first game I can remember playing and I have always had fond memories of it with my Dad and sister.

I've given my version of the game a Christmas twist and called it 'Niculus' - sort of combining the two words (St.)Nicholas and Nebulus. It doesn't have all the features of the original game and there is only one level, but I thought it was worth submitting what I had in the spirit of taking part."
21Dec/100

16K BattleWire16K

16K Atari Inspired Retro-Remake Contest Entry:

Game Name: BattleWire16K (Play It)

Play the upgraded, commercial version at Kongregate.

Game Inspiration: Battlezone (Atari Arcade)


(click scree shot to play)


(click scree shot to play)

Author: TFernando (Nightflyer Games)

What Tony has to say about his game:

"BattleWire16K was inspired by Battlezone and it's descendents. The object of the game is to get the highest score you can, by killing enemy tanks and airplanes. You get three lives.

'Battle' of course, comes from Battlezone, 'Wire' from the wireframe graphics, and 16K from the contest limitation.

I actually chose this game, because I thought it would be easier to pack a wireframe renderer and some models into 16kb, than to embed usable bitmaps and sounds! The chiptune-esq music is generated is generated by a sine function, and the shots and explosions from a random number generator.

I kept a development journal on my blog, which can be viewed here. Most of the blog entries present."

21Dec/100

16K DDDD

16K Atari Inspired Retro-Remake Contest Entry:

Game Name: DDDD (The Diabolical Dungeons of Dr. Devil) (Play It)

Game Inspiration: Rogue (Mastertonic for Atari 800 / Atari ST)


(click screen shot to play)


(click screen shot to play)

Author: Ace the Super Villain

What Ace has to say about his game:
"I present to you my 3rd entry for the 8bitRocket 16KB Atari Retro Re-make
Contest, The Diabolical Dungeons of Dr. Devil.  It's based on Rogue, which
I hear was available on Atari's 8-bit home computers.  As fair warning,
this game can take several hours to finish, and there is no save feature,
however, you can pause it by pressing Shift."

21Dec/100

16K DABOMB

16K Atari Inspired Retro-Remake Contest Entry:

Game Name: DABOMB (Play it)

Game Inspiration: Kaboom (Activision - Atari 2600)

(click screen shot to play)


(click screen shot to play)

Author: Brad Manderscheid

Brad's words about the game:

Here is my entry.  I'm basing it off of the Activision game, KABOOM.  I'm calling it DA-BOMB.  I chose this game basically because I'm a huge Atari 2600 Activsion fan and this game is a classic.
The game knobs work exactly the same as the original.  The original user manual is attached which includes a handy table on how the points / bomb count work as well as extra lives and down-leveling after explosions.

This site is protected by Comment SPAM Wiper.