Multiplayer Tanks Game

Here's a game that shows off the gamepad API of the web platform. In theory, it should work on XBox One, PS4, and, if there are at least two controllers hooked up, PC.

Image Fetcher

I wish I could see all the comics ever made in a series without clicking the "next" button and loading a new image every thirty seconds, so I created a little program that gets all of the comics ever made from "Square Root of Minus Garfield". You may use and modify it under the terms of the code's license - have it fetch Foxtrot or Calvin and Hobbes or Brawl in the Family comics if you can figure out the pattern. Just note that if you fetch non-commercial images, you must not use the code on commercial pages as defined by the images' license.

More Music

On my previous post I published some code that looks something like this:

The library works, but there are some parts not explained by that post, so as surely as I am bored at work, here is a sample

sine square sawtooth triangle

This program shows off how powerful this simple library is. Let's pick it apart chunk by chunk:

1. The load() function, as I explained earlier, does not matter as a whole, but is a good place to put initialization code. The method creates an AudioPlayer.Song object called song and sets its notes and durations. But unlike in the previous post, the notes are not numbers like 52,55,54,52,55,54. They actually represent something on the staff. Look at the arrays that it uses - tl and ts. I would give a hint, but apparently documentation is more important than fun. ts is Treble space. tl is Treble line. there are 4 treble spaces and 5 treble lines, ordered bottom to top. Since in JavaScript and every other programming language that I have worked with has indexes that begin at zero, the image below shows what tl[1] refers to on a staff. My library also defines the Bass staff with bl and bs. 
   
2. You may notice something like tl[1]+12. This refers to the G immediately above the staff. The +12 enables an octave high. Likewise, -12 is an octave low, +1 is a sharp, and -1 is a flat. This enables us to literally copy the music. Later I intend to program key signatures into the library and to remove the global scales. The programmer would probably do something like "var tl = AudioPlayer.makeSharpKey(2).trebleLines" for a 2-sharp (G major) key.
3. After setting up the notes and durations for a song, we append to the song. If you are not an experienced programmer, you might think, why not make all of the song at once? Well, making Aryll's theme in my previous post caused problems because I attempted to make all of the song at once. I originally missed a few notes, so the durations did not match up the later notes and caused big problems later. If you append between 5 and 10 measures at a time, you will save yourself a lot of grief with bigger pieces of music.
4. Something that I thought of immediately before I began to write the post is what a piece of music sounds like backwards. I guess it has something to do with the song that this page plays. Previous experience in dealing with arrays showed me that JavaScript is a language that, like C#, uses references for more complex objects. Of course, unlike C#, most JavaScript objects can be serialized through a function like JSON.stringify() and deserialized through JSON.parse(). If the objects use private variables as important data or reference themselves, such serialization fails, but in this case, I wanted to allow generated songs to be put into a JSON file.
5. The cloned song can not be appended to as easily without one additional function call, but we have access to data that can be manipulated, i.e. reversed. Since we want the song itself to be reversed, we call bkwdsSong.notes.reverse() and bkwdsSong.durations.reverse();
6. An AudioPlayer is not limited to just the songs we initialize it with. AddSong pushes the specified song  object into its current array of songs and returns the current number of songs.
7. The play function gets the user's chosen instrument and plays the specified track. This allows the two other functions to specify forwards or backwards, which are each called by their respective buttons.

I found the picture here: http://www.guitargames.net/blog/?p=348 I did not make the image.

Generating music

You may or may not be aware of this, but HTML5 through the new JavaScript APIs enables browsers to act like sand boxed operating systems. Drawing functions and webgl with <canvas>, the joystick api, web sockets(a client-to-host HTTP extension), webRTC(Real-Time Communications), the full screen API, the cursor lock API, ... this list goes on and on. All of these things can be used for gaming, some in more obvious ways than others. This post  is about something I did with the Web Audio API.

It took about a week once I started, but I finally managed to get a primitive synthesizer. Eventually, I hope to make it able to play customized instruments, but for now we are stuck with a sine wave. I wish to thank Rachel Bell, who published the sheet music I used to test the synthesizer to her blog.

Styling HTML Media Inner Workings

The Problem

While on Stack Overflow I stumbled across a question(right here in case you are curious) about styling the HTML5 Audio Player's time text and track control. Intrigued, my first reaction was that it could not be done because the players are browser-dependent. As I looked deeper into the issue, my answers and comments failed to satisfy the person who asked the question. I became haunted by the question and devoted some time to finding the answer. Since Google Chrome is the most stable browser that I could find that supports the most HTML5 features, I focused almost exclusively on it, but occasionally used a less-stable Chinese webkit browser called Maxthon.