Benedict’s Babeldom

I finished the high score site for Avalanche a couple days ago. It’s built on google appengine, and integrates really nicely with the extension.

First I created the high score app, which you can view here. Google’s tutorials for AppEngine are quite nice. They guide you through creating a guestbook that people can sign using their google account. From there I changed several things: instead of taking a guestbook post, the app accepts a score; instead of having users log in with their google account, the player can enter any name he likes (arcade style, without the three character restriction). I then changed the default page to look more scoreboard like, displaying the top 20 scores in descending order.

The most difficult part was getting the extension to integrate with the app. The first step was to add permissions to the extension:

  "permissions": [
    "http://avalanchescores.appspot.com/"
  ]

From there, interaction with the app was done through an XMLHttpRequest:

function submitScore() {
  var highScore = document.getElementById("HighScore").innerHTML;
  var name = document.getElementById("name").value;
  var url = "http://avalanchescores.appspot.com/addscore";
  var parameters = "score=" + highScore + "&name=" + name;
  var req = new XMLHttpRequest();

  req.open("POST", url, true);
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  req.send(parameters);
  window.open("http://avalanchescores.appspot.com/","High scores!","");
}

The XMLHttpRequest just sends the parameters to the servlet’s location, and the java code that handles new scores takes care of the rest. Overall I was really impressed with AppEngine. Setup was extremely easy, especially once I successfully installed the Eclipse plugin. There’s even a neat dashboard with usage statistics that make me feel like Zero Cool from Hackers.

Code for Avalanche itself is now on github, which also works like a charm.

I will be leaving for Germany on Friday, where I will be studying abroad until mid-August, so I probably won’t be updating much.

It’s great to put something out that friends can just try out in their browser. At first we were going to have music for the game, but it never worked when using it as a chrome extension. I assumed it was just some issue with chrome extensions integrating html5. But today when my roommate opened up the game, the music started playing. The tune was made by Blot for the Assemblee Competition and can be found here.

The game’s purpose is to be something quick that you can play while doing something else, or waiting. Of course, music playing in the background can be quite annoying if you’re trying to multitask, or are already listening to music.

Here’s what the original code looked like:

  <audio src="resources/shortgametune.mp3" loop="true" autoplay="autoplay">
  </audio>

This code just loaded the song, and played it on a loop. At first I added the built in html5 audioplayer so the user could pause/play, and adjust volume. Overall I found that too distracting, so I built a mute button. Here’s what the code looks like now:

  <script type="text/javascript">
    function mute(){
		var audio = document.getElementById('song');
		if(audio.paused)
			audio.play();
		else
			audio.pause();
    }
  </script>

  <audio id='song' loop autoplay>
    <source src="resources/shortgametune.mp3">
  </audio>

There isn’t a cornucopia information out there on the audio tag, so hopefully this might help someone if they’re looking to do something similar. I’ve also updated the source code that I posted earlier after adding the changes, and cleaning everything up a bit.

You may have noticed the slick code highlighting on the above samples. I looked around for a while trying to find a good code highlighting plugin for wordpress. The one that I am now using is SyntaxHighlighter Evolved. The best explanation of how to use it is here.

I uploaded a small chrome extension this evening. It’s a small game called Avalanche. I coded the game together with my friend, Alex Langenfeld (who is a genius). It’s based off the classic avalanche game that everyone enjoyed on their TI-82s throughout high school and middle school. As it says in the description, the game is based on code from this tutorial, and uses an art asset from this forum post.

The platformer code from the tutorial provided the basics for animation, collision, asset management, and game state management. First we boiled the game down, taking out extras we didn’t need. We then added code for the falling icicles, code to generate the icicles, score management, and a couple other things. The worst part was dealing with the pixel art and animations. Overall it was pretty simple, and fun to develop!

The best part of making a chrome extension was how simple it was. All we had to do was include a simple json file with some metadata, and chrome did the rest! The process of adding it to the chrome extensions website was also extremely simple and rewarding. Check out the source code if you’re interested!

I’ve decided to learn to use Emacs. This came after reading one of Steve Yegge’s rants where he proclaimed “Emacs is the 100-year editor.” In addition to this he says “All of the greatest engineers in the world use Emacs. The world-changer types. Not the great gal in the cube next to you. Not Fred, the amazing guy down the hall. I’m talking about the greatest software developers of our profession, the ones who changed the face of the industry.” These look like some bold statements to me, but you can’t argue with the great software that Emacs has helped create. After reading several other blogs, and lots of comments, I seemed to gather this from the community: Emacs and Vim are old. They used to be the best way to get things done, and can still be incredibly powerful today. However, they are not essential to coding as some zealots would have you believe.

So why learn emacs? I want to see what all the rage is all about. After reading how powerful it is, the potential to never have to touch the mouse, and learn some lisp along the way to fully customize it; it just sounds like something fun to do. When I’m moving around my OS, or working on something, I love the long periods where I can alt-tab, ctrl-tab, and copy/paste my way around without having to touch the mouse. I always crave more hotkeys for doing things. From what I’ve seen, emacs has more than enough hotkeys to keep me sated.

Why not Vim? I had started trying vim about a week ago, before starting to explore emacs. It seemed neat, but the separation of normal and insert mode definitely bothered me a little bit. I didn’t like having to take my hands off the keyboard to hit escape in order to move around and actually use vim how you’re supposed to. After starting to use emacs, I immediately preferred the ctrl-x commands. At my level of understanding, the differences between the two aren’t really apparent yet either. All I’m doing right now is moving around using the keyboard, and using some basic commands (yank, kill line, jump up and down pages, etc.), so it’d be foolish for me to say that one is better than the other.

I’ll keep updating with my progress, and how I feel about emacs. Maybe I’ll switch to trying vim again, maybe I’ll abandon both. But for now, I’ve got my Emacs cheat sheet taped to the wall, and I’m excited to give it a shot.