Fire JS Bin - PinchThatFrog

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

var isTouchDevice = 'ontouchstart' in document.documentElement;
var stage = 0,
	pinchthefrog = 0,
	captures = 0,
	winWidth = window.innerWidth,
	winHeight = window.innerHeight,
	frogs = 10,
	frogWidth = 60,
	frogHeight = 60,
	jumping = 70;

var winWidthHalf = Math.ceil(winWidth/2),
	winHeightHalf = Math.ceil(winHeight/2);

var	frogDefaultTop = winHeightHalf-(frogHeight/2),
	frogDefaultLeft = winWidthHalf-(frogWidth/2);

window.onload = function() {
	$('loading').parentNode.removeChild($('loading'));
	init();
	if (!isTouchDevice) {
		$('warning').style.display = 'block';
	}
	$('menu').style.display = 'block';
	$('menu').style.opacity = '1.0';
	setTimeout(timer, 100);
};

function init() {
	winWidth = window.innerWidth;
	winHeight = window.innerHeight;
	winWidthHalf = Math.ceil(winWidth/2);
	winHeightHalf = Math.ceil(winHeight/2);
	frogDefaultTop = winHeightHalf-(frogHeight/2);
	frogDefaultLeft = winWidthHalf-(frogWidth/2);

$('hole').style.top = winHeightHalf-1+'px';
	$('hole').style.left = winWidthHalf-1+'px';
	$('stagecleared').style.top = winHeightHalf-100+'px';
	$('stagecleared').style.left = winWidthHalf-175+'px';
	$('nextstage').style.top = winHeightHalf-100+'px';
	$('nextstage').style.left = winWidthHalf-175+'px';
	$('gameover').style.top = winHeightHalf-100+'px';
	$('gameover').style.left = winWidthHalf-175+'px';

document.addEventListener('touchmove', function(e){ e.preventDefault(); });
	document.addEventListener('touchstart', function(e){ e.preventDefault(); });
//	$('hole').addEventListener(css3.transitionend, fullCircle, false);
	$('playnow').addEventListener('click', playNow, false);
	$('playnow').addEventListener('touchstart', playNow, false);

var i, froggy = '';

for (i=1; i<=frogs; i++) {
		froggy = $('frogmaster').cloneNode(true);
		froggy.setAttribute('id', 'frog'+i);
		froggy.classList.remove('captured');
		froggy.style.visibility = 'hidden';
		froggy.style.marginTop = 0;
		document.getElementsByTagName('body')[0].appendChild(froggy);
		if (isTouchDevice) {
			froggy.addEventListener('touchstart', pinched, false);
			froggy.addEventListener('touchend', unpinched, false);
			froggy.addEventListener('touchleave', unpinched, false);
			froggy.addEventListener('touchcancel', unpinched, false);
			froggy.addEventListener('touchmove', dragged, false);
		}
		else {
			froggy.addEventListener('mousedown', pinched, false);
			froggy.addEventListener('mouseup', unpinched, false);
			froggy.addEventListener("mouseout", dragged, false);
		}
	}
}

function pinched(e) {
	e.preventDefault();
	if (pinchthefrog && this.dataset.captured == 0) {
		this.dataset.captured = 1;
		this.classList.remove('jump');
		this.classList.add('captured');
		captures++;
	}
}

function unpinched(e) {
	e.preventDefault();
	if (pinchthefrog && this.dataset.captured == 1) {
		this.dataset.captured = 0;
		this.classList.remove('captured');
		this.classList.add('jump');
		captures--;
	}
}

function froggyStandBy() {
	var i, froggy = '';
	for (i=1; i<=frogs; i++) {
		froggy = $('frog'+i);
		setFroggyDirection(froggy);
	}
	$('frog1').dataset.activatedIn = 0;
}

function setFroggyDirection(froggy) {
	var deg = getRandom(0,360);
	var x = Math.cos(deg*Math.PI/180) * jumping;
	var y = Math.sin(deg*Math.PI/180) * jumping;
	froggy.style.visibility = 'hidden';
	froggy.classList.remove('frogTransitionOn');
	froggy.classList.remove('captured');
	froggy.dataset.activatedIn = getRandom(1,50);
	froggy.dataset.running = 0;
	froggy.dataset.captured = 0;
	froggy.dataset.y = frogDefaultTop;
	froggy.dataset.x = frogDefaultLeft;
	froggy.style.top = frogDefaultTop+'px';
	froggy.style.left = frogDefaultLeft+'px';
	froggy.dataset.degree = deg
	froggy.dataset.movementTop = y;
	froggy.dataset.movementLeft = x;
	setTransform(froggy, deg-270);
}

function playNow() {
	var menu = $('menu');
	menu.style.display = 'none';
	menu.style.opacity = '0.0';
	document.getElementsByTagName('body')[0].style.backgroundColor = '#000';
	nextStage();
}

function fullCircle() {
//	this.dataset.ends++;
//	if (this.dataset.ends == 4) {
//		this.dataset.ends = 0;
		froggyStandBy();
		pinchthefrog = 1;
//	}
}

function showHole() {
	var hole = $('hole');
	if (!hole.classList.contains('holeTransitionOn')) {
		hole.classList.add('holeTransitionOn');
	}
	hole.style.visibility = 'visible';
	hole.style.width = 100+'px';
	hole.style.height = 100+'px';
	hole.style.top = winHeightHalf-50+'px';
	hole.style.left = winWidthHalf-50+'px';
	$('nextstage').style.display = 'none';
	document.getElementsByTagName('body')[0].style.backgroundColor = '#E6E6E6';
	setTimeout(fullCircle, 1900);
}

function getRandom(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
}

function $(id) {
	return document.getElementById(id);
}

function setTransition(id, val) {
	id.style[css3.transition] = val;
}

function setTransform(id, val) {
	id.style[css3.transform] = 'rotate('+val+'deg)';
}

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="Pinch That Frog is a Multi-touch CSS3 Game">
<meta name="author" content="Danny Damianus">
<!--

Pinch That Frog
Copyright (C) 2012 Danny Damianus
http://www.damianus.com

-->
<title>Pinch That Frog!</title>

</head>
<body>
<div id="loading">L o a d i n g . . .</div>
<div id="menu">
	<div>PINCH THAT FROG!</div>
	<div>" How many Frogs can you pinch? "</div>
	<div id="playnow">PLAY NOW</div>
	<div id="warning">Warning: This is a Multi-touch game!</div>
	<div>*Multi-Touch   *CSS3   *JavaScript   *Slippery Frog!<br /><br />Copyright © 2012 <a href="http://www.damianus.com">Danny Damianus</a></div>
</div>
<div id="gameover">Congratulations!<br />You beat the game!</div>
<div id="stagecleared">STAGE<br />CLEARED!</div>
<div id="nextstage">
	<div>STAGE <span id="stagenum"></span></div>
	<div>
		<div id="frogmaster" class="frog captured" style="visibility: visible; margin-top: 5px;">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div><div></div></div>
			<div><div></div></div>
		</div>
		x <span id="missionnum"></span>
	</div>
</div>
<div id="hole"></div>

</body>
</html>

* {
	padding: 0;
	margin: 0;
	border: 0;
	-moz-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

body {
	overflow: hidden;
	background-color: #E6E6E6;
	font-size: 12px;
	font-family: Helvetica, Arial, sans-serif;
}

.frogTransitionOn {
	-moz-transition: top 200ms, left 200ms, -moz-transform 500ms linear;
	-webkit-transition: top 200ms, left 200ms, -webkit-transform 500ms linear;
	-o-transition: top 100ms, left 100ms, -o-transform 500ms linear;
	-ms-transition: top 200ms, left 200ms, -ms-transform 500ms linear;
	transition: top 200ms, left 200ms, transform 500ms linear;
}

.holeTransitionOn {
	-moz-transition: width 2s, height 2s, top 2s, left 2s;
	-webkit-transition: width 2s, height 2s, top 2s, left 2s;
	-o-transition: width 2s, height 2s, top 2s, left 2s;
	-ms-transition: width 2s, height 2s, top 2s, left 2s;
	transition: width 2s, height 2s, top 2s, left 2s;
}

#hole {
	visibility: hidden;
	position: absolute;
	width: 4px;
	height: 4px;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	-o-border-radius: 100%;
	-ms-border-radius: 100%;
	border-radius: 100%;
	background-color: #000;
}

.frog {
	visibility: hidden;
	position: absolute;
	width: 60px;
	height: 60px;
	top: 0;
	left: 0;
	-moz-transform:rotate(70deg);
	-webkit-transform:rotate(70deg);
	-o-transform:rotate(70deg);
	-ms-transform:rotate(70deg);
	transform:rotate(70deg);
}

.frog div {
	position: absolute;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	-o-border-radius: 100%;
	-ms-border-radius: 100%;
	border-radius: 100%;
	-moz-transition: width 100ms linear, height 100ms linear, top 100ms linear, left 100ms linear, bottom 100ms linear, right 100ms linear, margin 100ms linear, -moz-transform 100ms linear;
	-webkit-transition: width 100ms linear, height 100ms linear, top 100ms linear, left 100ms linear, bottom 100ms linear, right 100ms linear, margin 100ms linear, -webkit-transform 100ms linear;
	-o-transition: width 100ms linear, height 100ms linear, top 100ms linear, left 100ms linear, bottom 100ms linear, right 100ms linear, margin 100ms linear, -o-transform 100ms linear;
	-ms-transition: width 100ms linear, height 100ms linear, top 100ms linear, left 100ms linear, bottom 100ms linear, right 100ms linear, margin 100ms linear, -o-transform 100ms linear;
	transition: width 100ms linear, height 100ms linear, top 100ms linear, left 100ms linear, bottom 100ms linear, right 100ms linear, margin 100ms linear, transform 100ms linear;
}

.frog > div:nth-child(1) {
	width: 18%;
	height: 38%;
	top: 30%;
	left: 35%;
	background-color: #9F9F9F;
	-moz-box-shadow: 10px 10px 20px 20px #9F9F9F;
	-webkit-box-shadow: 10px 10px 20px 20px #9F9F9F;
	-o-box-shadow: 10px 10px 20px 20px #9F9F9F;
	-ms-box-shadow: 10px 10px 20px 20px #9F9F9F;
	box-shadow: 10px 10px 20px 20px #9F9F9F;
}

.frog > div:nth-child(2) {
	width: 10%;
	height: 30%;
	top: 5%;
	left: 45%;
	background-color: #FF0000;
}

.frog > div:nth-child(3) {
	width: 15%;
	height: 40%;
	left: 5%;
	top	: 8%;
	background-image: -moz-linear-gradient(45deg, #008000, #00CE00);
	background-image: -webkit-linear-gradient(45deg, #008000, #00CE00);
	background-image: -o-linear-gradient(45deg, #008000, #00CE00);
	background-image: -ms-linear-gradient(45deg, #008000, #00CE00);
	background-image: linear-gradient(45deg, #008000, #00CE00);
	-moz-transform:rotate(-30deg);
	-webkit-transform:rotate(-30deg);
	-o-transform:rotate(-30deg);
	-ms-transform:rotate(-30deg);
	transform:rotate(-30deg);
}

.frog > div:nth-child(4) {
	width: 15%;
	height: 40%;
	right: 5%;
	top	: 8%;
	background-image: -moz-linear-gradient(45deg, #008000, #00CE00);
	background-image: -webkit-linear-gradient(45deg, #008000, #00CE00);
	background-image: -o-linear-gradient(45deg, #008000, #00CE00);
	background-image: -ms-linear-gradient(45deg, #008000, #00CE00);
	background-image: linear-gradient(45deg, #008000, #00CE00);
	-moz-transform:rotate(30deg);
	-webkit-transform:rotate(30deg);
	-o-transform:rotate(30deg);
	-ms-transform:rotate(30deg);
	transform:rotate(30deg);
}

.frog > div:nth-child(5) {
	width: 20%;
	height: 65%;
	left: 0;
	bottom: 0;
	background-image: -moz-linear-gradient(45deg, #008000, #00CE00);
	background-image: -webkit-linear-gradient(45deg, #008000, #00CE00);
	background-image: -o-linear-gradient(45deg, #008000, #00CE00);
	background-image: -ms-linear-gradient(45deg, #008000, #00CE00);
	background-image: linear-gradient(45deg, #008000, #00CE00);
	-moz-transform:rotate(-30deg);
	-webkit-transform:rotate(-30deg);
	-o-transform:rotate(-30deg);
	-ms-transform:rotate(-30deg);
	transform:rotate(-30deg);
}

.frog > div:nth-child(6) {
	width: 20%;
	height: 65%;
	right: 0;
	bottom: 0;
	background-image: -moz-linear-gradient(45deg, #008000, #00CE00);
	background-image: -webkit-linear-gradient(45deg, #008000, #00CE00);
	background-image: -o-linear-gradient(45deg, #008000, #00CE00);
	background-image: -ms-linear-gradient(45deg, #008000, #00CE00);
	background-image: linear-gradient(45deg, #008000, #00CE00);
	-moz-transform:rotate(30deg);
	-webkit-transform:rotate(30deg);
	-o-transform:rotate(30deg);
	-ms-transform:rotate(30deg);
	transform:rotate(30deg);
}

.frog > div:nth-child(7) {
	width: 70%;
	height: 100%;
	top: 0;
	left: 15%;
	background-image: -moz-linear-gradient(-45deg, #0FFF0F, #007500);
	background-image: -webkit-linear-gradient(-45deg, #0FFF0F, #007500);
	background-image: -o-linear-gradient(-45deg, #0FFF0F, #007500);
	background-image: -ms-linear-gradient(-45deg, #0FFF0F, #007500);
	background-image: linear-gradient(-45deg, #0FFF0F, #007500);
}

.frog > div:nth-child(8) {
	width: 15%;
	height: 15%;
	left: 30%;
	top	: 8%;
	background-color: #fff;
	background-image: -moz-linear-gradient(-50deg, #ffffff 60%, #9F9F9F);
	background-image: -webkit-linear-gradient(-50deg, #ffffff 60%, #9F9F9F);
	background-image: -o-linear-gradient(-50deg, #ffffff 60%, #9F9F9F);
	background-image: -ms-linear-gradient(-50deg, #ffffff 60%, #9F9F9F);
	background-image: linear-gradient(-50deg, #ffffff 60%, #9F9F9F);
}

.frog > div:nth-child(9) {
	width: 15%;
	height: 15%;
	right: 30%;
	top	: 8%;
	background-color: #fff;
	background-image: -moz-linear-gradient(-50deg, #ffffff 60%, #9F9F9F);
	background-image: -webkit-linear-gradient(-50deg, #ffffff 60%, #9F9F9F);
	background-image: -o-linear-gradient(-50deg, #ffffff 60%, #9F9F9F);
	background-image: -ms-linear-gradient(-50deg, #ffffff 60%, #9F9F9F);
	background-image: linear-gradient(-50deg, #ffffff 60%, #9F9F9F);
}

.frog > div:nth-child(8) div {
	width: 45%;
	height: 45%;
	top: 0;
	left: 30%;
	background-color: #000;
}

.frog > div:nth-child(9) div {
	width: 45%;
	height: 45%;
	top: 0;
	left: 30%;
	background-color: #000;
}

.jump {
	margin-top: -5px !important;
	margin-left: -5px !important;
	width: 70px !important;
	height: 70px !important;
}
.jump > div:nth-child(1) {
	width: 20% !important;
	height: 40% !important;
	top: 30% !important;
	left: 35% !important;
	background-color: #9F9F9F !important;
	-moz-box-shadow: 10px 10px 20px 20px #9F9F9F !important;
	-webkit-box-shadow: 10px 10px 20px 20px #9F9F9F !important;
	-o-box-shadow: 10px 10px 20px 20px #9F9F9F !important;
	-ms-box-shadow: 10px 10px 20px 20px #9F9F9F !important;
	box-shadow: 10px 20px 20px 20px #676767 !important;
}
.jump > div:nth-child(3) {
	left: 10% !important;
	top	: 0% !important;
	-moz-transform:rotate(-10deg) !important;
	-webkit-transform:rotate(-10deg) !important;
	-o-transform:rotate(-10deg) !important;
	-ms-transform:rotate(-10deg) !important;
	transform:rotate(-10deg) !important;
}
.jump > div:nth-child(4) {
	right: 10% !important;
	top	: 0% !important;
	-moz-transform:rotate(10deg) !important;
	-webkit-transform:rotate(10deg) !important;
	-o-transform:rotate(10deg) !important;
	-ms-transform:rotate(10deg) !important;
	transform:rotate(10deg) !important;
}
.jump > div:nth-child(5) {
	left: 10% !important;
	bottom: -25% !important;
	-moz-transform:rotate(-160deg) !important;
	-webkit-transform:rotate(-160deg) !important;
	-o-transform:rotate(-160deg) !important;
	-ms-transform:rotate(-160deg) !important;
	transform:rotate(-160deg) !important;
}
.jump > div:nth-child(6) {
	right: 10% !important;
	bottom: -25% !important;
	-moz-transform:rotate(160deg) !important;
	-webkit-transform:rotate(160deg) !important;
	-o-transform:rotate(160deg) !important;
	-ms-transform:rotate(160deg) !important;
	transform:rotate(160deg) !important;
}
.jump > div:nth-child(7) {
	background-image: -moz-linear-gradient(-45deg, #0FFF0F, #006400);
	background-image: -webkit-linear-gradient(-45deg, #0FFF0F, #006400);
	background-image: -o-linear-gradient(-45deg, #0FFF0F, #006400);
	background-image: -ms-linear-gradient(-45deg, #0FFF0F, #006400);
	background-image: linear-gradient(-45deg, #0FFF0F, #006400);
}

.captured {
	margin-top: -5px !important;
	margin-left: -5px !important;
	width: 70px !important;
	height: 70px !important;
}
.captured > div:nth-child(2) {
	top: -20% !important;
}
.captured > div:nth-child(8) {
	width: 25% !important;
	height: 25% !important;
	left: 25% !important;
	top	: 2% !important;
}
.captured > div:nth-child(9) {
	width: 25% !important;
	height: 25% !important;
	right: 25% !important;
	top	: 2% !important;
}

@-moz-keyframes loading {
	from {opacity:1.0}
	to {opacity:0.0}
}
@-webkit-keyframes loading {
	from {opacity:1.0}
	to {opacity:0.0}
}
@-o-keyframes loading {
	from {opacity:1.0}
	to {opacity:0.0}
}
@-ms-keyframes loading {
	from {opacity:1.0}
	to {opacity:0.0}
}
@keyframes loading {
	from {opacity:1.0}
	to {opacity:0.0}
}

#loading {
	font-size: 16px;
	font-weight: bold;
	margin-top: 100px;
	text-align: center;
	color: #000;
	-moz-animation: loading 700ms infinite;
	-webkit-animation: loading 700ms infinite;
	-o-animation: loading 700ms infinite;
	-ms-animation: loading 700ms infinite;
	animation: loading 700ms infinite;
}

#menu {
	position: relative;
	display: none;
	margin: 80px auto 0 auto;
	text-align: center;
	opacity: 0.0;
	z-index: 3;
	-moz-transition: opacity 2s;
	-webkit-transition: opacity 2s;
	-o-transition: opacity 2s;
	-ms-transition: opacity 2s;
	transition: opacity 2s;
}
#menu > div:nth-child(1) {
	font-size: 54px;
	font-weight: bold;
	letter-spacing:5px;
	text-shadow: 2px 2px #BEBEBE;
}

#menu > div:nth-child(2) {
	margin-top: 20px;
	font-size: 14px;
}

#menu > div:nth-child(3) {
	margin-top: 30px;
	font-size: 20px;
	font-weight: bold;
	text-shadow: 2px 2px #BEBEBE;
	cursor: pointer;
}

#menu > div:nth-child(4) {
	display: none;
	font-size: 10px;
	margin-top: 20px;
	color: #FF0000;
}

#menu > div:nth-child(5) {
	font-size: 10px;
	margin-top: 50px;
	color: #6F6F6F;
}
#menu a {
	color: #6F6F6F;
	text-decoration: none;
}

#nextstage, #stagecleared, #gameover {
	display: none;
	position: absolute;
	width: 350px;
	text-align: center;
	color: #fff;
	font-size: 40px;
}

#nextstage > div:nth-child(1) {
	text-align: center;
	margin-bottom: 30px;
}

#nextstage > div:nth-child(2) {
	text-align: right;
	position: relative;
	width: 200px;
	margin: auto;
	font-size: 60px;
}

Pop out