@mixin bubble_shape ($width: 4px) {
border-radius: 50%;
position: absolute;
background-color: rgba(0, 0, 0, 0.12);
border-color: rgba(0, 0, 0, 0.12);
border-width: $width;
}
@mixin bubble ($size, $top, $left) {
height: $size;
width: $size;
top: $top;
left: $left;
}
@mixin bubble_hollow ($size, $top, $left) {
@include bubble ($size, $top, $left);
background-color: transparent;
border-style: solid;
}
@mixin triangle ($height, $width, $top, $left) {
border-left: ($height/2) solid transparent;
border-right: ($height/2) solid transparent;
border-bottom: $width solid rgba(0, 0, 0, 0.12);
background-color: transparent;
left: $left;
top: $top;
}
@mixin triangle_hollow ($height, $width, $top, $left) {
@include triangle( $height, $width, $top, $left );
&:after {
content: " ";
display: block;
position: absolute;
border-left: ($height/4-1) solid transparent;
border-right: ($height/4-1) solid transparent;
border-bottom: ($height/2-3) solid transparent;
top: 6px;
left: -($width/4);
transition: border-bottom-color 0.4s ease;
.red & {
border-bottom-color: #fc5c82;
}
.yellow & {
border-bottom-color: #fcd45c;
}
.purple & {
border-bottom-color: #9174f5;
}
}
}
@mixin block ($height, $width, $top, $left) {
height: $height;
width: $width;
top: $top;
left: $left;
}
@mixin block_hollow ($height, $width, $top, $left) {
@include block ($height, $width, $top, $left);
& .inner {
background-color: transparent !important;
border-style: solid;
box-sizing: border-box;
}
}
.bubble {
@include bubble_shape;
}
.bubble-1 {
@include bubble(15px, 21px, 59px);
}
.bubble-2 {
@include bubble(27px, 36px, 16px);
}
.bubble-3 {
@include bubble(21px, 63px, 49px);
}
.bubble-4 {
@include bubble(15px, 98px, 37px);
}
.bubble-5 {
@include bubble_hollow(5px, 116px, 20px);
}
.bubble-6 {
@include bubble(6px, 128px, 63px);
}
.bubble-7 {
@include bubble(27px, 150px, 52px);
}
.bubble-8 {
@include bubble(19px, 154px, 18px);
}
.bubble-9 {
@include bubble(10px, 189px, 13px);
}
.bubble-10 {
@include bubble_hollow(5px, 199px, 52px);
}
.bubble-11 {
@include bubble(21px, 220px, 29px);
}
.bubble-12 {
@include bubble(21px, 263px, 48px);
}
.bubble-13 {
@include bubble_hollow(5px, 275px, 16px);
}
.bubble-14 {
@include bubble(15px, 296px, 34px);
}
.triangle {
position: absolute;
background-color: rgba(0, 0, 0, 0.12);
border-color: rgba(0, 0, 0, 0.12);
}
.triangle-1 {
@include bubble_shape;
@include bubble(10px, 22px, 55px);
}
.triangle-2 {
@include triangle_hollow(16px, 14px, 27px, 15px);
}
.triangle-3 {
@include triangle_hollow(24px, 19px, 60px, 43px);
}
.triangle-4 {
@include bubble_shape(3px);
@include bubble_hollow(8px, 61px, 17px);
}
.triangle-5 {
@include triangle(10px, 8px, 101px, 25px);
transform: rotate(180deg);
}
.triangle-6 {
@include triangle(8px, 6px, 103px, 60px);
transform: rotate(-90deg);
}
.triangle-7 {
@include triangle(25px, 19px, 126px, 17px);
transform: rotate(180deg);
}
.triangle-8 {
@include triangle(21px, 16px, 149px, 50px);
}
.triangle-9 {
@include triangle(11px, 8px, 177px, 21px);
}
.triangle-10 {
@include bubble_shape;
@include bubble(10px, 177px, 60px);
}
.triangle-11 {
@include triangle(18px, 13px, 213px, 33px);
transform: rotate(180deg);
}
.triangle-12 {
@include bubble_shape(2px);
@include bubble_hollow(10px, 233px, 65px);
}
.triangle-13 {
@include bubble_shape;
@include bubble(10px, 250px, 22px);
}
.triangle-14 {
@include triangle_hollow(16px, 14px, 270px, 45px);
transform: rotate(180deg);
}
.stick {
.block {
position: absolute;
overflow: hidden;
z-index: 999;
border-radius: 7px;
.inner {
border-radius: 7px;
background-color: rgba(0, 0, 0, 0.12);
border-color: rgba(0, 0, 0, 0.12);
border-width: 3px;
height: 100%;
width: 100%;
position: absolute;
}
&:nth-child(2n+1) .inner-2 {
left: -200%;
}
&:nth-child(2n+2) .inner-2 {
left: 200%;
}
}
.block-1 {
@include block_hollow(16px, 31px, 16px, 30px);
}
.block-2 {
@include block(14px, 42px, 50px, 15px);
}
.block-3 {
@include block(18px, 9px, 73px, 64px);
}
.block-4 {
@include block(9px, 14px, 84px, 26px);
}
.block-5 {
@include block(15px, 15px, 109px, 45px);
.inner {
border-radius: 50%;
}
}
.block-6 {
@include block(9px, 27px, 135px, 19px);
}
.block-7 {
@include block(12px, 12px, 144px, 60px);
.inner {
border-radius: 50%;
border-style: solid;
box-sizing: border-box;
background-color: transparent;
}
}
.block-8 {
@include block(27px, 14px, 164px, 24px);
}
.block-9 {
@include block(8px, 8px, 188px, 64px);
}
.block-10 {
@include block_hollow(12px, 22px, 219px, 11px);
}
.block-11 {
@include block(22px, 22px, 226px, 50px);
.inner {
border-radius: 50%;
}
}
.block-12 {
@include block(18px, 9px, 248px, 26px);
}
.block-13 {
@include block(8px, 8px, 278px, 50px);
.inner {
border-radius: 50%;
}
}
.block-14 {
@include block_hollow(12px, 22px, 297px, 18px);
}
.block-15 {
@include block(9px, 27px, 307px, 48px);
}
}
body {
background-color: #28DAD4;
margin: 0;
padding: 0;
overflow: hidden;
font-family: 'Roboto', sans-serif;
}
a {
cursor: url(https://greghub.github.io/coloron/public/svg/cursor.svg), pointer;
&:focus, &:active {
cursor: url(https://greghub.github.io/coloron/public/svg/cursor-tap.svg), pointer;
}
}
.container {
position: fixed;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.waves, .mounts {
position: absolute;
width: 100%;
left: 0;
bottom: 0;
}
.waves div, .mounts div {
position: absolute;
width: 100%;
}
.clouds {
position: absolute;
width: 100%;
left: 0;
top: 77px;
height: 151px;
background: url(https://greghub.github.io/coloron/public/svg/clouds.svg) repeat-x;
background-position-x: 170px;
}
.top_wave {
background: url(https://greghub.github.io/coloron/public/svg/top_wave.png) repeat-x 0 -1px;
height: 35px;
bottom: 0;
z-index: 10001;
}
.wave1 {
background: url(https://greghub.github.io/coloron/public/svg/wave1.svg) repeat-x;
height: 150px;
bottom: 0;
z-index: 23;
}
.wave2 {
background: url(https://greghub.github.io/coloron/public/svg/wave2.svg) repeat-x;
height: 180px;
bottom: 30px;
z-index: 22;
}
.wave3 {
background: url(https://greghub.github.io/coloron/public/svg/wave3.svg) repeat-x;
height: 180px;
bottom: 90px;
z-index: 21;
}
.wave4 {
background: url(https://greghub.github.io/coloron/public/svg/wave4.svg) repeat-x;
height: 180px;
bottom: 120px;
z-index: 20;
}
.mount1 {
background: url(https://greghub.github.io/coloron/public/svg/mount1.svg) repeat-x;
height: 150px;
bottom: 280px;
z-index: 11;
}
.mount2 {
background: url(https://greghub.github.io/coloron/public/svg/mount2.svg) repeat-x;
height: 150px;
bottom: 290px;
z-index: 10;
}
.noise {
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1010;
background: url(https://greghub.github.io/coloron/public/svg/noise.png);
}
.glow {
position: absolute;
left: -350px;
top: -350px;
width: 800px;
height: 800px;
background-color: rgba(81, 237, 200, 0.34);
border-radius: 50%;
box-shadow: 0 0 100px 100px rgba(81, 237, 200, 0.34);
z-index: 1010;
}
.sun {
position: relative;
left: 50%;
top: 50%;
width: 1px;
height: 1px;
background-color: rgba(255, 227, 69, 1);
border-radius: 50%;
box-shadow: 0 0 32px 32px rgba(255, 227, 69, 1),
0 0 150px 150px rgba(103, 244, 210, 0.4);
}
.small-glow {
z-index: 99;
width: 12px;
height: 12px;
border-radius: 50%;
position: absolute;
background-color: rgba(255, 255, 255, 0.34);
box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.34);
}
.small-glow.yellow {
background-color: rgba(255, 227, 69, 0.34);
box-shadow: 0 0 4px 4px rgba(255, 227, 69, 0.34);
}
.sticks {
z-index: 1011;
outline: none;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.stick {
height: 362px;
width: 90px;
border-radius: 14px;
background-image: url(https://greghub.github.io/coloron/public/svg/noise.png);
position: relative;
overflow: hidden;
float: left;
margin-right: 90px;
transition: background-color 0.4s ease;
cursor: url(https://greghub.github.io/coloron/public/svg/cursor.svg), pointer;
&:focus, &:active {
cursor: url(https://greghub.github.io/coloron/public/svg/cursor-tap.svg), pointer;
}
}
.stick.red {
background-color: #FF4571;
}
.stick.yellow {
background-color: #FFD145;
}
.stick.purple {
background-color: #8260F6;
}
.stick.inactive {
background-color: #4C4660;
}
.ball, .ball-demo {
background: url(https://greghub.github.io/coloron/public/svg/ball.svg) right bottom;
background-size: 64px 64px;
width: 53px;
height: 53px;
z-index: 1011;
background-color: #FF4571;
border-radius: 50%;
}
.ball {
margin-bottom: 250px;
}
.controls {
z-index: 999999;
position: relative
}
.game-full-flex {
position: fixed;
display: none; // gets updated to flex with JS
flex-direction: column;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 9998;
}
.start-game {
.start-game-top {
min-height: 20%;
.play-full-page {
display: none;
border: 3px solid #fff;
border-radius: 100px;
color: #fff;
width: 260px;
height: 50px;
font-size: 28px;
text-align: center;
font-weight: 900;
letter-spacing: -1px;
line-height: 52px;
text-decoration: none;
text-transform: uppercase;
margin-top: 24px;
&:hover {
opacity: 0.7;
}
}
}
.logo-holder {
width: 513px;
height: 162px;
background-color: #4C4660;
border: 4px solid #FF4571;
border-radius: 68px;
text-align: center;
margin-top: -10%;
.logo {
color: #fff;
text-transform: uppercase;
font-weight: 900;
font-size: 100px;
letter-spacing: -0.1em;
margin-top: 10px;
margin-bottom: 4px;
text-align: center;
span {
margin-left: -8px;
margin-right: -8px;
}
}
.play-button {
display: inline-block;
background-color: #FF4571;
border: 4px solid #fff;
border-radius: 100px;
color: #fff;
width: 200px;
height: 56px;
font-size: 42px;
text-align: center;
font-weight: 900;
letter-spacing: -3px;
line-height: 56px;
text-decoration: none;
&:hover {
background-color: lighten(#FF4571, 5%);
}
}
.hint {
color: #fff;
font-size: 20px;
span {
color: #FF4571;
}
}
}
.how-to-play {
display: flex;
justify-content: space-around;
width: 100%;
.section-1, .section-3 {
flex: 1;
.content {
justify-content: center;
}
}
h4 {
color: #fff;
font-weight: 400;
font-size: 22px;
text-align: center;
}
.content {
height: 200px;
position: relative;
display: flex;
justify-content: space-around;
}
.bar {
width: 60px;
border-radius: 7px;
margin-top: auto;
transition: background-color 0.4s ease;
&.bar-1 {
height: 180px;
background: #FF4571;
}
&.bar-2 {
height: 120px;
background: #FFD145;
}
&.bar-3 {
height: 150px;
background: #4C4660;
}
}
.section-2 {
.bar {
cursor: url(https://greghub.github.io/coloron/public/svg/cursor.svg), pointer;
&:focus, &:active {
cursor: url(https://greghub.github.io/coloron/public/svg/cursor-tap.svg), pointer;
}
}
}
.section-3 {
.ball-demo {
background-color: #815FF8;
}
.bar-1 {
height: 120px;
background-color: #815FF8;
}
}
}
}
.stop-game {
justify-content: center;
.score-container {
background-color: #4C4660;
width: 433px;
height: 386px;
border-radius: 38px;
text-align: center;
h1 {
color: #fff;
text-transform: uppercase;
letter-spacing: -0.1em;
margin-top: 20px;
margin-bottom: 4px;
font-size: 64px;
}
.final-score {
color: #FFE345;
font-weight: 900;
font-size: 130px;
letter-spacing: -6px;
line-height: 110px;
}
.result {
color: #FF4571;
text-transform: uppercase;
font-weight: 700;
font-size: 30px;
}
h4 {
color: #fff;
margin-top: 12px;
}
.tweet {
background: #fff;
padding: 8px 20px;
border-radius: 4px;
color: #55ACEE;
text-decoration: none;
font-size: 18px;
line-height: 24px;
display: inline-block;
&:hover {
background-color: #55ACEE;
color: #fff;
}
i {
font-size: 24px;
top: 2px;
right: 2px;
position: relative;
}
}
.play-again {
background-color: #FF4571;
border: 2px solid #fff;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: 900;
letter-spacing: -1px;
font-size: 26px;
padding: 6px 24px;
border-radius: 22px;
margin: 6px 4px;
display: inline-block;
&:hover {
background-color: lighten(#FF4571, 5%);
}
}
.main-menu {
background-color: #44BFA3;
border: 2px solid #fff;
color: #fff;
text-decoration: none;
text-transform: uppercase;
font-weight: 900;
letter-spacing: -1px;
font-size: 26px;
padding: 6px 24px;
border-radius: 22px;
margin: 6px 4px;
display: inline-block;
&:hover {
background-color: lighten(#44BFA3, 5%);
}
}
}
}
.scene {
display: flex;
flex-direction: column;
justify-content: space-between;
position: fixed;
z-index: 9997;
left: 0;
top: 0;
width: 100%;
height: 100%;
.ball-holder {
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-left: 558px;
}
.score {
position: fixed;
right: 54px;
top: 20px;
color: #33485F;
font-size: 90px;
font-weight: 900;
letter-spacing: -0.1em;
}
.learn-to-play {
z-index: 9999;
display: inline-block;
text-align: center;
position: relative;
top: 20%;
font-size: 48px;
color: rgba(255,255,255,0.85);
font-weight: 700;
letter-spacing: -2px;
opacity: 0;
}
}
.splash {
display: none;
}
@media print {
.splash {
display: block;
position: fixed;
z-index: 99999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #28DAD4;
background-image: url(https://greghub.github.io/coloron/public/images/coloron-image.png);
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
}
}
.nominee {
position: fixed;
right: 0;
top: 0;
z-index: 9999;
}
View Compiled
class Game {
constructor() {
this.score = 0;
this.isRunning = 0; // game is not running
this.calculateScale();
this.timeline = new TimelineMax({smoothChildTiming: true});
this.time = 1.6; // initial speed
this.colors = ["#FF4571", "#FFD145", "#8260F6"]; // the 3 colors used in the game
this.colorsRGBA = ["rgba(255, 69, 113, 1)", "rgba(255, 69, 113, 1)", "rgba(255, 69, 113, 1)"];
this.color = this.colors[0]; // the intial color of the ball
this.prevColor = null; // used as a holder to prevent ball colors from repeating
}
/**
* The game screen is scalable. I took 1200x800px as the initial scale.
* In order to display the game an many screen sizes properly
* I have to compare the player's sreen size to the initial scale,
* then scale the game using CSS Transform to fit the screen properly
* The function is called in the controller and anywhere where I need
* to recalculate the scale on screen resize or device rotation
*/
calculateScale() {
this.screen = $(window).width(); // screen width
this.screenHeight = $(window).height();
this.scale = (this.screen > this.screenHeight) ? this.screenHeight/800 : this.screen/1200;
this.stickWidth = 180*this.scale;
this.steps = this.screen/this.stickWidth; // how many steps (stick width + margin) it takes from one end to another
}
/**
* Creating as many sticks we need to fill the screen
* from start to end of the screen. The steps property is used for that
*/
generateSticks() {
let numberOfSticks = Math.ceil(this.steps);
for(let i = 0; i <= numberOfSticks; i++)
new Stick();
}
generateBall() {
this.balltween = new TimelineMax({repeat: -1, paused: 1});
$('.scene .ball-holder').append('<div class="ball red" id="ball"></div>');
this.bounce();
}
generateTweet() {
let top = $(window).height() / 2 - 150;
let left = $(window).width() / 2 - 300;
window.open("https://twitter.com/intent/tweet?url=https://codepen.io/gregh/full/yVLOyO&text=I scored "+ this.score +" points on Coloron! Can you beat my score?&via=greghvns&hashtags=coloron", "TweetWindow", "width=600px,height=300px,top=" + top + ",left=" + left);
}
/**
* The greeting when the game begins
*/
intro() {
TweenMax.killAll();
//TweenMax.to('.splash', 0.3, { opacity: 0, display: 'none', delay: 1 })
$('.stop-game').css('display', 'none');
$('.start-game').css('display', 'flex');
let introTl = new TimelineMax();
let ball = new TimelineMax({repeat: -1, delay: 3});
introTl
.fromTo('.start-game .logo-holder', 0.9, { opacity: 0 }, { opacity: 1 })
.staggerFromTo('.start-game .logo span', 0.5, { opacity: 0 }, { opacity: 1 }, 0.08)
.staggerFromTo('.start-game .bar', 1.6, { y: '+100%' }, { y: '0%', ease: Elastic.easeOut.config(1, 0.3) }, 0.08)
.staggerFromTo('.start-game .ball-demo', 1, { scale: 0 }, { scale: 1, ease: Elastic.easeOut.config(1, 0.3) }, 0.8, 2)
ball.fromTo('.start-game .section-1 .ball-demo', 0.5, { y: "0px" }, { y: "100px", scaleY: 1.1, transformOrigin: "bottom", ease: Power2.easeIn})
.to('.start-game .section-1 .ball-demo', 0.5, { y: "0px", scaleY: 1, transformOrigin: "bottom", ease: Power2.easeOut,
onStart: () => {
while(this.prevColor==this.color) {
this.color = (new Color).getRandomColor();
}
this.prevColor = this.color;
TweenMax.to('.start-game .section-1 .ball-demo', 0.5, {backgroundColor: this.color});
}
});
}
/**
* Display score
*/
showResult() {
let score = this.score;
$('.stop-game').css('display', 'flex');
$('.stop-game .final-score').text(score + '!');
$('.stop-game .result').text(this.showGrade(score));
$('.nominee').show();
let resultTimeline = new TimelineMax();
resultTimeline
.fromTo('.stop-game .score-container', 0.7, { opacity: 0, scale: 0.3 }, { opacity: 1, scale: 1, ease: Elastic.easeOut.config(1.25, 0.5)})
.fromTo('.stop-game .final-score', 2, { scale: 0.5 }, { scale: 1, ease: Elastic.easeOut.config(2, 0.5)}, 0)
.fromTo('.stop-game .result', 1, { scale: 0.5 }, { scale: 1, ease: Elastic.easeOut.config(1.5, 0.5)}, 0.3)
;
}
/**
* Takes players score and generates the cheering copy
* @param {int} score
* @return {string} grade
*/
showGrade(score) {
if(score > 30) return "Chuck Norris?";
else if(score > 25) return "You're da man";
else if(score > 20) return "Awesome";
else if(score > 15) return "Great!";
else if(score > 13) return "Nice!";
else if(score > 10) return "Good Job!";
else if(score > 5) return "Really?";
else return "Poor...";
}
start() {
this.stop(); // stop the game
$('.start-game, .stop-game').css('display', 'none'); // hide all the popups
$('.nominee').hide();
new Game();
this.score = 0; // reset
this.isRunning = 1;
// Clean up the stick and ball holders
// and generate new ones
$('#sticks, .scene .ball-holder').html('');
$('#score').text(this.score);
this.generateSticks();
this.generateBall();
// disables scene animations for Phones
if( !/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(window.navigator.userAgent) ) {
Animation.sceneAnimation();
}
this.moveToStart();
this.moveScene();
// reset timescale to normal as the game speeds up
this.timeline.timeScale(1);
this.balltween.timeScale(1);
}
stop() {
this.isRunning = 0;
$('.start-game, .stop-game').css('display', 'none');
$('#sticks, .scene .ball-holder, #score').html('');
TweenMax.killAll();
this.showResult();
}
scaleScreen() {
TweenMax.killAll(); // prevent multiple calls on resize
let height = $(window).height();
let width = $(window).width();
this.calculateScale();
$('.container')
.css('transform', 'scale(' + this.scale + ')')
.css('height', height/this.scale)
.css('width', width/this.scale)
.css('transformOrigin', 'left top');
$('#sticks').width(this.screen/this.scale + 3 * this.stickWidth/this.scale);
}
/**
* Calls the above function
* If the game is running it stops and shows the score
* If the game has stops it takes player to the main menu
*/
scaleScreenAndRun() {
this.scaleScreen();
if(this.isRunning) {
this.stop();
} else {
this.intro();
}
}
/**
* This is the initial animation
* where the sticks come to the starting position
* and the ball appears and falls down
*/
moveToStart() {
let tip = new TimelineMax({ delay: 2 });
tip
.fromTo('.learn-to-play', 1, { scale: 0 }, { scale: 1, opacity: 1, ease: Elastic.easeOut.config(1.25, 0.5) })
.to('.learn-to-play', 1, { scale: 0, opacity: 0, ease: Elastic.easeOut.config(1.25, 0.5) }, 3)
TweenMax.fromTo('#ball', this.time,
{
scale: 0
},
{
scale: 1,
delay: this.time * ((this.steps - 3) - 1.5),
onComplete: () => {
this.balltween.play();
}
});
this.timeline.add(
TweenMax.fromTo('#sticks', this.time * this.steps, { x: this.screen / this.scale }, { x: 0, ease: Power0.easeNone})
);
}
/**
* The animation that moves sticks
*/
moveScene() {
this.timeline.add(
TweenMax.to('#sticks', this.time, { x: '-=180px', ease: Power0.easeNone, repeat: -1, onRepeat: () => { this.rearrange() } })
);
}
/**
* removes the first stick and adds one the the end
* this gives the sticks an infinite movement
*/
rearrange() {
let scale = this.speedUp();
this.timeline.timeScale(scale);
this.balltween.timeScale(scale);
$('#sticks .stick').first().remove();
new Stick();
}
/**
* The game speeds up based on score
* The GSAP timeScale() function is called on the timeline to speed up the game
* This calculates how much shall the game speed up
*/
speedUp() {
if(this.score > 30) {
return 1.8;
}
if(this.score > 20) {
return 1.7;
}
if(this.score > 15) {
return 1.5;
}
else if(this.score > 12) {
return 1.4;
}
else if(this.score > 10) {
return 1.3;
}
else if(this.score > 8) {
return 1.2;
}
else if(this.score > 5) {
return 1.1;
}
return 1;
}
/**
* Ball bouncing animation
* It checks if the ball and stick colors match
* And changes the ball color
*/
bounce() {
this.balltween
.to('#ball', this.time/2, {y: '+=250px', scaleY: 0.7, transformOrigin: "bottom", ease: Power2.easeIn,
onComplete: () => {
this.checkColor();
}
}).to('#ball', this.time/2, {y: '-=250px', scaleY: 1.1, transformOrigin: "bottom", ease: Power2.easeOut,
onStart: () => {
while(this.prevColor==this.color) {
this.color = (new Color).getRandomColor();
}
this.prevColor = this.color;
TweenMax.to('#ball', 0.5, {backgroundColor: this.color});
$('#ball').removeClass('red')
.removeClass('yellow')
.removeClass('purple')
.addClass((new Color).colorcodeToName(this.color));
}
})
}
checkColor() {
let ballPos = $('#ball').offset().left + $('#ball').width()/2;
let stickWidth = $('.stick').width();
let score = this.score;
$('#sticks .stick').each(function(){
if($(this).offset().left < ballPos && $(this).offset().left > (ballPos - stickWidth)) {
if( Color.getColorFromClass($(this)) == Color.getColorFromClass('#ball') ) {
// if matches increase the score
score++;
$('#score').text(score);
TweenMax.fromTo('#score', 0.5, { scale: 1.5 }, { scale: 1, ease: Elastic.easeOut.config(1.5, 0.5) });
} else {
// you loose
game.stop();
}
}
})
this.score = score;
}
}
class Stick {
constructor() {
this.stick = this.addStick();
}
addStick() {
this.stick = $('#sticks').append('<div class="stick inactive"></div>');
return this.stick;
}
}
class Color {
constructor() {
this.colors = ["#FF4571", "#FFD145", "#8260F6"];
this.effects = ["bubble", "triangle", "block"];
this.prevEffect = null;
}
getRandomColor() {
let colorIndex = Math.random()*3;
let color = this.colors[Math.floor(colorIndex)];
return color;
}
colorcodeToName(color) {
let colors = ["#FF4571", "#FFD145", "#8260F6"];
let names = ["red", "yellow", "purple"];
let index = colors.indexOf(color);
if(index == -1) return false;
return names[index];
}
/**
* Changes the color of an element
* As we as adds verbal name of the color
*/
changeColor(el) {
let index = el.data("index");
if(index===undefined) { index = 0; }
else { index += 1; }
if(index==3) index = 0;
el
.css('background-color', this.colors[index])
.data('index', index);
el.removeClass('red')
.removeClass('yellow')
.removeClass('purple')
.addClass(this.colorcodeToName(this.colors[index]));
if(el.hasClass('inactive')) {
this.setEffect(el);
el.addClass('no-effect');
}
el.removeClass('inactive');
}
getRandomEffect() {
let effectIndex = null;
effectIndex = Math.floor(Math.random()*3);
while(effectIndex == this.prevEffect) {
effectIndex = Math.floor(Math.random()*3);
}
this.prevEffect = effectIndex;
return this.effects[effectIndex];
}
/**
* Adds the effect specific particles to the stick
*/
setEffect(el) {
let effect = this.getRandomEffect();
el.addClass(effect + '-stick');
for(let i = 1; i <= 14; i++) {
if(effect=='block') {
el.append(`<div class="${effect} ${effect}-${i}"><div class="inner"></div><div class="inner inner-2"></div></div>`);
} else {
el.append(`<div class="${effect} ${effect}-${i}"></div>`);
}
}
}
/**
* Since the ball and sticks have several classes
* This method searches for the color class
* @param el [DOM element]
* @return {string} class name
*/
static getColorFromClass(el) {
let classes = $(el).attr('class').split(/\s+/);
for (var i = 0, len = classes.length; i < len; i++) {
if(classes[i] == 'red' || classes[i] == 'yellow' || classes[i] == 'purple') {
return classes[i];
}
}
}
}
class Animation {
/**
* Creates and positions the small glow elements on the screen
*/
static generateSmallGlows(number) {
let h = $(window).height();
let w = $(window).width();
let scale = (w > h) ? h/800 : w/1200;
h = h/scale;
w = w/scale;
for(let i = 0; i < number; i++) {
let left = Math.floor(Math.random()*w);
let top = Math.floor(Math.random()*(h/2));
let size = Math.floor(Math.random()*8) + 4;
$('.small-glows').prepend('<div class="small-glow"></div>');
let noise = $('.small-glows .small-glow').first();
noise.css({left: left, top: top, height: size, width: size});
}
}
/**
* Creates the animations for sticks
* The effects is chosen by random
* And one of the three functions is
* Called accordingly
*/
playBubble(el) {
let bubble = new TimelineMax();
bubble.staggerFromTo(el.find('.bubble'), 0.3, {scale: 0.1}, {scale: 1}, 0.03)
bubble.staggerTo(el.find('.bubble'), 0.5, {y: '-=60px', yoyo: true, repeat: -1}, 0.03);
}
playTriangle(el) {
let triangle = new TimelineMax();
triangle.staggerFromTo(el.find('.triangle'), 0.3, {scale: 0.1}, {scale: 1}, 0.03)
.staggerTo(el.find('.triangle'), 1.5, {
cycle:{
rotationY: [0, 360],
rotationX: [360, 0],
},
repeat: -1,
repeatDelay: 0.1
}, 0.1);
}
playBlock(el) {
let block = new TimelineMax();
let block2 = new TimelineMax({delay: 0.69});
block.staggerFromTo(el.find('.block'), 0.3, {scale: 0.1}, {scale: 1}, 0.03)
.staggerTo(el.find('.block .inner:not(.inner-2)'), 1, {
cycle: {
x: ["+200%", "-200%"]
},
repeat: -1,
repeatDelay: 0.6,
}, 0.1);
block2.staggerTo(el.find('.block .inner-2'), 1, {
cycle: {
x: ["+200%", "-200%"]
},
repeat: -1,
repeatDelay: 0.6,
}, 0.1);
}
static sceneAnimation() {
const speed = 15; // uses it's local speed
// animates the small glows in a circular motion
$('.small-glow').each(function(){
let speedDelta = Math.floor(Math.random()*8);
let radius = Math.floor(Math.random()*20)+20;
TweenMax.to($(this), speed+speedDelta, {rotation: 360, transformOrigin: "-"+radius+"px -"+radius+"px", repeat: -1, ease: Power0.easeNone});
})
var wavet = TweenMax.to('.top_wave', speed*1.7/42, {backgroundPositionX: '-=54px', repeat: -1, ease: Power0.easeNone});
var wave1 = TweenMax.to('.wave1', speed*1.9/42, {backgroundPositionX: '-=54px', repeat: -1, ease: Power0.easeNone});
var wave2 = TweenMax.to('.wave2', speed*2/42, {backgroundPositionX: '-=54px', repeat: -1, ease: Power0.easeNone});
var wave3 = TweenMax.to('.wave3', speed*2.2/42, {backgroundPositionX: '-=54px', repeat: -1, ease: Power0.easeNone});
var wave4 = TweenMax.to('.wave4', speed*2.4/42, {backgroundPositionX: '-=54px', repeat: -1, ease: Power0.easeNone});
var mount1 = TweenMax.to('.mount1', speed*8, {backgroundPositionX: '-=1760px', repeat: -1, ease: Power0.easeNone});
var mount2 = TweenMax.to('.mount2', speed*10, {backgroundPositionX: '-=1782px', repeat: -1, ease: Power0.easeNone});
var clouds = TweenMax.to('.clouds', speed*3, {backgroundPositionX: '-=1001px', repeat: -1, ease: Power0.easeNone});
}
}
var game = new Game();
var animation = new Animation();
var color = new Color();
var userAgent = window.navigator.userAgent;
Animation.generateSmallGlows(20);
$(document).ready(function(){
//game.showResult();
game.scaleScreen();
game.intro();
//game.start();
//game.bounce();
if($(window).height() < 480) {
$('.play-full-page').css('display', 'block');
}
})
$(document).on('click', '.stick', function(){
color.changeColor($(this));
if($(this).hasClass('no-effect')) {
if($(this).hasClass('bubble-stick')) {
animation.playBubble($(this));
} else if($(this).hasClass('triangle-stick')) {
animation.playTriangle($(this));
} else if($(this).hasClass('block-stick')) {
animation.playBlock($(this));
}
$(this).removeClass('no-effect');
}
});
$(document).on('click', '.section-2 .bar', function(){
color.changeColor($(this));
});
$(window).resize(function(){
if (!userAgent.match(/iPad/i) && !userAgent.match(/iPhone/i)) {
game.scaleScreenAndRun();
}
});
$(window).on("orientationchange",function(){
game.scaleScreenAndRun();
});
View Compiled
