This is the first game I've tried making a game in HTML5. I like web apps--they're pretty universal, meaning you can reach a wider audience then you can with platform-specific applications. However, prior to HTML5, Flash was the only option for realtime web apps. Flash does what it does pretty well, but I've long been excited about the idea of running realtime apps natively in the browser. This was an exploratory experience, and I'm going to mention a couple of things.
Unfortunately, KineticJS was not supposed to be used for gaming on its own. It doesn't redraw automatically. I used a redraw() method and set a window interval to call that method every 30 milliseconds to enable smooth gameplay. This is the kind of thing that Flash does automatically, but which wasn't done in any libraries that met my requirements.
Despite putting my best efforts into this project, there are some issues. I will do my best to enumerate them and explain why they occurred.
The Level - The grayscale spectrum has 256 separate values. I tried experimenting with fitting all 256 values in the level, but unless the user has a movie theater to play the game on, the game wouldn't be playable--either it would be too wide or the bricks would be too small. In order to compensate, I had each brick represent 8 values. This means that when you hit a brick of value 8, you're affecting the histogram at indices 64-71.
I also couldn't fit all the values on the vertical scale. For sufficiently large images, the values of the histogram might be in the thousands. In order to contain the vertical size of the histogram and make a playable level, there's a maximum of 20 bricks per horizontal index. Each brick has a value--this value is how much it symbolizes on the histogram. Because of trying to fit the histogram onto a playable surface, the values of bricks on separate horizontal indices might vary wildly. Furthermore, the value of each brick is determined by the peak of the range of images. That means, for a histogram containing histo = 2, histo = 10, histo = 9279273, the value set to the brick would be determined from 9279273.
The upshot of all this is that sometimes the image behaves counterintuitively when you destroy blocks. Some blocks might have little to no effect--there might have been very few pixels with that value in the original image, and so the modification has little affect too. However, other blocks might be incredibly weighty, and so destroying them will change the image a lot.
There might be better ways to accomplish the level creation and histogram modification based on the changing level. I don't know. I do know that this works in a way that exemplifies histogram modification without sacrificing gameplay. There are certainly better tools to perform histogram modification that are more precise. I can only hope that this is more fun.Homepage