A JavaScript framework for making HTML5 games

phaser.io

You will need

• to load the Phaser framework (phaser.min.js or phaser.js)
• an html file to display the game and load JavaScript file
• a JavaScript file to write the main functionality
• an assets folder to preload images
• basic web server

//create an instance of a Phaser game
var game = new Phaser.Game(
    320, //width
    568, //height
    Phaser.AUTO, // detects browser and auto renders 
    'game', //define the name of the div
    state //pass in reference of the initial state

preload: function() {
        this.load.image('wall', '/assets/wall.png');
        this.load.image('background', '/assets/background-texture.png');
        this.load.spritesheet('player', '/assets/player.png', 48, 48);
        this.load.audio("jet", "/assets/jet.wav");
        this.load.audio("score", "/assets/score.wav");
        this.load.audio("hurt", "/assets/hurt.wav");
    }

create: function() {
        this.physics.startSystem(Phaser.Physics.ARCADE);
        this.physics.arcade.gravity.y = GRAVITY;
        this.background = this.add.tileSprite(0,0, this.world.width, this.world.height, 
            'background');
        this.walls = this.add.group();
        this.player = this.add.sprite(0,0, 'player'); 
        this.player.animations.add('fly', [0,1,2], 10, true);
        this.physics.arcade.enableBody(this.player);
        this.player.body.collideWorldBounds = true; 
        this.scoreText = this.add.text(
            this.world.centerX,
            this.world.height/5,
            "",
            {
                size: "32px",
                fill: "#FFF",
                align: "center"
            });
        this.scoreText.anchor.setTo(0.5, 0.5);
        this.input.onDown.add(this.jet, this); 
        this.jetSnd = this.add.audio('jet');
        this.scoreSnd = this.add.audio('score');
        this.hurtSnd = this.add.audio('hurt');
        this.reset();
    },

    update: function() { 
        if(this.gameStarted) {
            if(this.player.body.velocity.y > -20) { 
                this.player.frame = 3;
            } else { 
                this.player.animations.play("fly");
            }
            if(!this.gameOver) {
                if(this.player.body.bottom >= this.world.bounds.bottom) {
                    this.setGameOver();
                }
                this.physics.arcade.collide(this.player, this.walls, this.setGameOver, null, this); 

    },

http://phaser.io/learn