html, body {
  height: 100%;
}
body {
  overflow-x: hidden;
  background: black;
}
View Compiled
/* 
SANTA ON THE RUN
Uses phaser.js https://phaser.io
♥
*/

// FULL mode is best for phones https://codepen.io/natewiley/full/gbwWMX

(function(){

var width = window.innerWidth;
var height = window.innerHeight > 480 ? 480 : window.innerHeight;
var gameScore = 0;
var highScore = 0;

var SantaGame = {

	init: function(){

		this.game = new Phaser.Game(width, height, Phaser.CANVAS, '');
		this.game.state.add("load", this.load);
		this.game.state.add("play", this.play);
		this.game.state.add("title", this.title);
		this.game.state.add("gameOver", this.gameOver);
		this.game.state.add("instructions", this.instructions);
		this.game.state.start("load");

	},

	load: {
		preload: function(){
			this.game.load.audio('drivin-home', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/drivin-home-low.mp3');
			this.game.load.audio('ho-ho-ho', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/ho-ho-ho.mp3');
			this.game.load.audio('hop', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/jump-sound.mp3');
			this.game.load.image('platform', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/ground.png');
			this.game.load.spritesheet('santa-running', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/santa-running.png', 37, 52);
			this.game.load.image('snow-bg', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/snow-bg.png');
			this.game.load.image('snowflake', 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/snowflake.png');
			this.game.load.image("logo", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/game-logo.png");
			this.game.load.image("instructions", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/instructions.png");
			this.game.load.image("game-over", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/game-over.png");
			this.game.load.image("startbtn", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/start-btn.png");
			this.game.load.image("playbtn", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/play-btn.png");
			this.game.load.image("restartBtn", "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/restart-btn.png");
		},
		create: function(){
			this.game.state.start("title");
		}
	},


	// title screen

	title: {
		
		create: function(){
			this.bg = this.game.add.tileSprite(0, 0, width, height, 'snow-bg');
			this.logo = this.game.add.sprite(this.game.world.width/2 - 158, 20, 'logo');
			this.logo.alpha = 0;
			this.game.add.tween(this.logo).to({alpha: 1}, 1000, Phaser.Easing.Linear.None, true, 0);
			this.startBtn = this.game.add.button(this.game.world.width/2 - 159, this.game.world.height - 120, 'startbtn', this.startClicked);
			this.startBtn.alpha = 0;
			this.game.add.tween(this.startBtn).to({alpha: 1}, 1000, Phaser.Easing.Linear.None, true, 1000);
		},

		startClicked: function(){
			this.game.state.start("instructions");
		},

	},

// instructions screen
	instructions: {
		
		create: function(){
			this.bg = this.game.add.tileSprite(0, 0, width, height, 'snow-bg');
			this.instructions = this.game.add.sprite(this.game.world.width/2 - 292, 30, 'instructions');
			this.instructions.alpha = 0;
			this.game.add.tween(this.instructions).to({alpha: 1}, 800, Phaser.Easing.Linear.None, true, 0);
			this.playBtn = this.game.add.button(this.game.world.width/2 - 159, this.game.world.height - 120, 'playbtn', this.playClicked);
			this.playBtn.alpha = 0;
			this.game.add.tween(this.playBtn).to({alpha: 1}, 800, Phaser.Easing.Linear.None, true, 800);
		},

		playClicked: function(){
			this.game.state.start("play");
		},
	},

	// playing
	play: {

			create: function(){
          highScore = gameScore > highScore ? Math.floor(gameScore) : highScore;
				gameScore = 0; 
				this.currentFrame = 0;
				this.particleInterval = 2 * 60;
				this.gameSpeed = 580;
				this.isGameOver = false;
				this.game.physics.startSystem(Phaser.Physics.ARCADE);

				this.music = this.game.add.audio("drivin-home");
				this.music.loop = true;
				this.music.play();

				this.bg = this.game.add.tileSprite(0, 0, width, height, 'snow-bg');
				this.bg.fixedToCamera = true;
				this.bg.autoScroll(-this.gameSpeed / 6, 0);

				this.emitter = this.game.add.emitter(this.game.world.centerX, -32, 50);

				this.platforms = this.game.add.group();
				this.platforms.enableBody = true;
				this.platforms.createMultiple(5, 'platform', 0, false);
				this.platforms.setAll('anchor.x', 0.5);
				this.platforms.setAll('anchor.y', 0.5);

				var plat;

				for(var i=0; i<5; i++){
					plat = this.platforms.getFirstExists(false);
					plat.reset(i * 192, this.game.world.height - 24);
					plat.width = 192;
					plat.height = 24;
					this.game.physics.arcade.enable(plat);
					plat.body.immovable = true;
					plat.body.bounce.set(0);
				}

				this.lastPlatform = plat;

				this.santa = this.game.add.sprite(100, this.game.world.height - 200, 'santa-running');
				this.santa.animations.add("run");
				this.santa.animations.play('run', 20, true);

				this.game.physics.arcade.enable(this.santa);

				this.santa.body.gravity.y = 1500;
				this.santa.body.collideWorldBounds = true;
				
			  this.emitter.makeParticles('snowflake');
			  this.emitter.maxParticleScale = .02;
			  this.emitter.minParticleScale = .001;
			  this.emitter.setYSpeed(100, 200);
			  this.emitter.gravity = 0;
			  this.emitter.width = this.game.world.width * 1.5;
			  this.emitter.minRotation = 0;
			  this.emitter.maxRotation = 40;

				this.game.camera.follow(this.santa);
				this.cursors = this.game.input.keyboard.createCursorKeys();
				
				this.spacebar = this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR);
				this.emitter.start(false, 0, 0);
				this.score = this.game.add.text(20, 20, '', { font: "24px Arial", fill: "white", fontWeight: "bold" });
        
          if(highScore > 0){
            this.highScore = this.game.add.text(20, 45, 'Best: ' + highScore, { font: "18px Arial", fill: "white" });
          }
					
			},

			update: function(){
				var that = this;
				if(!this.isGameOver){
					gameScore += .5;
            this.gameSpeed += .03;
					this.score.text = 'Score: ' + Math.floor(gameScore);
             
					this.currentFrame++;
					var moveAmount = this.gameSpeed / 100;
					this.game.physics.arcade.collide(this.santa, this.platforms);

					if(this.santa.body.bottom >= this.game.world.bounds.bottom){
						this.isGameOver = true;
						this.endGame();
						
					}

					if(this.cursors.up.isDown && this.santa.body.touching.down || this.spacebar.isDown && this.santa.body.touching.down || this.game.input.mousePointer.isDown && this.santa.body.touching.down || this.game.input.pointer1.isDown && this.santa.body.touching.down){
						this.jumpSound = this.game.add.audio("hop");
						this.jumpSound.play();
						this.santa.body.velocity.y = -500;
					}


					if(this.particleInterval === this.currentFrame){
						this.emitter.makeParticles('snowflake');
						this.currentFrame = 0;
					}

					this.platforms.children.forEach(function(platform) {
					  platform.body.position.x -= moveAmount;
					  if(platform.body.right <= 0){
					  	platform.kill();
					  	var plat = that.platforms.getFirstExists(false);
					  	plat.reset(that.lastPlatform.body.right + 192, that.game.world.height - (Math.floor(Math.random() * 50)) - 24);
					  	plat.body.immovable = true;
					  	that.lastPlatform = plat;
					  }
					});

				}
				
			},


			endGame: function(){
				this.music.stop();
				this.music = this.game.add.audio("ho-ho-ho");
				this.music.play();
				this.game.state.start("gameOver");
			}


	},
	gameOver: {

		create: function(){
			this.bg = this.game.add.tileSprite(0, 0, width, height, 'snow-bg');
			this.msg = this.game.add.sprite(this.game.world.width/2 - 280.5, 50, 'game-over');
			this.msg.alpha = 0;
			this.game.add.tween(this.msg).to({alpha: 1}, 600, Phaser.Easing.Linear.None, true, 0);

			this.score = this.game.add.text(this.game.world.width/2 - 100, 200, 'Score: ' + Math.floor(gameScore), { font: "42px Arial", fill: "white" });
			this.score.alpha = 0;
			this.game.add.tween(this.score).to({alpha: 1}, 600, Phaser.Easing.Linear.None, true, 600);

			this.restartBtn = this.game.add.button(this.game.world.width/2 - 183.5, 280, 'restartBtn', this.restartClicked);
			this.restartBtn.alpha = 0;
			this.game.add.tween(this.restartBtn).to({alpha: 1}, 600, Phaser.Easing.Linear.None, true, 1000);
		},

		restartClicked: function(){
			this.game.state.start("play");
		},
	}

};

SantaGame.init();
  
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/phaser/2.1.3/phaser.min.js