Posts Tagged ‘HTML5’

Terrain Morphing with Threejs

Monday, July 14th, 2014

Spent some time with the three.js library this afternoon and created a little terrain morphing demo which you can check out here. It's a fairly simple demo; just press the Up arrow on the keyboard and the terrain will gradually transform itself according to a new set of random values. You can do this as many times as you want, but you have to wait for the current morph to complete before starting a new one. Pretty neat!

Check out the terrain morphing demo for yourself!

Tutorial Update: Puzzle Game Completion with HTML5 and Javascript

Wednesday, March 26th, 2014

One of the more popular tutorials on the site is the Puzzle Game Basics with HTML5 and Javascript piece. Over the last few months I've had a lot of requests asking how to detect that the player has correctly ordered all the pieces. That's what we're looking at today. As you'll see, it's rather simple to implement!

I'm going to be using the completed code from the previous tutorial as the starting point. If you haven't checked out the puzzle game basics tutorial, you should do that now and then come back here when you're finished. If you're ready to go, continue on! (more…)

Goodbye 2013, Hello 2014

Wednesday, January 1st, 2014

Here we are facing a brand new year ahead. It seems like not long ago I was writing about what I wanted to achieve in 2013 as 2012 came to a close. I love the new year, its good to take some time to reflect on what we've been doing and also on what we wish to accomplish in the future. I'm not quite sure why, but it feels like starting with a clean slate every time. To that end, here's a look at the year that was 2013 and what will be 2014 in my development life. (more…)

Video Tutorial: Tetris with HTML5 and JS

Sunday, December 8th, 2013

In this tutorial you will learn how to create a simple Tetris clone using HTML5 and Javascript. In addition to keyboard control, you will implement touch interaction so that the game can be played on mobile devices such as the iPhone and Android phones.

It's a doozy, so you may want to break it up into multiple viewing sessions or make sure you've got time to spare.

(more…)

Tutorial: Loading Images with JavaScript

Sunday, September 22nd, 2013

In preparation for the (still) upcoming Tetris tutorial, I decided to write a small tutorial for loading images with Javascript. This tutorial will show you how to build a bulk image loading utility that we will use to load the images for our HTML 5 Tetris game. (more…)

Tutorial: Particle Basics with HTML5 and Javascript

Thursday, November 1st, 2012

With the holidays coming up and the weather turning cooler, I thought it would be fitting to do a basic, winter-themed tutorial on particles with HTML5 and Javascript. In this tutorial you will learn how to use the HTML5 canvas element and Javascript to create simple particles for a nice, soothing snowfall effect. If you want to see the finished product, you can do so here. Now let's get started! (more…)

Tutorial: Puzzle Game Basics with HTML5 and Javascript

Wednesday, August 1st, 2012

If you've played many online games, you've probably seen the puzzle simulations where an image is cut up into pieces and randomly arranged. The goal is to click pieces and move them to reform the original image. In this tutorial you will learn the basics of how to create this type of game. If you want to take a sneak peek at the finished product, you can do so here. (more…)

WebRTC Tutorial Update

Tuesday, July 24th, 2012

One of the more popular tutorials on the site is the one on webRTC with HTML5 and Javascript. However, the problem with creating tutorials for cutting edge technology such as webRTC is that the specification is constantly changing. Recent updates to the webRTC spec made the tutorial inaccurate. Today I went back and updated it so that it works with the new specification. Check it out if you haven't tried it yet!

Tutorial: WebRTC with HTML5 and Javascript

The truth about the premium features for Flash

Wednesday, March 28th, 2012

Today was a pretty hectic day in the industry. After Adobe announced a new premium license for Flash Player; the internet, in typical internet fashion, went ballistic over pretty much nothing. If you want to see what all the ruckus is about, you can read the official announcement here. I'm really going to hope that when you're done reading that, you realize there's nothing to get riled up about.

The 9% fee from the premium license applies only to Flash Player-based games that utilize both Stage3D and Alchemy. Furthermore, it only comes into effect if said game manages to pull in $50,000 or more in revenue. Anything packaged with AIR is exempt. This means anything you do for mobile does not require a fee.

I've been developing with Flash for quite a while now and nothing I've ever built has met the requirements for paying the 9% fee. And perhaps more to the point, nothing I plan on building in the future would incur a fee either.

Unless you're a major game developer (think EA) it's pretty safe to assume this announcement does not apply to you or any Flash projects you're planning on building.

As Richard Davey said on Twitter: "All everyone will take-away is the '9%' headline and ignore the fact it applies to not one single game yet"

HTML5 and Apple zealots will likely continue to make a big scene about this, but hopefully now you understand that this is really not a big deal and perhaps cooler heads will prevail. For another voice on the matter, check out Lee Brimelow's recent post in which he explains the situation.

Tutorial: WebRTC with HTML5 and Javascript

Sunday, March 11th, 2012

Updated: 7/24/2012

WebRTC is a new technology that brings real-time communication capabilities to your browser without the need for plugins. In this tutorial you'll learn how to set up a webcam stream and copy images from it to an HTML5 canvas element. (more…)

Subscribe to RSS feed FGS5 Badge