Zack Proser zackproser

💭

Studying 📖

Developer Education at WorkOS, full-stack open-source hacker and technical writer. I love building tools and sharing knowledge.

zackproser / transition.js

Created December 6, 2014 22:42

Use to Brighten Target Image as User Scrolls Down Target Content

	$(document).ready(function(){
	var content = $('#index-content-well');
	var image = $('#lead-image');
	content.on('scroll', function(){
	var total_height = content.get(0).scrollHeight - content.height();
	var position = Math.abs(Math.round((content.scrollTop() / total_height) * 100) - 100);
	var value = 'grayscale(' + position +'%)';
	image.css('-webkit-filter', value);
	image.css('-moz-filter', value);
	image.css('filter', value);

zackproser / CanyonRunner Gruntfile.js

Created July 7, 2015 12:14

Shows how you might use Grunt to automate your Phaser Game's build process

	module.exports = function(grunt) {

	// Project configuration.
	grunt.initConfig({
	pkg: grunt.file.readJSON('package.json'),
	concat: {
	options: {
	separator: ';'
	},
	dist: {

zackproser / server.js

Last active August 29, 2015 14:24

A quick fileserver utility in Node.js, run from within a Phaser game project root, that makes it easy to test your game via the browser

	var
	express = require('express'),
	app = express(),
	port = 8080
	;

	//Set the 'static' directory to the project root - where index.html resides
	app.use(express.static('./'));

	//When root is requested, send index.html as a response

zackproser / MainMenu.js

Last active August 29, 2015 14:24

CanyonRunner Splashscreen - An example intro scene for a Phaser HTML5 Game

	CanyonRunner.MainMenu = function(game) {

	};

	CanyonRunner.MainMenu.prototype = {

	create: function() {
	this.sound = this.game.add.audioSprite('sound');

	//Check if Returning Player & If Has Level Progress Saved

zackproser / Preloader.js

Last active August 29, 2015 14:24

An example Preloader for a Phaser HTML5 Game

	CanyonRunner.Preloader = function (game) {

	this.ready = false;
	};

	CanyonRunner.Preloader.prototype = {

	preload: function () {

	this.background = this.add.sprite(0, 0, 'desert-open');

zackproser / audio.json

Created July 12, 2015 19:34

An example audiosprite mapping file as used by frameworks like Phaser

zackproser / game-state-transition.js

Last active August 29, 2015 14:24

A demonstration of how to handle game state transitions within a Phaser HTML5 level

	handleUserDataGameLoss: function() {
	//Handle Player Scores and Times
	this.interval = 0;
	this.step = this.playerStats.topScore - this.interval;
	if (this.score > this.step) {
	this.playerStats.topScore = this.interval + this.score;
	}
	this.playerStats.topTime = this.playerStats.topTime + this.survivalTimer.seconds;

	localStorage.setItem('Canyon_Runner_9282733_playerStats', JSON.stringify(this.playerStats));

zackproser / Phaser-save-game-intialization.js

Created July 12, 2015 20:26

An example of initializing a custom game save system while setting up a Phaser game level.

	//////////////////////
	//READ LOCAL STORAGE
	//////////////////////
	this.playerStats;
	if (localStorage.getItem('Canyon_Runner_9282733_playerStats') != null) {
	this.playerStats = JSON.parse(localStorage.getItem('Canyon_Runner_9282733_playerStats'));
	} else {
	this.playerStats = { topScore: 0, topTime: 0, returnPlayerToState: 'HowToPlay'};
	}

zackproser / Mobile-or-desktop.js

Last active August 29, 2015 14:24

An example of how to serve a mobile touchpad on your HTML5 Phaser game.

	CanyonRunner.Level1.prototype = {

	create: function() {
	//START MUSIC
	///////////////////
	this.sound = this.game.add.audioSprite('sound');
	this.sound.play('aronara');
	//////////////////
	//SET BACKGROUND
	//////////////////

zackproser / pause-and-mute-buttons.js

Created July 13, 2015 01:16

An example of how to create Pause and Mute buttons for your Phaser game.

	/////////////////////////////
	//CREATE SOUND TOGGLE BUTTON
	/////////////////////////////
	this.soundButton = this.game.add.button(this.game.world.centerX + 240, this.game.world.centerY - 290, 'sprites', this.toggleMute, this, 'sound-icon', 'sound-icon', 'sound-icon');
	this.soundButton.fixedToCamera = true;
	if (!this.game.sound.mute) {
	this.soundButton.tint = 16777215;
	} else {
	this.soundButton.tint = 16711680;
	}