Catch Me

In this example below you will see how to do a Catch Me with some HTML / CSS and Javascript

A little experiment to learn more about TweenMax

Thumbnail
This awesome code was written by vdaguenet, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright vdaguenet ©
  • HTML
  • CSS
  • JavaScript
    <body>
	<h1>Try to click on the ball</h1>
	<h2><span id="points">0</span> pts</h2>

	<div id="circle"></div>
	
	<script src="./js/main.js"></script>
</body>

/*Downloaded from https://www.codeseek.co/vdaguenet/catch-me-fmpnx */
    @import url(https://fonts.googleapis.com/css?family=Londrina+Shadow);

body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	background: #2A363B;
	overflow:hidden;
}

h1,
h2 {
	z-index: 1;
	color: #F9F2E7;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	margin: 0;
}

h1 {
	font-size: 1em;
	text-align: center;
	font-family: Helvetica;
	font-weight: lighter;
}

h2 {
	font-size: 2.4em;
	text-align: right;
	font-family: 'Londrina Shadow';
	padding-right: 15px;
}

#circle {
	width: 40px;
	height: 40px;
	border-radius: 20px;
	background: #E84A5F;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
}

#circle:hover {
	cursor: pointer;
}


/*Downloaded from https://www.codeseek.co/vdaguenet/catch-me-fmpnx */
    /**
 * Variables
 */
var x,			// Page width
	y,			// Pagr height
	target,		// Element moving
	points,		// Points counter
	rtime,		// Random time of tweening
	rx,			// Random X position of circle
	ry,			// Random Y position of circle
	tween,		// Global moving
	clicked;	// Boolean to disable double-click


/**
 * Main
 */
(function() {
	 init();
	 move();
	 window.onresize = function () {
	 	var w = getWindowSize();
		x = w.x;
		y = w.y;
	 }
})();

/**
 * Initialize application
 * @return {void} 
 */
function init() {
	var w;

	// Set target
	target = document.getElementById('circle');
	target.onclick = function () {
		catched();
	}

	points = document.getElementById('points');
	points.innerHTML = '0';

	// Get page width and height
	w = getWindowSize();
	x = w.x;
	y = w.y;
}

/**
 * Make the target moving randomly
 * @return {void} 
 */
function move () {
	rx = random(0, x);
	ry = random(0, y);
	rtime = random(2, 20) / 10; // Random time between .2s and 2s

	tween = TweenMax.to(target, rtime, { 
		y: ry, 
		x: rx,
		ease: 'Bounce.easeIn',
		onComplete: function() {
			move();
		}
	});
}

/**
 * Handle click on target
 * @return {void}
 */
function catched () {
	var t = parseInt(points.innerHTML);

	// Disabled click when animation is performing
	if(true === clicked) {
		return;
	}
	clicked = true;

	// Stop current tween
	if(tween) {
		tween.kill();
	}

	// Increase points
	t++;
	points.innerHTML = ''+t;

	// Animate
	var tl = new TimelineMax({
		repeat:1, 
		yoyo:true, 
		repeatDelay:1.5,
		onComplete: function() {
			// Activate click again
			clicked = false;
			move();
		}
	});
	tl.append(TweenMax.to(target, .5, {
			scaleX:3,
			ease: 'Bounce.easeIn'
		})
	);
	tl.append(TweenMax.to(target, .5, {
			scaleX:.5,
			scaleY:3,
			ease: 'Bounce.easeIn'
		})
	);
	tl.append(TweenMax.to(target, .7, {
			y: y,
			ease: 'Back.easeIn'
		})
	);
	tl.append(TweenMax.to(target, 1, {
			scaleX:3,
			scaleY:.1,
			ease: 'Expo.easeOut'
		})
	);
	tl.play();
}

/**
 * Get a random integer in interval [a, b]
 * @param  {Integer} a
 * @param  {Integer} b 
 * @return {Integer}
 */
function random(a, b) {
	return Math.floor(Math.random() * b) + a;
}

/**
 * Obtains window size
 * @return {Object} Width and height of the window
 */
function getWindowSize() {
	var w = window,
	    d = document,
	    e = d.documentElement,
	    g = d.getElementsByTagName('body')[0];
    
    return {
    	x: w.innerWidth || e.clientWidth || g.clientWidth,
    	y: w.innerHeight|| e.clientHeight|| g.clientHeight
    };
}

Comments