HTML 5 Mute / Wordpress Code Highlighting
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.
Avalanche!!
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!
The Path
The first time I played The Path I just ran to Grandmother’s house. I selected the emo-type character, sullenly sitting at the table in the center of the character selection room, for the trip. I shortly arrived at the house, and found Grandmother in her bedroom. The game then told me I failed for not finding any items, and not encountering the wolf. What?
I really wanted to like this game. I had played The Graveyard from Tales of Tales when it was an entry for the IGF, and really enjoyed it. I thought it was beautifully done: short, and sweet. There less involved, but it was considerably more enjoyable for me. There was really only one path to walk down, so I could enjoy the beautiful scenery more. I wasn’t busy looking for something that I really didn’t feel any motivation to look for. Playing as an old woman, I felt their somewhat awkward control scheme really made the experience more immersive. Feeling hindered just trying to walk and look around, in a game involving exploration, as presumably healthy, young kids is just frustrating.Shoes
I’ve been trying to start a small project to teach myself ruby. Unfortunately, I decided to do this right when _why disappeared from the internet. I had been planning on using Shoes, his ruby gui toolkit, but all his sites disappearing has made it a bit more difficult.
I spent a couple days wrestling with getting everything working. It retrospect it took an embarrassing amount of time once I knew what to do, but when isn’t that the case? Here’s the steps I took in case anyone else is interested. I did this on Ubuntu, so I use apt-get. For other os’s, check the why repository mirror on github at http://github.com/whymirror.
1) sudo apt-get install ruby-full :: I was missing some dependencies required for shoes when I didn’t get the full ruby install the first time I installed it. I spent a lot of time hunting around for what I was missing, but this seemed to take care of everything.
2) sudo apt-get install shoes :: I originally downloaded shoes off of the github mirror, but using apt-get makes the process much simpler.
From there I recommend reading why’s shoes tutorial/guide/novel, “nobody knows shoes”. This guide disappeared along with everything else related to why, but it has been reposted in other places. This post has download links for both “why’s poignant guide to ruby” and “nobody knows shoes.”