View
Theme
Font Style
7pt
8pt
9pt
10pt
11pt
Line Style
100%
110%
120%
130%
140%
Bold Keyword
Default
Inspector
Kkaefer
Eclipse
SQ Light
Lesser
Dark
Cobalt
Monokai
Rubyblue
Night
SQ Dark
Ambiance
Blackboard
Line Num.
Wrap Lines
Preview
Redraw
JS Tab
HTML Tab
CSS Tab
Live Tab
Prev. Tab
Next Tab
Browser
History…
Help
Edit
Settings
Auto Complete
Match Brackets
Match Highlight
Strip Whitespace
Auto Close Brackets
Auto Close Quotes
Show Print Margin
Undo
Redo
Delete
Select Line
Select All
Find & Replace
Find
Find in Repo.
Find Next
Find Previous
Replace Single
Replace All
Wrap Search
Revert
As Template
Diff Revision
Format
Compress
Text
Zen Coding
Indent
Tab Width
1
2
3
4
5
6
7
8
Indent Unit
1
2
3
4
5
6
7
8
Smart Indent
Use Tabs
Visible Tabs
Shift Left
Shift Right
Put Indent
Number
Increment by 1
Decrement by 1
Increment by 0.1
Decrement by 0.1
Increment by 10
Decrement by 10
Simple Math
Comment
Line
Move Up
Move Down
Copy Up
Copy Down
Go to Line…
Remove Line
Next Point
Prev. Point
Help
Share
Login
You can jump to the latest bin by adding
/latest
to your URL
×
z
Find
→
←
⟲
Replace
⊗
All
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); var css3 = { 'transition': 'transition', 'transform': 'transform', 'transitionend': 'transitionEnd' } var t, transitions = { 'O':'oTransitionEnd', 'ms':'msTransitionEnd', 'Moz':'transitionend', 'Webkit':'webkitTransitionEnd' } for (t in transitions){ if (document.getElementsByTagName('body')[0].style[t+'Transition'] !== undefined) { css3.transition = t+'Transition'; css3.transform = t+'Transform'; css3.transitionend = transitions[t]; break; } } 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); } } } var n = 0; function timer() { n++; if (pinchthefrog) { if (captures >= stage) { youWin(); } var froggy = $('frog'+n); if (froggy.dataset.running == 0) { froggy.dataset.running = 1; } else if (froggy.dataset.captured == 0) { if (froggy.dataset.activatedIn == 0) { if (froggy.dataset.running == 1) { if (!froggy.classList.contains('frogTransitionOn')) { froggy.classList.add('frogTransitionOn'); } froggy.style.visibility = 'visible'; froggy.dataset.running = 2; } //froggy.dataset.y = parseInt(froggy.dataset.y) + parseInt(froggy.dataset.movementTop); //froggy.dataset.x = parseInt(froggy.dataset.x) + parseInt(froggy.dataset.movementLeft); froggy.dataset.y = +froggy.dataset.y + (+froggy.dataset.movementTop); froggy.dataset.x = +froggy.dataset.x + (+froggy.dataset.movementLeft); froggy.style.top = froggy.dataset.y+'px'; froggy.style.left = froggy.dataset.x+'px'; froggy.classList.toggle('jump'); if (froggy.dataset.x > winWidth || froggy.dataset.x < -frogWidth || froggy.dataset.y > winHeight || froggy.dataset.y < -frogHeight) { setFroggyDirection(froggy); } } else { froggy.dataset.activatedIn--; } } } if (n == 10) { n = 0; } setTimeout(timer, 24); } function dragged(e) { e.preventDefault(); if (pinchthefrog && this.dataset.captured == 1) { var coors = getCoors(e), element = document.elementFromPoint(coors[0], coors[1]); if (element.tagName == 'HTML' || element.tagName == 'BODY') { this.dataset.captured = 0; this.classList.remove('captured'); this.classList.add('jump'); captures--; } } } 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 youWin() { pinchthefrog = 0; var i, froggy = ''; for (i=1; i<=frogs; i++) { froggy = $('frog'+i); if (froggy.dataset.captured == 1) { setTransform(froggy, froggy.dataset.degree*2); } } setTimeout(stageCleared, 1000); } function stageCleared() { captures = 0; froggyStandBy(); var hole = $('hole'); hole.style.visibility = 'hidden'; hole.style.width = 1+'px'; hole.style.height = 1+'px'; hole.style.top = winHeightHalf-1+'px'; hole.style.left = winWidthHalf-1+'px'; document.getElementsByTagName('body')[0].style.backgroundColor = '#000'; if (stage > 9) { $('gameover').style.display = 'block'; } else { $('stagecleared').style.display = 'block'; setTimeout(nextStage, 2000); } } function nextStage() { stage++; $('stagecleared').style.display = 'none'; $('stagenum').innerHTML = stage; if (stage >= 10) { $('missionnum').innerHTML = stage; } else { $('missionnum').innerHTML = ' '+stage; } $('nextstage').style.display = 'block'; setTimeout(showHole, 3000); } function fullCircle() { // this.dataset.ends++; // if (this.dataset.ends == 4) { // this.dataset.ends = 0; froggyStandBy(); pinchthefrog = 1; // } } function getCoors(e) { var coors = []; if (e.targetTouches && e.targetTouches.length) { var thisTouch = e.targetTouches[0]; coors[0] = thisTouch.clientX; coors[1] = thisTouch.clientY; } else { coors[0] = e.clientX; coors[1] = e.clientY; } return coors; } 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)'; }
Pinch That Frog!
L o a d i n g . . .
PINCH THAT FROG!
" How many Frogs can you pinch? "
PLAY NOW
Warning: This is a Multi-touch game!
*Multi-Touch *CSS3 *JavaScript *Slippery Frog!
Copyright © 2012
Danny Damianus
Congratulations!
You beat the game!
STAGE
CLEARED!
STAGE
x
* { 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
Help
About
×
×