Skip to content

Instantly share code, notes, and snippets.

@suyashgulati

suyashgulati/2048-js-lacksanimation.markdown

Forked from anonymous/2048-js-lacksanimation.markdown
Created November 25, 2017 18:20
Show Gist options
  • Save suyashgulati/2d441e0454b7a768014616ab58c161f5 to your computer and use it in GitHub Desktop.
Save suyashgulati/2d441e0454b7a768014616ab58c161f5 to your computer and use it in GitHub Desktop.
Download ZIP
2048 JS (#lacksAnimation)
Raw
index.html
<!-- <html>
<head>
<title>2048</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body> -->
<div class="upper"><button id="undo"><i class="fa fa-undo"></i></button>
<div class="heading">
<div class="title">2048</div>
<!-- <div class="score">0</div> -->
</div>
</div>
<div class="lower" id="lower">
<div class="outer" id="outer">
<div class="inner" data-value="0"></div>
<div class="inner" data-value="0"></div>
<div class="inner" data-value="0"></div>
<div class="inner" data-value="0"></div>
<div class="inner" data-value="0"></div>
<div class="inner" data-value="0"></div>
<div class="inner" data-value="0"></div>
<div class="inner" data-value="0"></div>
<div class="inner" data-value="0"></div>
<div class="inner" data-value="0"></div>
<div class="inner" data-value="0"></div>
<div class="inner" data-value="0"></div>
<div class="inner" data-value="0"></div>
<div class="inner" data-value="0"></div>
<div class="inner" data-value="0"></div>
<div class="inner" data-value="0"></div>
</div>
</div>
<!-- <script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js.js"></script>
</body>
</html> -->
Raw
script.js
var a = [
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]];
var prevStateStack = [];
var nowMerged = [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]];
$(function() {
startup();
var lower = document.getElementsByClassName("lower")[0];
lower.addEventListener('swl', e=>{
checkAndGo(37);
},false);
lower.addEventListener('swu', e=>{
checkAndGo(38);
},false);
lower.addEventListener('swr', e=>{
checkAndGo(39);
},false);
lower.addEventListener('swd', e=>{
checkAndGo(40);
},false);
$(document).keydown(e => {
var code = e.keyCode || e.which;
checkAndGo(code);
});
$("button#undo").on("click", e => {
// console.log(prevStateStack);
if (prevStateStack.length != 0) {
a = prevStateStack.pop();
DOMUpdate();
} else {
console.log("Cannot Undo more");
}
});
});
var checkAndGo = function(code){
$("div.inner").removeClass('newTile');
nowMerged = [[0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0], [0, 0, 0, 0]];
prevStateStack.push($.extend(true, [], a));
switch (code) {
case 37:
left();
break;
case 38:
up();
break;
case 39:
right();
break;
case 40:
down();
break;
}
var prev = prevStateStack[prevStateStack.length - 1];
if (!prev.equals(a)) {
getNewTiles().then(DOMUpdate);
} else {
prevStateStack.pop();
}
}
var startup = () => {
$(".outer").height($(".outer").width());
$(window).resize(function() {
$(".outer").height($(".outer").width());
});
// DOMUpdate();
getNewTiles().then(DOMUpdate);
getNewTiles().then(DOMUpdate);
};
var DOMUpdate = (data = {x: -1, y:-1, val:-1}) => {
$(".inner").each((i, val) => {
$(val).html(a[Math.floor(i / 4)][i % 4]);
$(val).attr("data-value", ""+ a[Math.floor(i / 4)][i % 4]);
// $(val).css("top", ""+ Math.floor(i / 4)*25 +"%");
// $(val).css("left", ""+ (i % 4)*25 +"%");
});
// $(".score").html(a.sumAll());
$("div.inner:nth-child("+(data.x*4 + data.y + 1)+")").addClass('newTile');
return new Promise((resolve, reject) => {
resolve("DOMUpdate Done");
});
};
var getNewTiles = function(data = {}) {
var x = 0;
var y = 0;
var val = -1;
while (val != 0) {
x = random();
y = random();
val = a[x][y];
}
a[x][y] = 2 * random(1, 2);
// console.log(data);
return new Promise((resolve, reject) => {
resolve({ x: x, y: y, val: a[x][y] });
});
};
var random = function(min = 0, max = 3) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
var left = () => {
// console.log('left');
for (var j = 1; j < 4; j++) {
//column loop
// var j=1;
for (var i = 0; i < 4; i++) {
//row loop
// console.log('i, j', i, j, 'a[i][j]', a[i][j]);
var val = a[i][j];
if (val != 0) {
var k = j - 1;
for (; k >= 0 && a[i][k] == 0; k--) {}
a[i][j] = 0;
if (k == -1) {
a[i][0] = val;
// console.log('if1');
// nowMerged[i][0] = 1;
} else if (a[i][k] == val && nowMerged[i][k]!=1) {
a[i][k] *= 2;
nowMerged[i][k] = 1;
// console.log('if2');
} else {
a[i][k + 1] = val;
// nowMerged[i][k + 1] = 1;
// console.log('if3');
}
} else {
}
}
}
};
var up = () => {
// console.log('up');
for (var i = 1; i < 4; i++) {
//row loop
for (var j = 0; j < 4; j++) {
//column loop
var k = i - 1;
for (; k >= 0 && a[k][j] == 0; k--) {}
var val = a[i][j];
a[i][j] = 0;
// console.log('i,j',i,j);
// console.log('k',k);
if (k == -1) {
a[0][j] = val;
// console.log('if1');
} else if (a[k][j] == val && nowMerged[k][j]!=1) {
a[k][j] *= 2;
nowMerged[k][j]=1;
// console.log('if2');
} else {
a[k + 1][j] = val;
// console.log('if3');
}
}
}
};
var right = () => {
// console.log('right');
for (var j = 2; j >= 0; j--) {
//column loop
// var j=1;
for (var i = 0; i < 4; i++) {
//row loop
// console.log('i, j', i, j, 'a[i][j]', a[i][j]);
var k = j + 1;
for (; k < 4 && a[i][k] == 0; k++) {}
var val = a[i][j];
a[i][j] = 0;
if (k == 4) {
a[i][3] = val;
// console.log('if1');
} else if (a[i][k] == val && nowMerged[i][k]!=1) {
a[i][k] *= 2;
nowMerged[i][k]=1;
// console.log('if2');
} else {
a[i][k - 1] = val;
// console.log('if3');
}
}
}
};
var down = () => {
// console.log('down');
for (var i = 2; i >= 0; i--) {
//row loop
for (var j = 0; j < 4; j++) {
//column loop
var k = i + 1;
for (; k < 4 && a[k][j] == 0; k++) {}
var val = a[i][j];
a[i][j] = 0;
// console.log('i,j',i,j);
// console.log('k',k);
if (k == 4) {
a[3][j] = val;
// console.log('if1');
} else if (a[k][j] == val && nowMerged[k][j]!=1) {
a[k][j] *= 2;
       nowMerged[k][j]=1;
// console.log('if2');
} else {
a[k - 1][j] = val;
// console.log('if3');
}
}
}
};
Array.prototype.equals = function(array) {
// if the other array is a falsy value, return
if (!array) return false;
// compare lengths - can save a lot of time
if (this.length != array.length) return false;
for (var i = 0, l = this.length; i < l; i++) {
// Check if we have nested arrays
if (this[i] instanceof Array && array[i] instanceof Array) {
// recurse into the nested arrays
if (!this[i].equals(array[i])) return false;
} else if (this[i] != array[i]) {
// Warning - two different object instances will never be equal: {x:20} != {x:20}
return false;
}
}
return true;
};
// Hide method from for-in loops
Object.defineProperty(Array.prototype, "equals", { enumerable: false });
Array.prototype.sumAll = function() {
var sum = 0;
for (var i = 0, l = this.length; i < l; i++) {
// Check if we have nested arrays
if (this[i] instanceof Array) {
// recurse into the nested arrays
sum += this[i].sumAll();
} else {
// Warning - two different object instances will never be equal: {x:20} != {x:20}
sum+=this[i];
}
}
return sum;
};
// Hide method from for-in loops
Object.defineProperty(Array.prototype, "sumAll", { enumerable: false });
(function(D){
var M=Math,abs=M.abs,max=M.max,
ce,m,th=20,t,sx,sy,ex,ey,l,
f={
touchstart:function(e){
t=e.touches[0];
sx=t.pageX;
sy=t.pageY
},
touchmove:function(e){
m=1;
t=e.touches[0];
ex=t.pageX;
ey=t.pageY
},
touchend:function(e){
ce=D.createEvent("CustomEvent");
ce.initCustomEvent(m?(
max(sx=abs(ex-=sx),sy=abs(ey-=sy))>th?
sx>sy?ex<0?'swl':'swr':ey<0?'swu':'swd':'fc'
):'fc',true,true,e.target);
e.target.dispatchEvent(ce);
m=0
},
touchcancel:function(e){
m=0
}
}
for(l in f)D.addEventListener(l,f[l],false)
})(document);
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Raw
style.scss
$text-color: #776e65;
$bright-text-color: #f9f6f2;
$grid-color: #bbada0;
$tile-color: #eee4da;
$tile-gold-color: #edc22e;
$tile-gold-glow-color: lighten($tile-gold-color, 15%);
$background: #faf8ef;
* {
box-sizing: border-box;
// border: 1px solid red;
}
body,
html {
height: 100%;
margin: 0;
background: $background;
}
.upper {
height: 30%;
position: relative;
div.heading {
color: $text-color;
font-size: 18px;
padding: 40px;
position: relative;
div.title {
font-size: 80px;
font-weight: bold;
margin: 0;
display: block;
float: left;
}
div.score {
float: right;
padding: 30px;
margin-right: 20px;
background: $text-color;
border-radius: 10px;
color: white;
position: relative;
// font-size: 25px;
&:after {
content: "Score";
position: absolute;
width: 100%;
top: 10px;
left: 12px;
}
}
}
button#undo {
background: $tile-color;
position: absolute;
top: 0;
right: 0;
border: $grid-color 10px solid;
// border-radius: 5px 0px 5px 5px;
border-radius: 50%;
font-size: 25px;
z-index: 1000;
i {
color: grey;
}
}
}
.lower {
height: 70%;
position: relative;
}
.outer {
padding: 10px;
border-radius: 5px;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
grid-gap: 5px;
background: $grid-color;
}
@media (min-width: 400px) {
.outer {
max-width: 100%;
}
}
@media (min-width: 401px) {
.outer {
max-width: 400px;
}
}
.inner {
border-radius: 5px;
position: relative;
text-align: center;
display: flex;
justify-content: center;
flex-direction: column;
background: rgba(238, 228, 218, 0.35);
color: $text-color;
font-size: 20px;
font-weight: bold;
// -webkit-transition: all 0.5s ease;
// -moz-transition: all 0.5s ease;
// -ms-transition: all 0.5s ease;
// transition: all 0.5s ease;
// animation: newTile 0.5s ease-out 0s;
}
.inner.newTile{
// // transform: scale(1.2);
animation: newTile 0.5s ease-out 0s;
}
@keyframes newTile {
0%, 100% {transform: scale(1)}
50% {transform: scale(1.2)}
}
// .inner span {
// position: absolute;
// top: 0;
// font-size: small;
// border: none;
// }
.inner[data-value="2048"] {
color: #f9f6f2;
background: #edc22e;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.55556), inset 0 0 0 1px rgba(255, 255, 255, 0.33333);
font-size: 35px;
}
.inner[data-value="1024"] {
color: #f9f6f2;
background: #edc53f;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.47619), inset 0 0 0 1px rgba(255, 255, 255, 0.28571);
font-size: 35px;
}
.inner[data-value="512"] {
color: #f9f6f2;
background: #edc850;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.39683), inset 0 0 0 1px rgba(255, 255, 255, 0.2381);
font-size: 45px;
}
.inner[data-value="256"] {
color: #f9f6f2;
background: #edcc61;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.31746), inset 0 0 0 1px rgba(255, 255, 255, 0.19048);
font-size: 45px;
}
.inner[data-value="2"] {
background: #eee4da;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);
}
.inner[data-value="4"] {
background: #ede0c8;
box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0), inset 0 0 0 1px rgba(255, 255, 255, 0);
}
.inner[data-value="8"] {
color: #f9f6f2;
background: #f2b179;
}
.inner[data-value="16"] {
color: #f9f6f2;
background: #f59563;
}
.inner[data-value="32"] {
color: #f9f6f2;
background: #f67c5f;
}
.inner[data-value="64"] {
color: #f9f6f2;
background: #f65e3b;
}
.inner[data-value="128"] {
color: #f9f6f2;
background: #edcf72;
// box-shadow: 0 0 30px 10px rgba(243, 215, 116, 0.2381), inset 0 0 0 1px rgba(255, 255, 255, 0.14286);
font-size: 45px;
}
Raw
styles
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment