My Javascript Experience

2011-01-18T13:47:00.000-08:00

Since the explosion of HTML 5 JavaScript has started to interest me more and more, mostly because of the similarities it has with actionscript. Also since the introduction of the canvas tag it seemed to me that JavaScript's likeness to flash is greater than ever. HTML 5 has introduced a kind of stage to which we can refer and add objects, shapes, animations and interactions- the kind of thing flash developers like to do. That being said, now is a better time than any to start branching out and getting to grips with this new technology. So last week I had a go at some JavaScript.

click image to see game

The example I created is an extremely simple arkenoid game. It's not exactly polished and only took me a few hours after work but am pleased with the outcome. I knew JavaScript was pretty similar to actionscript but that was about the extent of my knowledge and I was surprised how quickly I picked it up. I did come across some challenges ensuring cross browser compatibility (I'm still not sure if I managed to cover all bases) but aside from that I managed grasp the fundamentals fairly quickly.
Anyway I learned a lot from those 270 lines of code and will definitely be carrying on with JavaScript development in the future.
On a somewhat irritating side note, it's also kind of cool being able to view my work on my phone for once.
Code is available at GitHub

Random games && perlin noise

2010-10-08T12:09:00.000-07:00

Recently I’ve been experimenting with different types of random games; generally small tile based stuff like the old classic phone game- snake. I’m still in the process of finishing one (will post the source here when I do) but generally I’ve enjoyed the process, especially the way tiles are so predictable. You can test for certain conditions with tiles as you know the player can only move or hit certain coordinates constrained by the size of the tiles. Anyway after all this messing about with squares I started playing with Flash’s perlin noise to generate random shapes and got some interesting results. I really like the fluidity you get from perlin noise which is in real contrast to the games I have been experimenting with recently. Also these techniques can be applied to make platform games to generate random levels.

In theory you can generate a block of random perlin noise by using a random number to define the 'random seed' argument of the noise constructor. You can then take a cross section (i.e. a row of pixels) from the block and, depending on how bright or dark that pixel is, you can position your shape or line according to the pixel’s value.
The possibilities of this technique are endless.. (animating noise, moving objects around depending on the pixels darkness etc) and I will definitely be playing with noise some more in the future. For now I’ve posted a quick example of how to use this process to create a random platform landscape, quickly and cleanly.

package  
{
    import flash.display.Shape;
    import flash.display.Sprite;
    import flash.display.Bitmap;
    import flash.display.BitmapData;

    /**
     * @author Dan Bennett
     * @email dan.bennett86@yahoo.com
     */
    [SWF(width="900", height="700", backgroundColor="#ffffff")]
    public class PerlinNoisePlatform extends Sprite
    {
        private static const BOX_WIDTH:int = 100;
        private static const BOX_HEIGHT:int = 100;
        private static const RANGE:int = 300;
        
        private var xPos:Number = 1;
        private var darkness:Number = 1;
        
        public function PerlinNoisePlatform()
        {
            var noise:BitmapData = createNoise();
            drawPlatform(noise);
            
        }

        private function createNoise():BitmapData 
        {
            var randomSeed:int = Math.random() * 100;
            var contents:BitmapData = new BitmapData(BOX_WIDTH, BOX_HEIGHT);
            contents.perlinNoise(BOX_WIDTH, BOX_HEIGHT,6,randomSeed,false,false,7,true);
            
            return contents;
            
        }
        
        private function drawPlatform(data:BitmapData):void 
        {
            // Pick a starting point to get our row of pixels
            var xStart:Number = Math.floor(Math.random() * BOX_WIDTH);
            
            for(var i:int = 0;i<BOX_HEIGHT;i++)
            {
                var shape:Shape = new Shape();
                shape.graphics.moveTo(xPos, darkness * RANGE);
            
                
                if(i % 4 == 0)
                {
                    this.darkness = data.getPixel( xStart , i) / 0xFFFFFF;
                }
                
                this.xPos+=10;
                
                shape.graphics.lineStyle(1,0x000000);
                shape.graphics.lineTo(xPos, darkness * RANGE);
                this.addChild(shape);
                
            }
        }
    }
}