Archive for the ‘Javascript’ Category

Adobe Brackets Extension – Replace In Selection

Saturday, August 15th, 2015

Here's a simple extension for Adobe Brackets that allows you to do a find/replace all within selected text. This is a feature that I use a lot and I like it more than the default Brackets find/replace behavior. You can get the extension from this direct link, the Brackets Extension Registry or via the extension manager in Brackets itself (shown below). You can access the extension manager through the File menu.

The source code is also available on github.

ReplaceInSelect

NHL Draft Simulator Part 2

Thursday, July 2nd, 2015

With the draft behind us and free agency frenzy upon us, it's time to take a look back and see how well (or not well) the draft simulator performed. (more…)

NHL Draft Simulator

Friday, June 26th, 2015

If you've been following me for any length of time, you probably know that I'm a big NHL fan. As such, with the 2015 NHL draft today in Florida, I decided to try my hand at creating a draft simulator. The program simulates the first 2 rounds of the draft, but it was more complex than I thought going in. In this article, I'll discuss how it works and the challenges I faced with development, as well as ideas for improvements in future versions.

NHL Draft Logo 2015

(more…)

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

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

Tetris with HTML5

Thursday, August 8th, 2013

HTML5 Tetris

A couple weekends ago I decided to take a small break from my current game and dive a bit more into HTML5 gaming. And what better way to cut your teeth on a new technology than to create a gaming classic? Of course this means I ended up making a Tetris clone as a weekend project. I learned quite a bit on this project and am happy to report that the game runs great in the desktop browser and also on mobile devices. To be fair, I've only tested it on the iPhone 4S and a couple of Android phones, but I think it turned out really well.

For now you can check the game out here, but expect a tutorial in the near future!

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

Subscribe to RSS feed FGS5 Badge