375 src/src/Game.js
View file
@@ -1,147 +1,228 @@
/**
*Class Game
*/
function Game(){
this.STAGE_WIDTH=800;
this.STAGE_HEIGHT=480;
this.stage;
this.score;
}
/**
*Function called after the load of the images assets
*Can be emptied (or should ?) before starting the test
*/
Game.prototype.setup= function(){

console.log('setup');

//rich text copied from https://pixijs.github.io/examples/#/basics/text.js
var style = new PIXI.TextStyle({
fontFamily: 'cheeseburgerregular',
fontSize: 36,
fontStyle: 'italic',
fontWeight: 'bold',
fill: ['#ffffff', '#00ff99'], // gradient
stroke: '#4a1850',
strokeThickness: 5,
dropShadow: true,
dropShadowColor: '#000000',
dropShadowBlur: 4,
dropShadowAngle: Math.PI / 6,
dropShadowDistance: 6,
wordWrap: true,
wordWrapWidth: 440
});

var _st = this.stage;

function addSprite(id) {
return new PIXI.Sprite(PIXI.loader.resources.atlas["textures"][id]);
}


// adding images from atlas resources
// background

var bg1 = new PIXI.Sprite(PIXI.loader.resources.atlas["textures"]["bigwin-screen.jpg"]);
bg1.width = this.STAGE_WIDTH;
bg1.height = this.STAGE_HEIGHT;
_st.addChild(bg1);

var bg2 = new PIXI.Sprite(PIXI.loader.resources.atlas["textures"]["bigwin-screen.jpg"]);
bg2.width = this.STAGE_WIDTH;
bg2.height = this.STAGE_HEIGHT;


var overlay1 = new PIXI.Sprite(PIXI.loader.resources.atlas["textures"]["Overlay-FreeSpins.png"]);
overlay1.width = this.STAGE_WIDTH;
//overlay1.height = this.STAGE_HEIGHT*overlay1.scale.x;
_st.addChild(overlay1);

var overlay2 = new PIXI.Sprite(PIXI.loader.resources.atlas["textures"]["Overlay.png"]);
overlay2.width = this.STAGE_WIDTH;
overlay2.scale.y = -1;
overlay2.y = 390;
_st.addChild(overlay2);

var logo = new PIXI.Sprite(PIXI.loader.resources.atlas["textures"]["Logo.png"]);
_st.addChild(logo);
logo.width = this.STAGE_WIDTH;
logo.height = logo.height*logo.scale.x;

var spin = new PIXI.Sprite(PIXI.loader.resources.spin.texture);
spin.x = this.STAGE_WIDTH/2;
spin.y = this.STAGE_HEIGHT - spin.height*0.5 - 13;
spin.anchor.set(0.5);
_st.addChild(spin);
spin.interactive = true;
spin.buttonMode = true;

var symbols = new PIXI.Container();
_st.addChild(symbols);

function toss() {

eraseToss();

for(var i=0; i <5; i++) {
var n = Math.ceil(Math.random()*12);
var r = 'symbol'+n+'.png';

var s = new PIXI.Sprite(PIXI.loader.resources.atlas["textures"][r]);
s.scale.x = 0.65;
s.scale.y = s.scale.x;
s.dscale = s.scale;
s.anchor.set(0.5);
s.x = 160 + (i * 120);
s.y = 185;
symbols.addChild(s);

TweenLite.from(s.scale, 0.5, {y:-s.dscale, x:-s.dscale});

TweenLite.from(s.scale, 0.5, {y:0, x:0});

}

TweenLite.from(spin, 1, {rotation:-Math.PI * 2 * 1},"spin+=2");

}

function eraseToss() {

console.log(symbols.children.length)

/* for(var i=0; i < 4; i++) {
symbols.removeChildAt(1);
}*/

}

function scorePage() {
//

_st.addChild(bg2);
var r = new PIXI.Text('YOU WON',style);
r.x = this.STAGE_WIDTH/2;
r.y = -50;
r.anchor.set(0.5,0.5);
stage.addChild(richText);
}


spin.on('pointerdown', function() {
console.log('so cold here');
toss();
});



//_st.addChild(addSprite("bigwin-screen.jpg"));

toss();

}




/**
*Class Game
*/
function Game(){
this.SW=800; // Stage Width
this.SH=480; // Stage Height
this.stage;
this._rs = PIXI.loader.resources;
}
/**
*Function called after the load of the images assets
*Can be emptied (or should ?) before starting the test
*/

/* So what people saying
- don't use the prototype to store static values
*/

Game.prototype.setup = function(){

console.log('Game.prototype.setup');

var _st = this.stage;
var _SW = this.SW;
var _SH = this.SH;



/* loading textures from sprite sheet, get names from _frameKeys
_rs.atlas.spritesheet._frameKeys:
["Logo.png", "Overlay-FreeSpins.png", "Overlay.png", "bigwin-screen.jpg", "blackbg.png", "symbol1.png", "symbol10.png", "symbol11.png", "symbol12.png", "symbol2.png", "symbol3.png", "symbol4.png", "symbol5.png", "symbol6.png", "symbol7.png", "symbol8.png", "symbol9.png"] */


// game play scene
var sc1 = new PIXI.Container();
_st.addChild(sc1);
sc1.alpha = 0;

// score scene
var sc2 = new PIXI.Container();
_st.addChild(sc2);


this.addScene = function() {

var bg1 = utils.addAtlasSprite("bigwin-screen.jpg");
bg1.name = 'bg1';
utils.scaleToStageH(bg1,_SW,_SH);
bg1.y = bg1.height*.5;
bg1.x = bg1.width*.5;
bg1.nscale = bg1.scale;
bg1.anchor.set(0.5);

var overlay1 = utils.addAtlasSprite("Overlay-FreeSpins.png");
overlay1.name = "overlay1";
utils.scaleToStageW(overlay1,_SW);
overlay1.y = 60;

var overlay2 = utils.addAtlasSprite("Overlay.png");
overlay2.name = "overlay2";
utils.scaleToStageW(overlay2,_SW);
overlay2.scale.y = -1;
overlay2.y = 420;

var logo = utils.addAtlasSprite("Logo.png");
utils.scaleToStageW(logo,_SW)

// container for stage graphics

var spin = new PIXI.Sprite(this._rs.spin.texture);
spin.name = 'spin';
spin.x = _SW/2;
spin.y = this.SH - spin.height*0.5 - 13;
spin.scale.set(0.85)
spin.anchor.set(0.5);
spin.interactive = true;
spin.buttonMode = true;

/* set the order of sprites*/
sc1.addChild(bg1);
sc1.addChild(overlay1);
sc1.addChild(overlay2);
sc1.addChild(logo);
sc1.addChild(spin);

// music
var music = utils.getSound('music');
music.volume = 0.35;
if(music.isPlaying == false) {
//music.play();
}

spin.on('pointerdown', function() {
var tl = new TimelineMax();
var rsp = utils.rnd(0.06) - utils.rnd(0.06);
console.log(bg1.scale)
console.log(rsp)
tl.from(spin, 2, {rotation:-Math.PI * 2 * 5,ease: Elastic.easeOut.config(1, 1)},"+=0");
tl.to(bg1.scale, 1, {x:0.8+rsp,y:0.8+rsp, ease: Elastic.easeOut.config(1, 1)},"-=2");

var g = utils.getSound('sound1');
g.volume = 0.5;
g.play();


music.volume = 0.2;
if(music.isPlaying == false) {
music.play();
}

//tl.to(bg1.scale, 1, {x:1,y:1, ease: Elastic.easeOut.config(1, 1)},"-=1")
});

var tl = new TimelineMax();
tl.to(sc1, 0.2, {alpha:1},"+=0.1")
tl.from(logo, 0.7, {y:-100},"-=0.1")
tl.from(spin.scale, 1, {x:0,y:0, ease: Elastic.easeOut.config(1, 0.3)},"-=0.4")

//tl.from(spin, 0.2, {alpha:0},"+=0.1");

}

this.showScore = function() {

var blurf1 = new PIXI.filters.BlurFilter();
blurf1.blur = 0;
sc1.filters = [blurf1];

// show choosen symbol
var award = utils.addAtlasSprite("symbol2.png");
award.anchor.set(0.5);
award.x = _SW*.5;
award.y = _SH*.5;

sc2.addChild(award);

var tl = new TimelineMax();

//console.log(sc1);
var c1 = sc1;
var spin = utils.getSpriteByName(c1,"spin");
spin.interactive = false;
tl.to(spin,0.4, {alpha:0},"+=0");
tl.to(utils.getSpriteByName(c1,"overlay1"),0.4, {alpha:0},"-=0.4")
tl.to(utils.getSpriteByName(c1,"overlay2"),0.4, {alpha:0},"-=0.4")

//tl.to(blurf1, 0.2, {blur:5},"+=0.0");
tl.from(award.scale, 1, {x:0,y:0, ease: Elastic.easeOut.config(1, 0.3)},"-=0.7")

}

this.addScene();


/*
function toss() {
eraseToss();
for(var i=0; i <5; i++) {
var n = Math.ceil(Math.random()*12);
var r = 'symbol'+n+'.png';
var s = new PIXI.Sprite(_rs.atlas["textures"][r]);
s.scale.x = 0.65;
s.scale.y = s.scale.x;
s.dscale = s.scale;
s.anchor.set(0.5);
s.x = 160 + (i * 120);
s.y = 185;
symbols.addChild(s);
TweenLite.from(s.scale, 0.5, {y:-s.dscale, x:-s.dscale});
TweenLite.from(s.scale, 0.5, {y:0, x:0});
}
TweenLite.from(spin, 1, {rotation:-Math.PI * 2 * 1},"spin+=2");
}
function eraseToss() {
console.log(symbols.children.length)
/* for(var i=0; i < 4; i++) {
symbols.removeChildAt(1);
}
}
function scorePage() {
//
_st.addChild(bg2);
var r = new PIXI.Text('YOU WON',style);
r.x = _SW/2;
r.y = -50;
r.anchor.set(0.5,0.5);
stage.addChild(richText);
}
spin.on('pointerdown', function() {
console.log('so cold here');
createjs.Sound.play('sound3')
toss();
});
//_st.addChild(addSprite("bigwin-screen.jpg"));
toss();*/



//music.play();




}




67 src/src/LoadStage.js
View file
@@ -1,23 +1,44 @@
var type = "WebGL"
if(!PIXI.utils.isWebGLSupported()){
type = "canvas"
}
PIXI.utils.sayHello(type)

//Instantiate the Game Class
var game=new Game();

//create the PIXI application
var renderer = new PIXI.Application(game.STAGE_WIDTH, game.STAGE_HEIGHT);
document.body.appendChild(renderer.view);
game.stage=renderer.stage;

//load of the spritesheet and image
PIXI.loader
.add("spin", "./assets/img/spin.png")
.add("atlas", "./assets/img/atlas.json")
.load(game.setup.bind(game));




var utils = new Utils();
var aext = utils.ifmp3();

var game = new Game();
var styles = new Styles();


var renderer = new PIXI.Application(800, 480, {
forceCanvas: false,
backgroundColor: 0x000033
});

document.getElementById('gameContainer').appendChild(renderer.view);

game.stage = renderer.stage;

// load textures and audio
PIXI.loader
.add("music", "./assets/audio/05-Binrpilot-Underground"+aext)
.add("sound1", "./assets/audio/ToneWobble"+aext)
.add("sound2", "./assets/audio/S-Damage"+aext)
.add("sound3", "./assets/audio/Thunder1"+aext)
.add("death", "./assets/audio/Game-Death"+aext)
.add("spin", "./assets/img/spin.png")
.add("atlas", "./assets/img/atlas.json")
.load(
game.setup.bind(game)
)
.on('progress', function (e) {
//console.log('PIXI.loader: progress: ', e.progress);
var perc = e.progress / 100;
var preloader = document.getElementById("preloader");
preloader.style.width = perc * window.innerWidth + 'px';
if (e.progress >= 100) { //console.log('PIXI.loader.resources.atlas.spritesheet._frameKeys:', PIXI.loader.resources.atlas.spritesheet._frameKeys);
TweenLite.to(preloader, 0.4, {
opacity: 0
});
}
})
.on('complete', function (e) {
console.log('PIXI.loader: complete');
});


9 src/src/Styles.js
View file
@@ -0,0 +1,9 @@
/**
*Class Styles
*/
function Styles() {

}



76 src/src/Utils.js
View file
@@ -0,0 +1,76 @@
/**
*Class Utils
*/
function Utils() {
this._rs = PIXI.loader.resources;
}

Utils.prototype.ifmp3 = function () {
var a = document.createElement('audio');
var r = !!(a.canPlayType && a.canPlayType('audio/mpeg;').replace(/no/, ''));
var f;
if (r == true) {
f = '.mp3';
} else {
f = 'ogg';
}
return f;
}

Utils.prototype.scaleToStageW = function (r, w) {
r.width = w;
r.scale.y = r.scale.x;
}

// some simple methods
Utils.prototype.addAtlasSprite = function (id) {
var r = new PIXI.Sprite(this._rs.atlas["textures"][id]);
console.log(id, r.width, 'x', r.height);
return r;
}

Utils.prototype.scaleToStageH = function (r, w, h) {
r.height = h;
r.width = w;//r.scale.x = r.scale.y;
}

Utils.prototype.stopMusic = function () {

}

Utils.prototype.getSound = function (id) {
var r = this._rs[id].sound;
return r;
}

Utils.prototype.playMusic = function () {
var music1 = this._rs.music.sound;
music1.play();
TweenLite.from(music1, 3, {
volume: 0
})
}

Utils.prototype.rnd = function (v) {
var r = Math.random()*v;
return r;
}

Utils.prototype.getSpriteByName = function(c,n) {
var k = c.children.length;
var i = 0;
while(--k) {
i++
var r = c.getChildAt(k);
var p;
if (r.name == n) {
p = k
}
}
return c.getChildAt(p);
}





5 src/src/_notes/dwsync.xml
View file
@@ -0,0 +1,5 @@
<?xml version="1.0" encoding="utf-8" ?>
<dwsync>
<file name="Game.js" server="flaboy.com//var/www/mielniczuk.com/public/" local="131518507607138331" remote="131518509210000000" Dst="2" />
<file name="LoadStage.js" server="flaboy.com//var/www/mielniczuk.com/public/" local="131518524249140550" remote="131518524310000000" Dst="2" />
</dwsync>