I've started a new podcast!
12/2/2012 4:43 PM


I decided to create a podcast.  I thought it would be cool to share my experiences with creating html5 games.  I'm hoping that you will share your journey as well.  Please give it a listen and let me know what you think!

10gic.com Podcast

I'm also thinking about starting a forum, though what I really need to be working on is my game!


Continue Reading Here...

The Next Game
11/27/2012 7:24 PM


Seven months ago I finished Alien Attack from Galzanoid.  Since then I’ve been busy and even bought a new house, but I haven’t done anything else with HTML5.  Now that things have settled down, I’m ready for to make another game in 30 days. 

Continue Reading Here...

I've completed my first game!
4/27/2012 4:01 AM


27 days ago I set out to make a game in 30 days using HTML5 and I've done it.  It has been a really cool learning experience.  I hope that you take a look.  Just keep in mind that it is my first game. :)

Here it is...


On a routine cargo haul you uncover a sneak attack by the aliens from Galzanoid. You have notified your planets defense department but they will need time to mobilize. Your large and underpowered cargo vessel is all that stands between life and death for your friends and family back home.

Controls
Movement: Left and Right Arrow Keys
Fire Laser: Spacebar


(Play Alien Attack from Galzanoid)


Continue Reading Here...

5 days left
4/25/2012 7:03 AM


I have a game!  There are a few more bells and whistles that I want to add, but if I didn't have any more time left I would still be comfortable saying that I have created a game.  I added the start screen and game over screen.  Last night I added a bonus shield element and I really just have two things left.  I want to add a bonus enemy that gives more points but is risky to go for.  I also need to add a high score list.

I spent a solid evening looking at available option for leader boards.

Continue Reading Here...

9 days left
4/21/2012 11:18 AM


I have nine days left in my 30 day game challenge.  I think I'm going to make it.  I finished the level design today and wrapped up the collision detection.  I still need to make graphics for the player explosion and work out if I want lives or shields for when the player is hit.  Right now after you are hit nothing happens so I still need to make something that says the game is over.  If time allows, I would really like to have a high score list.  I think it adds a lot to a game like this.

So is the game fun?

Continue Reading Here...

Monitor refresh rate and FPS
4/17/2012 10:44 AM


I have been developing my first game and things have been going well.  I wanted to get some development done while on my gaming pc and all of the sudden my game was running at double the normal speed.  What was going on?  Well, the request animation frame function was suddenly running at 120fps instead of the 60fps that I was seeing before.  

This surprised me and I wasn't sure what was causing the extra 60fps.  Sure the computer was a lot more powerful than my development system as I build it for 3d games, but was that the reason?


Continue Reading Here...

HTML5 Canvas Game Tutorial #1
4/15/2012 9:05 AM


I spent some time yesterday putting together a video tutorial on how to set up an HTML5 canvas game and how to get a game loop running.  I've been working hard to get up to speed on this whole process and I thought it would be a good idea to help others get over the initial learning curve.

This video is the first in a series where I plan on showing how to put together a snake game.  I wanted to build a snake game for fun anyway so this fits in nicely. 

http://10gic.com/VideoTutorials.aspx


Continue Reading Here...

HTML5 Canvas FPS display
4/13/2012 4:00 PM


This is a bit of code to see how many frames per second you are getting in your HTML5 canvas game.  It will use a variable to count the FPS and one to hold the count after one second.  In your main game loop increment the counter by 1 for each pass. You can use setInterval to fire every second and store the count to display it and then reset the count for the next second.  Here is how.

Add a variable to hold the count.  I will call mine fps.  Add a variable to hold the frames per second total that you will display on the canvas.  I will call mine fpsDisplay. Create a function that sets fpsDisplay = fps and then fps =0.  Then call that function using setInterval with a time in ms of 1000 (1 second).  In your main game loop set fps++; 

The code is in the full article.

Continue Reading Here...

Putting text on the screen
4/11/2012 7:22 AM


Last night I was to a point where I wanted to put the score text on the screen.  I don't have enemies or collision detection written up yet but I was looking for something small that I could finish up.

Well, after doing some research I was surprised at just how easy it is.

ctx.fillText('Score ', 5, 30); 

That is all there is to it.  Or so I thought.  For some reason, I didn't see  any text.  It was the last thing that I was drawing to the screen so there shouldn't be anything blocking it.  Why wouldn't it show up?

Continue Reading Here...

One third into the 30 day challenge
4/10/2012 7:09 AM


I am now 10 days into the 30 day challenge of creating a game in HTML5.  As I look back at what I knew 10 days ago and what I know now, I am really amazed!  In the past three days I have been working on a simple space shooter.

I realized that I had a number of things to learn and the best way to learn them was to actually create something.  A space shooter seemed like a simple game to incorporate all of the skills needed to create a game.  So I have been figuring out many of these game elements such as:
  • sprite sheets
  • sprite animation
  • canvas layers
  • game loop
  • keyboard input
  • player movement
  • array of lazer movement
  • scrolling background
I still have some things left to learn, such as:

Continue Reading Here...

Visual Studio 11 beta Javascript Intellisense
4/8/2012 8:05 AM


I started creating a small JavaScript game file and I ran into a problem with Visual Studio 11 Beta's JavaScript Intellisense.  When I created the script inside of the webpage the Intellisense didn't have a problem with the DOM id for my canvas element because it was in the same file.  So: 

canvas = document.getElementById('MiniGameCanvas');
ctx = canvas.getContext('2d');

worked just fine because

<canvas id="MiniGameCanvas">

was on the same page.  However the same code inside of a js file did not work.  It makes sense from a logical stand point.  

The webpage has a reference to the JavaScript file but the JavaScript file doesn't know anything about the webpage.  Even thought this makes sense logically, it was a thorn in my side for practical development.  It seemed like there should be a solution, and then I found it.

Continue Reading Here...

A 3d Box with fewer lines of code
4/6/2012 6:58 AM


I have learned that my first 3d Box used a lot more lines of code than it needed to.  So I created a new one just for fun.  The code can be found on the full article.

Continue Reading Here...

Research and a little goofing off
4/5/2012 7:29 AM


Over the past couple of days I have watched many videos on HTML5.  I have also played many HTML5 games as part of some *ahem* research.  I am very impressed by what I have seen.  I would love to say that I now have a clear path to move forward, but I still have some questions.

It seems that using a game engine might be a good idea.  Impact (http://impactjs.com/) looks very nice but do I really want to shell out $99 for something that I may not want to use.  There are other free engines but are they any good?  What type of game am I going to create?  What about my lack of artistic ability?

Continue Reading Here...

Canvas drawing reminds me of the Turtle program
4/2/2012 7:01 PM


I decided to play around with the canvas object and the very small amount that I have learned so far.  I was joking with someone the other day about my lack of artistic ability and the joked back that they could draw a 3d box.  That brought back memories of elementary school and doodeling 3d boxes on book covers.

It also brought back memories of using old apple computers to move around a triangle cursor called the turtle and drawing with it.  We were supposed to only type in one command at a time but I quickly learned that it was much faster to chain commands together things all at once.  The canvas drawing commands remind me of that.  So, feeling very nastalgic, I decided to try to use canvas to draw a 3d box.

Continue Reading Here...

The journey begins
4/1/2012 10:17 AM


After looking around for a good book, I found "HTML5 Games: Creating Fun with HTML5, CSS3, and WebGL", by Jacob Seidelin.  The reviews on Amazon were complimentary and the authors website shows some very impressive work!  Some of his work can be found here: http://www.nihilogic.dk/labs/

Now that I have a good book to work through, I needed a good development environment.  Of course I could just use notepad to create the HTML, JavaScript, and CSS, but that would leave myself open to having simple bugs that my eyes just don't see but the editor does.  I think that I have found exactly what I am looking for!

Continue Reading Here...

Jumping into HTML5 game development with both eyes closed
3/31/2012 7:25 AM


I have been developing software for over 15 years.  I still remember writing peek and poke commands on my C64 when I was a teenager.  For over the last 8 years I have been employed as a .net programmer and I've spent the last 5 years using c#.

I have been spoiled by the abstraction that .net provides from the underlying javascript and xml.  Sure I have to get my hands dirty once in a while, but on a typical web project I write very little actual javascript.  The .net ajax controls do most of the heavy lifting for me.

HTML5 has matured and I have seen many impressive things done with it.  With so many mobile devices and all major browsers  supporting it, it's hard not to take notice.  HTML5 will even have a front row seat in Windows 8 with metro apps.

So what do I know about coding in HTML5?  Well in a word, nothing.

Continue Reading Here...