-
Notifications
You must be signed in to change notification settings - Fork 226
/
Copy path2048.html
25 lines (25 loc) · 32 KB
/
2048.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html><html> <head>
<title>2048</title>
<link rel="shortcut icon"
type="image/jpg" href="/2048.png"
/>
</head><style>body,html{margin:0;padding:0;background:#faf8ef;color:#776e65;font-family:'Clear Sans','Helvetica Neue',Arial,sans-serif;font-size:18px}body{margin:80px 0}.heading:after{content:'';display:block;clear:both}h1.title{font-size:80px;font-weight:700;margin:0;display:block;float:left}@-webkit-keyframes move-up{0%{top:25px;opacity:1}100%{top:-50px;opacity:0}}@-moz-keyframes move-up{0%{top:25px;opacity:1}100%{top:-50px;opacity:0}}@keyframes move-up{0%{top:25px;opacity:1}100%{top:-50px;opacity:0}}.score-container{position:relative;float:right;background:#bbada0;padding:15px 25px;font-size:25px;height:25px;line-height:47px;font-weight:700;border-radius:3px;color:#fff;margin-top:8px}.score-container:after{position:absolute;width:100%;top:10px;left:0;content:'Score';text-transform:uppercase;font-size:13px;line-height:13px;text-align:center;color:#eee4da}.score-container .score-addition{position:absolute;right:30px;color:red;font-size:25px;line-height:25px;font-weight:700;color:rgba(119,110,101,.9);z-index:100;-webkit-animation:move-up .6s ease-in;-moz-animation:move-up .6s ease-in;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both}p{margin-top:0;margin-bottom:10px;line-height:1.65}a{color:#776e65;font-weight:700;text-decoration:underline;cursor:pointer}strong.important{text-transform:uppercase}hr{border:none;border-bottom:1px solid #d8d4d0;margin-top:20px;margin-bottom:30px}.container{width:500px;margin:0 auto}@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@-moz-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}.game-container{margin-top:40px;position:relative;padding:15px;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;background:#bbada0;border-radius:6px;width:500px;height:500px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.game-container .game-message{display:none;position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(238,228,218,.5);z-index:100;text-align:center;-webkit-animation:fade-in .8s ease 1.2s;-moz-animation:fade-in .8s ease 1.2s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both}.game-container .game-message p{font-size:60px;font-weight:700;height:60px;line-height:60px;margin-top:222px}.game-container .game-message .lower{display:block;margin-top:59px}.game-container .game-message a{display:inline-block;background:#8f7a66;border-radius:3px;padding:0 20px;text-decoration:none;color:#f9f6f2;height:40px;line-height:42px;margin-left:9px}.game-container .game-message.game-won{background:rgba(237,194,46,.5);color:#f9f6f2}.game-container .game-message.game-over,.game-container .game-message.game-won{display:block}.grid-container{position:absolute;z-index:1}.grid-row{margin-bottom:15px}.grid-row:last-child{margin-bottom:0}.grid-row:after{content:'';display:block;clear:both}.grid-cell{width:106.25px;height:106.25px;margin-right:15px;float:left;border-radius:3px;background:rgba(238,228,218,.35)}.grid-cell:last-child{margin-right:0}.tile-container{position:absolute;z-index:2}.tile{width:106.25px;height:106.25px;line-height:116.25px}.tile.tile-position-1-1{position:absolute;left:0;top:0}.tile.tile-position-1-2{position:absolute;left:0;top:121px}.tile.tile-position-1-3{position:absolute;left:0;top:243px}.tile.tile-position-1-4{position:absolute;left:0;top:364px}.tile.tile-position-2-1{position:absolute;left:121px;top:0}.tile.tile-position-2-2{position:absolute;left:121px;top:121px}.tile.tile-position-2-3{position:absolute;left:121px;top:243px}.tile.tile-position-2-4{position:absolute;left:121px;top:364px}.tile.tile-position-3-1{position:absolute;left:243px;top:0}.tile.tile-position-3-2{position:absolute;left:243px;top:121px}.tile.tile-position-3-3{position:absolute;left:243px;top:243px}.tile.tile-position-3-4{position:absolute;left:243px;top:364px}.tile.tile-position-4-1{position:absolute;left:364px;top:0}.tile.tile-position-4-2{position:absolute;left:364px;top:121px}.tile.tile-position-4-3{position:absolute;left:364px;top:243px}.tile.tile-position-4-4{position:absolute;left:364px;top:364px}.tile{border-radius:3px;background:#eee4da;text-align:center;font-weight:700;z-index:10;font-size:55px;-webkit-transition:.1s ease-in-out;-moz-transition:.1s ease-in-out;-webkit-transition-property:top,left;-moz-transition-property:top,left}.tile.tile-2{background:#eee4da;box-shadow:0 0 30px 10px rgba(243,215,116,0),inset 0 0 0 1px rgba(255,255,255,0)}.tile.tile-4{background:#e40000;box-shadow:0 0 30px 10px rgba(243,215,116,0),inset 0 0 0 1px rgba(255,255,255,0)}.tile.tile-8{color:#f9f6f2;background:#ea4e28}.tile.tile-16{color:#f9f6f2;background:#e83419}.tile.tile-32{color:#f9f6f2;background:#e51c1c}.tile.tile-64{color:#f9f6f2;background:#e10000}.tile.tile-128{color:#f9f6f2;background:#b20000;box-shadow:0 0 30px 10px rgba(243,215,116,.23809523809524),inset 0 0 0 1px rgba(255,255,255,.14285714285714);font-size:45px}@media screen and (max-width:480px){.tile.tile-128{font-size:25px}}.tile.tile-256{color:#f9f6f2;background:#a80000;box-shadow:0 0 30px 10px rgba(243,215,116,.31746031746032),inset 0 0 0 1px rgba(255,255,255,.19047619047619);font-size:45px}@media screen and (max-width:480px){.tile.tile-256{font-size:25px}}.tile.tile-512{color:#f9f6f2;background:#9e0000;box-shadow:0 0 30px 10px rgba(243,215,116,.3968253968254),inset 0 0 0 1px rgba(255,255,255,.23809523809524);font-size:45px}@media screen and (max-width:480px){.tile.tile-512{font-size:25px}}.tile.tile-1024{color:#f9f6f2;background:#940000;box-shadow:0 0 30px 10px rgba(243,215,116,.47619047619048),inset 0 0 0 1px rgba(255,255,255,.28571428571429);font-size:35px}@media screen and (max-width:480px){.tile.tile-1024{font-size:15px}}.tile.tile-2048{color:#f9f6f2;background:#8a0000;box-shadow:0 0 30px 10px rgba(243,215,116,.55555555555556),inset 0 0 0 1px rgba(255,255,255,.33333333333333);font-size:35px}@media screen and (max-width:480px){.tile.tile-2048{font-size:15px}}@-webkit-keyframes appear{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1)}}@-moz-keyframes appear{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1)}}@keyframes appear{0%{opacity:0;-webkit-transform:scale(0);-moz-transform:scale(0)}100%{opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1)}}.tile-new{-webkit-animation:appear .2s ease .1s;-moz-animation:appear .2s ease .1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both}@-webkit-keyframes pop{0%{-webkit-transform:scale(0);-moz-transform:scale(0)}50%{-webkit-transform:scale(1.2);-moz-transform:scale(1.2)}100%{-webkit-transform:scale(1);-moz-transform:scale(1)}}@-moz-keyframes pop{0%{-webkit-transform:scale(0);-moz-transform:scale(0)}50%{-webkit-transform:scale(1.2);-moz-transform:scale(1.2)}100%{-webkit-transform:scale(1);-moz-transform:scale(1)}}@keyframes pop{0%{-webkit-transform:scale(0);-moz-transform:scale(0)}50%{-webkit-transform:scale(1.2);-moz-transform:scale(1.2)}100%{-webkit-transform:scale(1);-moz-transform:scale(1)}}.tile-merged{z-index:20;-webkit-animation:pop .2s ease .1s;-moz-animation:pop .2s ease .1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both}.game-intro{margin-bottom:0}.game-explanation{margin-top:50px}@media screen and (max-width:480px){body,html{font-size:15px}body{margin:20px 0;padding:0 20px}h1.title{font-size:50px}.container{width:280px;margin:0 auto}.score-container{margin-top:0}.heading{margin-bottom:10px}.game-container{margin-top:40px;position:relative;padding:10px;cursor:default;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;background:#bbada0;border-radius:6px;width:280px;height:280px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.game-container .game-message{display:none;position:absolute;top:0;right:0;bottom:0;left:0;background:rgba(238,228,218,.5);z-index:100;text-align:center;-webkit-animation:fade-in .8s ease 1.2s;-moz-animation:fade-in .8s ease 1.2s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both}.game-container .game-message p{font-size:60px;font-weight:700;height:60px;line-height:60px;margin-top:222px}.game-container .game-message .lower{display:block;margin-top:59px}.game-container .game-message a{display:inline-block;background:#8f7a66;border-radius:3px;padding:0 20px;text-decoration:none;color:#f9f6f2;height:40px;line-height:42px;margin-left:9px}.game-container .game-message.game-won{background:rgba(237,194,46,.5);color:#f9f6f2}.game-container .game-message.game-over,.game-container .game-message.game-won{display:block}.grid-container{position:absolute;z-index:1}.grid-row{margin-bottom:10px}.grid-row:last-child{margin-bottom:0}.grid-row:after{content:'';display:block;clear:both}.grid-cell{width:57.5px;height:57.5px;margin-right:10px;float:left;border-radius:3px;background:rgba(238,228,218,.35)}.grid-cell:last-child{margin-right:0}.tile-container{position:absolute;z-index:2}.tile{width:57.5px;height:57.5px;line-height:67.5px}.tile.tile-position-1-1{position:absolute;left:0;top:0}.tile.tile-position-1-2{position:absolute;left:0;top:68px}.tile.tile-position-1-3{position:absolute;left:0;top:135px}.tile.tile-position-1-4{position:absolute;left:0;top:203px}.tile.tile-position-2-1{position:absolute;left:68px;top:0}.tile.tile-position-2-2{position:absolute;left:68px;top:68px}.tile.tile-position-2-3{position:absolute;left:68px;top:135px}.tile.tile-position-2-4{position:absolute;left:68px;top:203px}.tile.tile-position-3-1{position:absolute;left:135px;top:0}.tile.tile-position-3-2{position:absolute;left:135px;top:68px}.tile.tile-position-3-3{position:absolute;left:135px;top:135px}.tile.tile-position-3-4{position:absolute;left:135px;top:203px}.tile.tile-position-4-1{position:absolute;left:203px;top:0}.tile.tile-position-4-2{position:absolute;left:203px;top:68px}.tile.tile-position-4-3{position:absolute;left:203px;top:135px}.tile.tile-position-4-4{position:absolute;left:203px;top:203px}.game-container{margin-top:20px}.tile{font-size:35px}.game-message p{font-size:30px!important;height:30px!important;line-height:30px!important;margin-top:90px!important}.game-message .lower{margin-top:30px!important}}</style><body>
<a href="/">Back To Home Page</a>
<div class='container'> <div class='heading'> <h1 class='title'>2048</h1> <div class='score-container'>0</div></div><p class='game-intro'>Join the numbers and get to the <strong>2048 tile!</strong></p><div class='game-container'> <div class='game-message'> <p></p><div class='lower'> <a class='retry-button'>Try again</a> </div></div><div class='grid-container'> <div class='grid-row'> <div class='grid-cell'></div><div class='grid-cell'></div><div class='grid-cell'></div><div class='grid-cell'></div></div><div class='grid-row'> <div class='grid-cell'></div><div class='grid-cell'></div><div class='grid-cell'></div><div class='grid-cell'></div></div><div class='grid-row'> <div class='grid-cell'></div><div class='grid-cell'></div><div class='grid-cell'></div><div class='grid-cell'></div></div><div class='grid-row'> <div class='grid-cell'></div><div class='grid-cell'></div><div class='grid-cell'></div><div class='grid-cell'></div></div></div><div class='tile-container'> </div></div><p class='game-explanation'> <strong class='important'></strong> </p><hr> <p> Created by <a href='http://gabrielecirulli.com' target='_blank'>Gabriele Cirulli.</a> Based on <a href='https://itunes.apple.com/us/app/1024!/id823499224' target='_blank'>1024 by Veewo Studio</a> and conceptually similar to <a href='http://asherv.com/threes/' target='_blank'>Threes by Asher Vollmer.</a> </p></div><script>!function(t,o){'use strict';var c=function(t,e){return new c.Instance(t,e||{})};c.defaults={stop_browser_behavior:{userSelect:'none',touchAction:'none',touchCallout:'none',contentZooming:'none',userDrag:'none',tapHighlightColor:'rgba(0,0,0,0)'}},c.HAS_POINTEREVENTS=t.navigator.pointerEnabled||t.navigator.msPointerEnabled,c.HAS_TOUCHEVENTS='ontouchstart'in t,c.MOBILE_REGEX=/mobile|tablet|ip(ad|hone|od)|android|silk/i,c.NO_MOUSEEVENTS=c.HAS_TOUCHEVENTS&&t.navigator.userAgent.match(c.MOBILE_REGEX),c.EVENT_TYPES={},c.DIRECTION_DOWN='down',c.DIRECTION_LEFT='left',c.DIRECTION_UP='up',c.DIRECTION_RIGHT='right',c.POINTER_MOUSE='mouse',c.POINTER_TOUCH='touch',c.POINTER_PEN='pen',c.EVENT_START='start',c.EVENT_MOVE='move',c.EVENT_END='end',c.DOCUMENT=t.document,c.plugins=c.plugins||{},c.gestures=c.gestures||{},c.READY=!1,c.utils={extend:function(t,e,n){for(var i in e)t[i]!==o&&n||(t[i]=e[i]);return t},each:function(t,e,n){var i,r;if('forEach'in t)t.forEach(e,n);else if(t.length!==o){for(i=0,r=t.length;i<r;i++)if(!1===e.call(n,t[i],i,t))return}else for(i in t)if(t.hasOwnProperty(i)&&!1===e.call(n,t[i],i,t))return},hasParent:function(t,e){for(;t;){if(t==e)return!0;t=t.parentNode}return!1},getCenter:function(t){var e=[],n=[];return c.utils.each(t,function(t){e.push(void 0!==t.clientX?t.clientX:t.pageX),n.push(void 0!==t.clientY?t.clientY:t.pageY)}),{pageX:(Math.min.apply(Math,e)+Math.max.apply(Math,e))/2,pageY:(Math.min.apply(Math,n)+Math.max.apply(Math,n))/2}},getVelocity:function(t,e,n){return{x:Math.abs(e/t)||0,y:Math.abs(n/t)||0}},getAngle:function(t,e){var n=e.pageY-t.pageY,t=e.pageX-t.pageX;return 180*Math.atan2(n,t)/Math.PI},getDirection:function(t,e){var n=Math.abs(t.pageX-e.pageX);return Math.abs(t.pageY-e.pageY)<=n?0<t.pageX-e.pageX?c.DIRECTION_LEFT:c.DIRECTION_RIGHT:0<t.pageY-e.pageY?c.DIRECTION_UP:c.DIRECTION_DOWN},getDistance:function(t,e){var n=e.pageX-t.pageX,t=e.pageY-t.pageY;return Math.sqrt(n*n+t*t)},getScale:function(t,e){return 2<=t.length&&2<=e.length?this.getDistance(e[0],e[1])/this.getDistance(t[0],t[1]):1},getRotation:function(t,e){return 2<=t.length&&2<=e.length?this.getAngle(e[1],e[0])-this.getAngle(t[1],t[0]):0},isVertical:function(t){return t==c.DIRECTION_UP||t==c.DIRECTION_DOWN},stopDefaultBrowserBehavior:function(n,t){t&&n&&n.style&&(c.utils.each(['webkit','khtml','moz','Moz','ms','o',''],function(e){c.utils.each(t,function(t){e&&(t=e+t.substring(0,1).toUpperCase()+t.substring(1)),t in n.style&&(n.style[t]=t)})}),'none'==t.userSelect&&(n.onselectstart=function(){return!1}),'none'==t.userDrag&&(n.ondragstart=function(){return!1}))}},c.Instance=function(t,e){var n=this;return c.READY||(c.event.determineEventTypes(),c.utils.each(c.gestures,function(t){c.detection.register(t)}),c.event.onTouch(c.DOCUMENT,c.EVENT_MOVE,c.detection.detect),c.event.onTouch(c.DOCUMENT,c.EVENT_END,c.detection.detect),c.READY=!0),this.element=t,this.enabled=!0,this.options=c.utils.extend(c.utils.extend({},c.defaults),e||{}),this.options.stop_browser_behavior&&c.utils.stopDefaultBrowserBehavior(this.element,this.options.stop_browser_behavior),c.event.onTouch(t,c.EVENT_START,function(t){n.enabled&&c.detection.startDetect(n,t)}),this},c.Instance.prototype={on:function(t,e){t=t.split(' ');return c.utils.each(t,function(t){this.element.addEventListener(t,e,!1)},this),this},off:function(t,e){t=t.split(' ');return c.utils.each(t,function(t){this.element.removeEventListener(t,e,!1)},this),this},trigger:function(t,e){e=e||{};var n=c.DOCUMENT.createEvent('Event');n.initEvent(t,!0,!0),n.gesture=e;t=this.element;return c.utils.hasParent(e.target,t)&&(t=e.target),t.dispatchEvent(n),this},enable:function(t){return this.enabled=t,this}};var a=null,u=!1,h=!1;c.event={bindDom:function(e,t,n){t=t.split(' ');c.utils.each(t,function(t){e.addEventListener(t,n,!1)})},onTouch:function(i,r,o){var s=this;this.bindDom(i,c.EVENT_TYPES[r],function(t){var e,n=t.type.toLowerCase();n.match(/mouse/)&&h||(n.match(/touch/)||n.match(/pointerdown/)||n.match(/mouse/)&&1===t.which?u=!0:n.match(/mouse/)&&!t.which&&(u=!1),n.match(/touch|pointer/)&&(h=!0),e=0,u&&(c.HAS_POINTEREVENTS&&r!=c.EVENT_END?e=c.PointerEvent.updatePointer(r,t):n.match(/touch/)?e=t.touches.length:h||(e=n.match(/up/)?0:1),0<e&&r==c.EVENT_END?r=c.EVENT_MOVE:e||(r=c.EVENT_END),!e&&null!==a||(a=t),o.call(c.detection,s.collectEventData(i,r,s.getTouchList(a,r),t)),c.HAS_POINTEREVENTS&&r==c.EVENT_END&&(e=c.PointerEvent.updatePointer(r,t))),e||(a=null,h=u=!1,c.PointerEvent.reset()))})},determineEventTypes:function(){var t=c.HAS_POINTEREVENTS?c.PointerEvent.getEvents():c.NO_MOUSEEVENTS?['touchstart','touchmove','touchend touchcancel']:['touchstart mousedown','touchmove mousemove','touchend touchcancel mouseup'];c.EVENT_TYPES[c.EVENT_START]=t[0],c.EVENT_TYPES[c.EVENT_MOVE]=t[1],c.EVENT_TYPES[c.EVENT_END]=t[2]},getTouchList:function(t){return c.HAS_POINTEREVENTS?c.PointerEvent.getTouchList():t.touches||(t.identifier=1,[t])},collectEventData:function(t,e,n,i){var r=c.POINTER_TOUCH;return(i.type.match(/mouse/)||c.PointerEvent.matchType(c.POINTER_MOUSE,i))&&(r=c.POINTER_MOUSE),{center:c.utils.getCenter(n),timeStamp:(new Date).getTime(),target:i.target,touches:n,eventType:e,pointerType:r,srcEvent:i,preventDefault:function(){this.srcEvent.preventManipulation&&this.srcEvent.preventManipulation(),this.srcEvent.preventDefault&&this.srcEvent.preventDefault()},stopPropagation:function(){this.srcEvent.stopPropagation()},stopDetect:function(){return c.detection.stopDetect()}}}},c.PointerEvent={pointers:{},getTouchList:function(){var e=[];return c.utils.each(this.pointers,function(t){e.push(t)}),e},updatePointer:function(t,e){return t==c.EVENT_END?this.pointers={}:(e.identifier=e.pointerId,this.pointers[e.pointerId]=e),Object.keys(this.pointers).length},matchType:function(t,e){if(!e.pointerType)return!1;var n=e.pointerType,i={};return i[c.POINTER_MOUSE]=n===e.MSPOINTER_TYPE_MOUSE||n===c.POINTER_MOUSE,i[c.POINTER_TOUCH]=n===e.MSPOINTER_TYPE_TOUCH||n===c.POINTER_TOUCH,i[c.POINTER_PEN]=n===e.MSPOINTER_TYPE_PEN||n===c.POINTER_PEN,i[t]},getEvents:function(){return['pointerdown MSPointerDown','pointermove MSPointerMove','pointerup pointercancel MSPointerUp MSPointerCancel']},reset:function(){this.pointers={}}},c.detection={gestures:[],current:null,previous:null,stopped:!1,startDetect:function(t,e){this.current||(this.stopped=!1,this.current={inst:t,startEvent:c.utils.extend({},e),lastEvent:!1,name:''},this.detect(e))},detect:function(e){if(this.current&&!this.stopped){e=this.extendEventData(e);var n=this.current.inst.options;return c.utils.each(this.gestures,function(t){return this.stopped||!1===n[t.name]||!1!==t.handler.call(t,e,this.current.inst)?void 0:(this.stopDetect(),!1)},this),this.current&&(this.current.lastEvent=e),e.eventType==c.EVENT_END&&!e.touches.length-1&&this.stopDetect(),e}},stopDetect:function(){this.previous=c.utils.extend({},this.current),this.current=null,this.stopped=!0},extendEventData:function(t){var e=this.current.startEvent;!e||t.touches.length==e.touches.length&&t.touches!==e.touches||(e.touches=[],c.utils.each(t.touches,function(t){e.touches.push(c.utils.extend({},t))}));var n,i=t.timeStamp-e.timeStamp,r=t.center.pageX-e.center.pageX,o=t.center.pageY-e.center.pageY,s=c.utils.getVelocity(i,r,o),a='end'===t.eventType?(n=this.current.lastEvent&&this.current.lastEvent.interimAngle,this.current.lastEvent&&this.current.lastEvent.interimDirection):(n=this.current.lastEvent&&c.utils.getAngle(this.current.lastEvent.center,t.center),this.current.lastEvent&&c.utils.getDirection(this.current.lastEvent.center,t.center));return c.utils.extend(t,{deltaTime:i,deltaX:r,deltaY:o,velocityX:s.x,velocityY:s.y,distance:c.utils.getDistance(e.center,t.center),angle:c.utils.getAngle(e.center,t.center),interimAngle:n,direction:c.utils.getDirection(e.center,t.center),interimDirection:a,scale:c.utils.getScale(e.touches,t.touches),rotation:c.utils.getRotation(e.touches,t.touches),startEvent:e}),t},register:function(t){var e=t.defaults||{};return e[t.name]===o&&(e[t.name]=!0),c.utils.extend(c.defaults,e,!0),t.index=t.index||1e3,this.gestures.push(t),this.gestures.sort(function(t,e){return t.index<e.index?-1:t.index>e.index?1:0}),this.gestures}},c.gestures.Drag={name:'drag',index:50,defaults:{drag_min_distance:10,correct_for_drag_min_distance:!0,drag_max_touches:1,drag_block_horizontal:!1,drag_block_vertical:!1,drag_lock_to_axis:!1,drag_lock_min_distance:25},triggered:!1,handler:function(t,e){if(c.detection.current.name!=this.name&&this.triggered)return e.trigger(this.name+'end',t),void(this.triggered=!1);if(!(0<e.options.drag_max_touches&&t.touches.length>e.options.drag_max_touches))switch(t.eventType){case c.EVENT_START:this.triggered=!1;break;case c.EVENT_MOVE:if(t.distance<e.options.drag_min_distance&&c.detection.current.name!=this.name)return;c.detection.current.name!=this.name&&(c.detection.current.name=this.name,e.options.correct_for_drag_min_distance&&0<t.distance)&&(n=Math.abs(e.options.drag_min_distance/t.distance),c.detection.current.startEvent.center.pageX+=t.deltaX*n,c.detection.current.startEvent.center.pageY+=t.deltaY*n,t=c.detection.extendEventData(t)),(c.detection.current.lastEvent.drag_locked_to_axis||e.options.drag_lock_to_axis&&e.options.drag_lock_min_distance<=t.distance)&&(t.drag_locked_to_axis=!0);var n=c.detection.current.lastEvent.direction;t.drag_locked_to_axis&&n!==t.direction&&(t.direction=c.utils.isVertical(n)?t.deltaY<0?c.DIRECTION_UP:c.DIRECTION_DOWN:t.deltaX<0?c.DIRECTION_LEFT:c.DIRECTION_RIGHT),this.triggered||(e.trigger(this.name+'start',t),this.triggered=!0),e.trigger(this.name,t),e.trigger(this.name+t.direction,t),(e.options.drag_block_vertical&&c.utils.isVertical(t.direction)||e.options.drag_block_horizontal&&!c.utils.isVertical(t.direction))&&t.preventDefault();break;case c.EVENT_END:this.triggered&&e.trigger(this.name+'end',t),this.triggered=!1}}},c.gestures.Hold={name:'hold',index:10,defaults:{hold_timeout:500,hold_threshold:1},timer:null,handler:function(t,e){switch(t.eventType){case c.EVENT_START:clearTimeout(this.timer),c.detection.current.name=this.name,this.timer=setTimeout(function(){'hold'==c.detection.current.name&&e.trigger('hold',t)},e.options.hold_timeout);break;case c.EVENT_MOVE:t.distance>e.options.hold_threshold&&clearTimeout(this.timer);break;case c.EVENT_END:clearTimeout(this.timer)}}},c.gestures.Release={name:'release',index:1/0,handler:function(t,e){t.eventType==c.EVENT_END&&e.trigger(this.name,t)}},c.gestures.Swipe={name:'swipe',index:40,defaults:{swipe_min_touches:1,swipe_max_touches:1,swipe_velocity:.7},handler:function(t,e){t.eventType==c.EVENT_END&&(0<e.options.swipe_max_touches&&t.touches.length<e.options.swipe_min_touches&&t.touches.length>e.options.swipe_max_touches||(t.velocityX>e.options.swipe_velocity||t.velocityY>e.options.swipe_velocity)&&(e.trigger(this.name,t),e.trigger(this.name+t.direction,t)))}},c.gestures.Tap={name:'tap',index:100,defaults:{tap_max_touchtime:250,tap_max_distance:10,tap_always:!0,doubletap_distance:20,doubletap_interval:300},handler:function(t,e){var n,i;t.eventType==c.EVENT_END&&'touchcancel'!=t.srcEvent.type&&(n=c.detection.previous,i=!1,t.deltaTime>e.options.tap_max_touchtime||t.distance>e.options.tap_max_distance||(n&&'tap'==n.name&&t.timeStamp-n.lastEvent.timeStamp<e.options.doubletap_interval&&t.distance<e.options.doubletap_distance&&(e.trigger('doubletap',t),i=!0),i&&!e.options.tap_always||(c.detection.current.name='tap',e.trigger(c.detection.current.name,t))))}},c.gestures.Touch={name:'touch',index:-1/0,defaults:{prevent_default:!1,prevent_mouseevents:!1},handler:function(t,e){return e.options.prevent_mouseevents&&t.pointerType==c.POINTER_MOUSE?void t.stopDetect():(e.options.prevent_default&&t.preventDefault(),void(t.eventType==c.EVENT_START&&e.trigger(this.name,t)))}},c.gestures.Transform={name:'transform',index:45,defaults:{transform_min_scale:.01,transform_min_rotation:1,transform_always_block:!1},triggered:!1,handler:function(t,e){if(c.detection.current.name!=this.name&&this.triggered)return e.trigger(this.name+'end',t),void(this.triggered=!1);if(!(t.touches.length<2))switch(e.options.transform_always_block&&t.preventDefault(),t.eventType){case c.EVENT_START:this.triggered=!1;break;case c.EVENT_MOVE:var n=Math.abs(1-t.scale),i=Math.abs(t.rotation);if(n<e.options.transform_min_scale&&i<e.options.transform_min_rotation)return;c.detection.current.name=this.name,this.triggered||(e.trigger(this.name+'start',t),this.triggered=!0),e.trigger(this.name,t),i>e.options.transform_min_rotation&&e.trigger('rotate',t),n>e.options.transform_min_scale&&(e.trigger('pinch',t),e.trigger('pinch'+(t.scale<1?'in':'out'),t));break;case c.EVENT_END:this.triggered&&e.trigger(this.name+'end',t),this.triggered=!1}}},'function'==typeof define&&'object'==typeof define.amd&&define.amd?define(function(){return c}):'object'==typeof module&&'object'==typeof module.exports?module.exports=c:t.Hammer=c}(this);</script><script>function GameManager(t,e,i){this.size=t,this.inputManager=new e,this.actuator=new i,this.startTiles=2,this.inputManager.on('move',this.move.bind(this)),this.inputManager.on('restart',this.restart.bind(this)),this.setup()}function Grid(t){this.size=t,this.cells=[],this.build()}function HTMLActuator(){this.tileContainer=document.getElementsByClassName('tile-container')[0],this.scoreContainer=document.getElementsByClassName('score-container')[0],this.messageContainer=document.getElementsByClassName('game-message')[0],this.score=0}function KeyboardInputManager(){this.events={},this.listen()}function Tile(t,e){this.x=t.x,this.y=t.y,this.value=e||2,this.previousPosition=null,this.mergedFrom=null}document.addEventListener('DOMContentLoaded',function(){window.requestAnimationFrame(function(){new GameManager(4,KeyboardInputManager,HTMLActuator)})}),GameManager.prototype.restart=function(){this.actuator.restart(),this.setup()},GameManager.prototype.setup=function(){this.grid=new Grid(this.size),this.score=0,this.over=!1,this.won=!1,this.addStartTiles(),this.actuate()},GameManager.prototype.addStartTiles=function(){for(var t=0;t<this.startTiles;t++)this.addRandomTile()},GameManager.prototype.addRandomTile=function(){var t;this.grid.cellsAvailable()&&(t=Math.random()<.9?2:4,t=new Tile(this.grid.randomAvailableCell(),t),this.grid.insertTile(t))},GameManager.prototype.actuate=function(){this.actuator.actuate(this.grid,{score:this.score,over:this.over,won:this.won})},GameManager.prototype.prepareTiles=function(){this.grid.eachCell(function(t,e,i){i&&(i.mergedFrom=null,i.savePosition())})},GameManager.prototype.moveTile=function(t,e){this.grid.cells[t.x][t.y]=null,(this.grid.cells[e.x][e.y]=t).updatePosition(e)},GameManager.prototype.move=function(t){var o,r,a,e,s,l=this;this.over||this.won||(a=this.getVector(t),e=this.buildTraversals(a),s=!1,this.prepareTiles(),e.x.forEach(function(n){e.y.forEach(function(t){var e,i;o={x:n,y:t},(r=l.grid.cellContent(o))&&(e=l.findFarthestPosition(o,a),(i=l.grid.cellContent(e.next))&&i.value===r.value&&!i.mergedFrom?((t=new Tile(e.next,2*r.value)).mergedFrom=[r,i],l.grid.insertTile(t),l.grid.removeTile(r),r.updatePosition(e.next),l.score+=t.value,2048===t.value&&(l.won=!0)):l.moveTile(r,e.farthest),l.positionsEqual(o,r)||(s=!0))})}),s&&(this.addRandomTile(),this.movesAvailable()||(this.over=!0),this.actuate()))},GameManager.prototype.getVector=function(t){return{0:{x:0,y:-1},1:{x:1,y:0},2:{x:0,y:1},3:{x:-1,y:0}}[t]},GameManager.prototype.buildTraversals=function(t){for(var e={x:[],y:[]},i=0;i<this.size;i++)e.x.push(i),e.y.push(i);return 1===t.x&&(e.x=e.x.reverse()),1===t.y&&(e.y=e.y.reverse()),e},GameManager.prototype.findFarthestPosition=function(t,e){for(var i;t={x:(i=t).x+e.x,y:i.y+e.y},this.grid.withinBounds(t)&&this.grid.cellAvailable(t););return{farthest:i,next:t}},GameManager.prototype.movesAvailable=function(){return this.grid.cellsAvailable()||this.tileMatchesAvailable()},GameManager.prototype.tileMatchesAvailable=function(){for(var t,e=0;e<this.size;e++)for(var i=0;i<this.size;i++)if(t=this.grid.cellContent({x:e,y:i}))for(var n=0;n<4;n++){var o=this.getVector(n),o={x:e+o.x,y:i+o.y},o=this.grid.cellContent(o);if(o&&o.value===t.value)return!0}return!1},GameManager.prototype.positionsEqual=function(t,e){return t.x===e.x&&t.y===e.y},Grid.prototype.build=function(){for(var t=0;t<this.size;t++)for(var e=this.cells[t]=[],i=0;i<this.size;i++)e.push(null)},Grid.prototype.randomAvailableCell=function(){var t=this.availableCells();if(t.length)return t[Math.floor(Math.random()*t.length)]},Grid.prototype.availableCells=function(){var n=[];return this.eachCell(function(t,e,i){i||n.push({x:t,y:e})}),n},Grid.prototype.eachCell=function(t){for(var e=0;e<this.size;e++)for(var i=0;i<this.size;i++)t(e,i,this.cells[e][i])},Grid.prototype.cellsAvailable=function(){return!!this.availableCells().length},Grid.prototype.cellAvailable=function(t){return!this.cellOccupied(t)},Grid.prototype.cellOccupied=function(t){return!!this.cellContent(t)},Grid.prototype.cellContent=function(t){return this.withinBounds(t)?this.cells[t.x][t.y]:null},Grid.prototype.insertTile=function(t){this.cells[t.x][t.y]=t},Grid.prototype.removeTile=function(t){this.cells[t.x][t.y]=null},Grid.prototype.withinBounds=function(t){return 0<=t.x&&t.x<this.size&&0<=t.y&&t.y<this.size},HTMLActuator.prototype.actuate=function(t,e){var i=this;window.requestAnimationFrame(function(){i.clearContainer(i.tileContainer),t.cells.forEach(function(t){t.forEach(function(t){t&&i.addTile(t)})}),i.updateScore(e.score),e.over&&i.message(!1),e.won&&i.message(!0)})},HTMLActuator.prototype.restart=function(){this.clearMessage()},HTMLActuator.prototype.clearContainer=function(t){for(;t.firstChild;)t.removeChild(t.firstChild)},HTMLActuator.prototype.addTile=function(t){var e=this,i=document.createElement('div'),n=t.previousPosition||{x:t.x,y:t.y};positionClass=this.positionClass(n);var o=['tile','tile-'+t.value,positionClass];this.applyClasses(i,o),i.textContent=t.value,t.previousPosition?window.requestAnimationFrame(function(){o[2]=e.positionClass({x:t.x,y:t.y}),e.applyClasses(i,o)}):t.mergedFrom?(o.push('tile-merged'),this.applyClasses(i,o),t.mergedFrom.forEach(function(t){e.addTile(t)})):(o.push('tile-new'),this.applyClasses(i,o)),this.tileContainer.appendChild(i)},HTMLActuator.prototype.applyClasses=function(t,e){t.setAttribute('class',e.join(' '))},HTMLActuator.prototype.normalizePosition=function(t){return{x:t.x+1,y:t.y+1}},HTMLActuator.prototype.positionClass=function(t){return'tile-position-'+(t=this.normalizePosition(t)).x+'-'+t.y},HTMLActuator.prototype.updateScore=function(t){this.clearContainer(this.scoreContainer);var e=t-this.score;this.score=t,this.scoreContainer.textContent=this.score,0<e&&((t=document.createElement('div')).classList.add('score-addition'),t.textContent='+'+e,this.scoreContainer.appendChild(t))},HTMLActuator.prototype.message=function(t){var e=t?'game-won':'game-over',t=t?'You win!':'Game over!';this.messageContainer.classList.add(e),this.messageContainer.getElementsByTagName('p')[0].textContent=t},HTMLActuator.prototype.clearMessage=function(){this.messageContainer.classList.remove('game-won','game-over')},KeyboardInputManager.prototype.on=function(t,e){this.events[t]||(this.events[t]=[]),this.events[t].push(e)},KeyboardInputManager.prototype.emit=function(t,e){t=this.events[t];t&&t.forEach(function(t){t(e)})},KeyboardInputManager.prototype.listen=function(){var n=this,o={38:0,39:1,40:2,37:3,75:0,76:1,74:2,72:3};document.addEventListener('keydown',function(t){var e=t.altKey||t.ctrlKey||t.metaKey||t.shiftKey,i=o[t.which];e||(void 0!==i&&(t.preventDefault(),n.emit('move',i)),32===t.which&&n.restart.bind(n)(t))}),document.getElementsByClassName('retry-button')[0].addEventListener('click',this.restart.bind(this));var e=[Hammer.DIRECTION_UP,Hammer.DIRECTION_RIGHT,Hammer.DIRECTION_DOWN,Hammer.DIRECTION_LEFT],t=document.getElementsByClassName('game-container')[0];Hammer(t,{drag_block_horizontal:!0,drag_block_vertical:!0}).on('swipe',function(t){t.gesture.preventDefault(),mapped=e.indexOf(t.gesture.direction),-1!==mapped&&n.emit('move',mapped)})},KeyboardInputManager.prototype.restart=function(t){t.preventDefault(),this.emit('restart')},Tile.prototype.savePosition=function(){this.previousPosition={x:this.x,y:this.y}},Tile.prototype.updatePosition=function(t){this.x=t.x,this.y=t.y};</script>
<script>
loadTitle();
function loadTitle(){
if (localStorage.Titlesave) {
document.title = localStorage.Titlesave;
}
}
loadIcon();
function loadIcon(){
if (localStorage.Iconsave) {
function changeFavicon(src) { var link = document.createElement('link'), oldLink = document.getElementById('dynamic-favicon'); link.id = 'dynamic-favicon'; link.rel = 'shortcut icon'; link.href = src; if (oldLink) { document.head.removeChild(oldLink);
} document.head.appendChild(link);}
changeFavicon(localStorage.Iconsave);
}
}
</script>
</body></html>