var stage = new createjs.StageGL("canvas"),
bg,
avatar = new createjs.Container().set({regX: 200, regY: 320, x: 400, y: 400}),
w, h,
chris,
eye, eye2, r=10, pupil, pupil2,
glasses, eyebrows, mouth, mouth2,
beer = new createjs.Container().set({x:100, y:400, scale:0.5}),
starburst,
textBubble, text, bubble,
blindTarget = new createjs.Point(),
sound,
popInterval = setInterval(pop, 4000);
var queue = new createjs.LoadQueue(false, "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1524180/", true);
queue.on("complete", handleComplete);
queue.loadManifest([
{src: "ck-chrisk.png", id: "chris"},
{src: "ck-bubble.png", id: "bubble"},
{src: "ck-bar.jpg", id: "bar"},
{src: "https://fonts.googleapis.com/css?family=Press+Start+2P", type: "fontcss"}
]);
var queue2 = new createjs.LoadQueue(null, "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1524180/", true);
queue2.on("complete", handleSoundComplete);
queue2.installPlugin(createjs.Sound);
setTimeout(function() {
queue2.loadManifest([
{src: "ck-music.mp3", id: "music"},
{src: "ck-ohyeah.mp3", id: "ohyeah"}
]);
},3000)
function handleComplete(event) {
var res = queue.getResult.bind(queue);
var ss = new createjs.SpriteSheet({
"images": [ res("chris") ],
"framerate": 20,
"frames": [
[1, 1, 226, 506, 0, -87, -63],
[229, 1, 246, 262, 0, -7, -7],
[477, 1, 32, 16, 0, 0, 0],
[477, 19, 26, 25, 0, -1, -1],
[229, 265, 128, 40, 0, 0, 0],
[359, 265, 88, 8, 0, 0, 0],
[449, 265, 40, 24, 0, 0, 0]
],
"animations": {
"chris": { "frames": [0] },
"beer": { "frames": [1] },
"mouth": { "frames": [2] },
"pupil": { "frames": [3] },
"glasses": { "frames": [4] },
"eyebrows": { "frames": [5] },
"mouth2": { "frames": [6] }
}
});
bg = new createjs.Bitmap(res("bar"));
chris = new createjs.Sprite(ss, "chris").set({shadow:new createjs.Shadow("#000", 0, 2, 20)});
eye = new createjs.Container().set({x:225, y:151, x2:225, y2:151, broken:false, name:"eye1"});
eye2 = new createjs.Container().set({x:282, y:151, x2:282, y2:151, broken:false, name:"eye2"});
pupil = eye.addChild(new createjs.Sprite(ss, "pupil")
.set({regX:14,regY:14, active:false, y:r}));
pupil2 = eye2.addChild(pupil.clone().set({active:false}));
glasses = new createjs.Sprite(ss, "glasses")
.set({x:176, y:135, x2:176, y2:135, broken:false, name:"glasses", cursor:"pointer", shadow:new createjs.Shadow("#f99",0,0,0)});
eyebrows = new createjs.Sprite(ss, "eyebrows")
.set({regX:-208, regY:-126});
mouth = new createjs.Sprite(ss, "mouth")
.set({x:248, y:204, regY:12, regX:16, scaleY:-1, visible:true});
mouth2 = new createjs.Sprite(ss, "mouth2")
.set({x:232, y:192, visible:false});
textBubble = avatar.addChild(new createjs.Container().set({x:140, y:100, x2:140, y2:100, alpha:0, shadow:chris.shadow}));
bubble = new createjs.ScaleBitmap(res("bubble"), new createjs.Rectangle(28, 28, 28, 44));
text = new createjs.Text("GET BEER", "20px 'Press Start 2P'", "#000").set({x:33, y:20, lineWidth:200, textAlign:"center"});
textBubble.addChild(bubble, text);
avatar.addChild(chris, eye, eye2, glasses, eyebrows, mouth, mouth2, textBubble);
var beerImage = new createjs.Sprite(ss, "beer").set({regX:130, regY:138, shadow:chris.shadow, cursor:"pointer"});
starburst = starburst(new createjs.Shape(new createjs.Graphics().rf(["#fff", "rgba(255,255,255,0)"], [0,1], 0,0,0, 0,0,200)).set({scale:0.9, compositeOperation:"screen"}), 300, 12);
starburst.cache(-300,-300,600,600);
beer.addChild(starburst, beerImage);
stage.addChild(bg, avatar, beer);
var b = glasses.getBounds();
glasses.hitArea = new createjs.Shape(new createjs.Graphics().f("red").dr(0, 0, b.width, b.height));
saySomething(introTexts);
checkBeer();
updateBG();
createjs.Ticker.on("tick", function(e) {
follow();
starburst.rotation += 0.2;
stage.update(e);
});
LabTemplate.loadComplete();
}
function handleSoundComplete(e) {
var instance = createjs.Sound.play("music", {loop:-1, loops:-1, volume:0});
createjs.Tween.get(instance).to({volume:1}, 5000);
}
createjs.Ticker.timingMode = "raf";
stage.enableMouseOver();
stage.setClearColor("black");
stage.on("resize", handleResize);
function handleResize(e) {
var size = e.size;
avatar.x = size.width/2 + 100;
avatar.y = Math.max(320+30, size.height-300);
beer.x *= e.size.width / e.oldSize.width;
beer.y *= e.size.height / e.oldSize.height;
stage.updateViewport(size.width, size.height);
if (queue.progress == 1) {
checkBeer();
updateBG();
}
};
function updateBG() {
var b = bg.getBounds();
var s = Math.max(stage.canvas.width/b.width, stage.canvas.height/b.height);
bg.scale = s;
bg.x = stage.canvas.width - b.width*s >> 1;
bg.y = stage.canvas.height - b.height*s;
}
beer.on("mousedown", function(e) {
beer.offset = new createjs.Point(beer.x-stage.mouseX, beer.y-stage.mouseY);
createjs.Tween.get(beer).to({scale:0.6}, 300, createjs.elasticOut);
});
beer.on("pressmove", function(e) {
beer.x = e.stageX + beer.offset.x;
beer.y = e.stageY + beer.offset.y;
checkBeer();
});
function checkBeer() {
var p = eye.globalToLocal(beer.x, beer.y),
dif = Math.sqrt(p.x*p.x + p.y*p.y);
var scale = mouth.scaleY,
dist = Math.min(stage.canvas.width/3, 300);
mouth.scaleY = (dif < dist) ? 1 : -1;
if (mouth.scaleY != scale) {
if (mouth.scaleY == 1) {
if (sound == null || sound.playState != "playSucceeded") {
sound = createjs.Sound.play("ohyeah", {volume:0.7});
saySomething(["Oh Yeah!"]);
}
pop();
} else {
if (sound !== null && sound.playState == "playSucceeded") {
createjs.Tween.get(sound).to({volume:0}, 500);
sound = null;
}
saySomething(takeAwayTexts);
}
}
};
beer.on("pressup", function(e) {
createjs.Tween.get(beer).to({scale:0.5}, 300, createjs.elasticOut);
});
function follow(e) {
var followX = stage.mouseX, followY = stage.mouseY,
followDistance = Math.min(stage.canvas.width/2, 400);
if (mouth.scaleY == 1) {
followX = beer.x;
followY = beer.y;
}
if (glasses.broken || (idle && mouth.scaleY == -1)) {
followX = blindTarget.x;
followY = blindTarget.y;
followDistance = 10000;
}
var p = eye.globalToLocal(followX, followY),
a = Math.atan2(p.y, p.x),
dist = Math.sqrt(p.x*p.x + p.y*p.y);
if (eye.broken) {
} else if (dist > followDistance) {
if (pupil.active) {
createjs.Tween.get(pupil, {override: true}).to({x: 0, y: r}, 400, createjs.Ease.bounceOut);
}
pupil.active = false;
} else {
pupil.active = true;
createjs.Tween.removeTweens(pupil);
dist = Math.min(r, dist);
pupil.x = Math.cos(a) * dist;
pupil.y = Math.sin(a) * dist;
}
if (glasses.broken) {
followX = blindTarget.x2;
followY = blindTarget.y2;
}
p = eye2.globalToLocal(followX, followY),
a = Math.atan2(p.y, p.x),
dist = Math.sqrt(p.x*p.x + p.y*p.y);
if (eye2.broken) {
} else if (dist > followDistance) {
if (pupil2.active) {
createjs.Tween.get(pupil2, {override: true}).to({x: 0, y: r}, 400, createjs.Ease.bounceOut);
}
pupil2.active = false;
} else {
pupil2.active = true;
createjs.Tween.removeTweens(pupil2);
dist = Math.min(r, dist);
pupil2.x = Math.cos(a) * dist;
pupil2.y = Math.sin(a) * dist;
}
eye.addEventListener("click", breakEye);
eye2.addEventListener("click", breakEye);
glasses.addEventListener("click", breakEye);
}
function starburst(s, radius, rays) {
var seg = 360 / (rays*2) * Math.PI/180;
var g = s.graphics;
for (var i=0; i<rays; i++) {
var a = i*2 * seg;
g.mt(0,0)
.lt(Math.cos(a)*radius, Math.sin(a)*radius)
.lt(Math.cos(a+seg)*radius, Math.sin(a+seg)*radius)
.lt(0,0);
}
return s;
}
stage.on("stagemousedown", clearIdle);
stage.on("stagemousemove", clearIdle);
var idleTimeout, idle = true;
function clearIdle(e) {
clearTimeout(idleTimeout);
idle = false;
idleTimeout = setTimeout(function () {
idle = true;
}, 6000);
};
stage.on("stagemousedown", pop);
function pop() {
if (eye2.broken || eye.broken) { return; } // Surprised
if (mouth.scaleY == -1) { return; } // Sad
clearInterval(popInterval);
popInterval = setInterval(pop, 4000);
createjs.Tween.get(eyebrows)
.to({y:-10}, 100, createjs.Ease.quadOut)
.to({y:0}, 100, createjs.Ease.quadIn)
.to({y:-10}, 100, createjs.Ease.quadOut)
.to({y:0}, 100, createjs.Ease.quadIn);
}
function breakEye(e) {
var clip = e.currentTarget;
clip.broken = !clip.broken;
if (!clip.broken && clip == glasses) {
// Put back
createjs.Tween.get(clip, {override: true})
.to({alpha: 0}, 200)
.to({x: clip.x2, y: clip.y2})
.wait(100)
.to({alpha: 1}, 200);
saySomething(restoredSightTexts);
createjs.Tween.get(clip.shadow).wait(300).to({blur:0, offsetY:0}, 200, createjs.Ease.quadIn);
} else if (clip.broken) {
var tween = createjs.Tween.get(clip).to({y: 570 - r}, 700, createjs.Ease.bounceOut);
if (clip != glasses) {
tween.wait(2000)
.to({alpha: 0}, 300)
.to({x: clip.x2, y: clip.y2})
.set({broken: false})
.call(updateMouth)
.to({alpha: 1}, 300);
saySomething(eyeTexts);
} else {
createjs.Tween.get(clip.shadow).to({blur:10, offsetY:2}, 500, createjs.Ease.quadIn);
saySomething(glassesTexts);
}
}
updateMouth();
}
function updateMouth() {
mouth2.visible = (eye.broken || eye2.broken);
mouth.visible = !mouth2.visible;
}
var happyTexts = ["That's the stuff", "Guess I will stick around", "Pixels taste so good.", "that's going on instagram",
"I'm Rusty", "happy g-birthday to me", "Beauty!", "mmm. Is this organic?"],
sadTexts = ["Beer motivates me to work", "It's been 2 years, you know.", "#sadchris", "@#$%^!",
"Bring me that beer!", "...", "Just a little closer..."],
blindTexts = ["I can't tell what you're doing", "Who said that?", "I needed those glasses to work!",
"good thing I still have this beard", "@#$%^!", "Definitely don't touch my eyeball",
"how will I tell the difference between an IPA and a Lager?", "My twitter followers will hear about this"],
eyeTexts = ["What the hell?", "J'accuse!", "Gross!", "how rude!", "Hey, I need that to see", "dude!", "You gonna eat that?"],
glassesTexts = ["I can't see!", "my identity!", "my street cred!", "hey! I need those to drink!", "my beer goggles!", "help! Police!"],
restoredSightTexts = ["That's better!", "I'm beautiful again!"],
takeAwayTexts = ["Awww...", "@#$%^!", "Actually?", "Woof."],
introTexts = ["Chris want Beer!", "So Thirsty", "Please commence with the drinking", "I want all the things"];
var closeTimeout, openTimeout;
function saySomething(defaultTexts) {
var texts = defaultTexts || (mouth.scaleY == -1 ? sadTexts : happyTexts);
if (glasses.broken) { texts = defaultTexts || blindTexts; }
var actualText = texts[Math.random() * texts.length | 0];
text.text = actualText.toUpperCase();
var b = text.getBounds(),
bw = b.width/2;
text.x = 33 + bw;
bubble.setDrawSize(text.x + b.width - bw + 36, text.y + Math.max(28, b.height) + 36);
textBubble.regX = text.x + b.width - bw; textBubble.regY = text.y + b.height;
textBubble.cache(0,0,text.x + b.width -bw + 36,text.y + b.height + 50);
createjs.Tween.get(textBubble).to({y:textBubble.y2+10})
.to({alpha:1, y:textBubble.y2}, 900, createjs.Ease.elasticOut);
clearTimeout(closeTimeout);
clearTimeout(openTimeout);
closeTimeout = setTimeout(closeText, 5000);
}
function closeText() {
createjs.Tween.get(textBubble).to({alpha:0, y:textBubble.y2-10}, 200).to({y:textBubble.y2});;
clearTimeout(openTimeout);
openTimeout = setTimeout(saySomething, 3500);
}
function moveBlindTarget() {
var w = stage.canvas.width, h = eye ? eye.y*2 : stage.canvas.height;
createjs.Tween.get(blindTarget).to({
x: Math.random()*w, y:Math.random()*h,
x2:Math.random()*w, y2:Math.random()*h}, Math.random()*200+200, glasses && glasses.broken ? createjs.Ease.bounceOut: createjs.Ease.quadInOut);
setTimeout(moveBlindTarget, Math.random() * 2000 + 1000);
}
moveBlindTarget();
LabTemplate.setupStageResize(stage);
!
