HTML5

HTML5

HTML5 Game Tutorial – Infinite Runner

HTML5 Game Tutorial – Infinite Runner

In this tutorial, we are going to create an HTML5 infinite runner effect that you can use to create games with, or just to create cool looking websites. Here is a screen shot of what we will be building.     First, let’s create a list of what we will need: jQuery Javascript Library GSAP Animation Library jQuery.animateSprite Plugin   jQuery is my go-to Javascript library. Thankfully, I’m not alone there as it has become very popular over the years. The Greensock Animation Platform (GSAP) is one of, if not the best Javascript animation libraries. They have some cool demos over at their site. The animateSprite plugin is something I … Continued
Let’s build an HTML5 game! (Beginner Tutorial, Part 4)

Let’s build an HTML5 game! (Beginner Tutorial, Part 4)

In our final tutorial, we are going to learn about fine-tuning our game. Random numbers, number scales and some images should do the trick. We have a playable game at this point, but we need to make it fun. Let’s get started. We will pick up from where we left off in Part 3. Spit and Polish In order to make our game look like a game, we obviously need some decent graphics. I will rely on the awesome Daniel Cook from Lost Garden to provide some amazing retro Tyrian graphics! I have extracted two items that will will use, a ship and tower looking thing. Let’s go add these … Continued
Let’s build an HTML5 game! (Beginner Tutorial, Part 3)

Let’s build an HTML5 game! (Beginner Tutorial, Part 3)

We are almost finished making our first HTML5 game! All we need now is to keep score and keep the action going. Keeping score is fairly simple. A global counter works very well for this type of game. Keeping things moving continuously, however, will take a bit more thought. The Infinite in Infinite Runner So, let’s recap our original game idea: The game I have in mind is a hybrid tower defense/infinite runner type game. Enemies constantly come at you from the top of the game screen and you have to put defense obstacles in their path to defeat them. Enemies coming down from the top of the screen: Check. … Continued
Let’s build an HTML5 game! (Beginner Tutorial, Part 2)

Let’s build an HTML5 game! (Beginner Tutorial, Part 2)

In our last tutorial, we covered prototyping a game with JS Bin. JS Bin is a great tool for testing pieces of javascript and playing around with ideas. Now that we have the basics of our HTML5 game, we should probably move to a more suitable IDE. Note: This is the second article in a series. Feel free to start from the beginning. Cloud Development with Codio I’ve recently discovered an online cloud based IDE called Codio. You can get the skinny here at Web App List or just head over to Codio directly. We will be using Codio to finish off our HTML5 game tutorial. If you want, you can … Continued
Let’s build an HTML5 game! (Beginner Tutorial, Part 1)

Let’s build an HTML5 game! (Beginner Tutorial, Part 1)

Building an HTML5 game. So, you want build an HTML5 game? Welcome to the club! HTML5 is the newest platform for building games for general audiences and many developers are looking to get in on the action. This tutorial will get you started whether you are targeting desktop browsers, mobile browsers, native applications via Apache Cordova (Phonegap) or Windows Phone or all of the above. We will attempt to construct a prototype of a some-what playable game, exploring some concepts along the way. The first concept we will tackle our rendering approach. Canvas versus WebGL versus DOM I typically eliminate WebGL from consideration due to its still low adoption rate … Continued