-
Made By : Tushar Gupta
Get Code at : Github
-
-
-
-
-
+
+
+
+
+
+ |
+ |
+ |
+ |
+
+
+ |
+ |
+ |
+ |
+
+
+ |
+ |
+ |
+ |
+
+
+ |
+ |
+ |
+ |
+
+
+
+
+
+
+
+ | |
+  |
+ |
+
+
+  |
+ |
+  |
+
+
+ |
+  |
+ |
+
+
+
+
+
+
-
-
-
-
-
-
\ No newline at end of file
diff --git a/static/script.js b/static/script.js
index 3583ed7..6a7b507 100644
--- a/static/script.js
+++ b/static/script.js
@@ -3,50 +3,48 @@ var getrandom = function()
return Math.floor(Math.random()*(3-0+1)+0);
}
-
-
-
-
var assign = function(){
- var v = document.querySelector("#table");
+ var v = document.querySelector("#table");
var randii=getrandom();
-var randjj=getrandom();
-if(v.rows[randii].cells[randjj].innerHTML==" ") {
- v.rows[randii].cells[randjj].innerHTML="2";
-}
-else{
- assign();
+ var randjj=getrandom();
+ if(v.rows[randii].cells[randjj].innerHTML==" ") {
+ v.rows[randii].cells[randjj].innerHTML="2";
+ }
+ else{
+ assign();
-}//switching colors
+ }
+ //switching colors
for(var i=0 ; i<=3 ; i++){
for(var j=0 ; j<=3 ; j++){
-
+
if(v.rows[i].cells[j].innerHTML!=" "){
- var mycolor=v.rows[i].cells[j].innerHTML;
- switch(mycolor){
- case "2": v.rows[i].cells[j].style.backgroundColor="#EEE4DA";
- break;
- case "4":v.rows[i].cells[j].style.backgroundColor="#EDE0C8"
- break;
- case "8":v.rows[i].cells[j].style.backgroundColor="#F2B179"
- break;
- case "16":v.rows[i].cells[j].style.backgroundColor="#F59563"
- break;
- case "32":v.rows[i].cells[j].style.backgroundColor="#F67C5F"
- break;
- case "64":v.rows[i].cells[j].style.backgroundColor="#F65E3B"
- break
- default:
- v.rows[i].cells[j].style.backgroundColor="#CDC1B4"
-
-
-
-
-
-}
-
+ var mycolor=v.rows[i].cells[j].innerHTML;
+ switch(mycolor){
+ case "2":
+ v.rows[i].cells[j].style.backgroundColor="#EEE4DA";
+ break;
+ case "4":
+ v.rows[i].cells[j].style.backgroundColor="#EDE0C8";
+ break;
+ case "8":
+ v.rows[i].cells[j].style.backgroundColor="#F2B179";
+ break;
+ case "16":
+ v.rows[i].cells[j].style.backgroundColor="#F59563";
+ break;
+ case "32":
+ v.rows[i].cells[j].style.backgroundColor="#F67C5F";
+ break;
+ case "64":
+ v.rows[i].cells[j].style.backgroundColor="#F65E3B";
+ break
+ default:
+ v.rows[i].cells[j].style.backgroundColor="#CDC1B4"
+ }
+
}
else
{
@@ -54,10 +52,8 @@ else{
}
}
}
-
-
-
}
+
var newg=function(){
console.log("in");
window.location.reload(false);
@@ -67,15 +63,13 @@ var seperate = function(i){
myrand=getrandom();
if(myrand==i){
seperate();
-
-
}
console.log("myrand = ",myrand );
console.log("given = ",i );
return myrand;
}
-//called first
+//called first
function startthis(){
var v = document.querySelector("#table");
var s = document.querySelector("#score");
@@ -86,7 +80,6 @@ function startthis(){
var right=k.getElementsByTagName("td")[5];
var down=k.getElementsByTagName("td")[7];
-
s.innerHTML=0;
var randi= getrandom();
@@ -95,36 +88,31 @@ function startthis(){
var randj2= seperate(randj);
for(var i=0;i<=3;i++){
for(var j=0;j<=3;j++){
- v.rows[i].cells[j].innerHTML = " ";
-
+ v.rows[i].cells[j].innerHTML = " ";
}
}
- var tr=v.rows[randi].cells[randj].innerHTML="2";
- v.rows[randi].cells[randj].style.backgroundColor="#EEE4DA";
- var td=v.rows[randi2].cells[randj2].innerHTML="4";
- v.rows[randi2].cells[randj2].style.backgroundColor="#EDE0C8";
-
- r.addEventListener('click' ,newg);
- up.addEventListener('click' ,function(){
- makemove(randi,randj,"up")
- });
- down.addEventListener('click' ,function(){
- makemove(randi,randj,"down")
- });
- left.addEventListener('click' ,function(){
- makemove(randi,randj,"left")
- });
- right.addEventListener('click' ,function(){
- makemove(randi,randj,"right")
- });
+ var tr=v.rows[randi].cells[randj].innerHTML="2";
+ v.rows[randi].cells[randj].style.backgroundColor="#EEE4DA";
+ var td=v.rows[randi2].cells[randj2].innerHTML="4";
+ v.rows[randi2].cells[randj2].style.backgroundColor="#EDE0C8";
+
+ r.addEventListener('click' ,newg);
+ up.addEventListener('click' ,function(){
+ makemove(randi,randj,"up")
+ });
+ down.addEventListener('click' ,function(){
+ makemove(randi,randj,"down")
+ });
+ left.addEventListener('click' ,function(){
+ makemove(randi,randj,"left")
+ });
+ right.addEventListener('click' ,function(){
+ makemove(randi,randj,"right")
+ });
document.addEventListener("keydown", function(){
makemove(randi,randj);
});
-
-
-
-
}
var print = function(){
@@ -135,230 +123,186 @@ var makemove = function(i,j,k){
var v = document.querySelector("#table");
var s = document.querySelector("#score");
-
console.log(event)
-
-
-if(event.keyCode === 40 || k==="down"){
- console.log("in down");
- console.log("i = ", i);
- console.log("j = ", j);
-console.log(v.rows[i].cells[j].innerHTML);
-console.log("this, innerHTML = ", this.innerHTML);
-
-for(var l=3 ; l>=0 ; l--){ //Just did some work with replacing random variable on only a blank space and down is almost complete..
- for(var k=3 ; k>=0 ; k--){
- if(v.rows[l].cells[k].innerHTML!=" "){
-
-
- movedown(l,k,v,s);
-
-
-
- }}
-
-}
-
-
-assign(v);
- }
-
-if(event.keyCode == 38 || k==="up"){
- console.log("in up");
-for(var l=0 ; l<=3 ; l++){ //Just did some work with replacing random variable on only a blank space and down is almost complete..
- for(var k=0 ; k<=3 ; k++){
- if(v.rows[l].cells[k].innerHTML!=" "){
- console.log("CALLED IT ");
- console.log("here l" , l);
- console.log("here k" , k);
-
- moveup(l,k,v,s);
-
-
- }}
-
-}
-
-assign(v);
-
+ if(event.keyCode === 40 || k==="down"){
+ console.log("in down");
+ console.log("i = ", i);
+ console.log("j = ", j);
+ console.log(v.rows[i].cells[j].innerHTML);
+ console.log("this, innerHTML = ", this.innerHTML);
+
+ for(var l=3 ; l>=0 ; l--){ //Just did some work with replacing random variable on only a blank space and down is almost complete..
+ for(var k=3 ; k>=0 ; k--){
+ if(v.rows[l].cells[k].innerHTML!=" "){
+ movedown(l,k,v,s);
+ }
+ }
+ }
+ assign(v);
}
+ if(event.keyCode == 38 || k==="up"){
+ console.log("in up");
+ for(var l=0 ; l<=3 ; l++){ //Just did some work with replacing random variable on only a blank space and down is almost complete..
+ for(var k=0 ; k<=3 ; k++){
+ if(v.rows[l].cells[k].innerHTML!=" "){
+ console.log("CALLED IT ");
+ console.log("here l" , l);
+ console.log("here k" , k);
+
+ moveup(l,k,v,s);
+ }
+ }
+ }
+ assign(v);
+ }
-if(event.keyCode == 39 || k==="right"){
- console.log("in right");
- for(var l=3 ; l>=0 ; l--){ //Just did some work with replacing random variable on only a blank space and down is almost complete..
- for(var k=3 ; k>=0 ; k--){
- if(v.rows[l].cells[k].innerHTML!=" "){
-
-
- moveright(l,k,v,s);
-
-
- }}
-
-}
-
-assign(v);
-
-
-}
-
+ if(event.keyCode == 39 || k==="right"){
+ console.log("in right");
+ for(var l=3 ; l>=0 ; l--){ //Just did some work with replacing random variable on only a blank space and down is almost complete..
+ for(var k=3 ; k>=0 ; k--){
+ if(v.rows[l].cells[k].innerHTML!=" "){
+ moveright(l,k,v,s);
+ }
+ }
+ }
-if(event.keyCode == 37 || k==="left"){
- console.log("in left");
- for(var l=0 ; l<=3 ; l++){ //Just did some work with replacing random variable on only a blank space and down is almost complete..
- for(var k=0 ; k<=3 ; k++){
- if(v.rows[l].cells[k].innerHTML!=" "){
-
+ assign(v);
- moveleft(l,k,v,s);
+ }
+ if(event.keyCode == 37 || k==="left"){
+ console.log("in left");
+ for(var l=0 ; l<=3 ; l++){ //Just did some work with replacing random variable on only a blank space and down is almost complete..
+ for(var k=0 ; k<=3 ; k++){
+ if(v.rows[l].cells[k].innerHTML!=" "){
+ moveleft(l,k,v,s);
+ }
+ }
- }}
+ }
+ assign(v);
+ }
}
-assign(v);
-
-
-
-
-}}
-
var movedown=function(i,j,v,s){
while(i!=3){
console.log("I" , i);
console.log("J", j);
-
- if(v.rows[i].cells[j].innerHTML == v.rows[i+1].cells[j].innerHTML){
- console.log("in if");
- v.rows[i+1].cells[j].innerHTML = parseInt(v.rows[i].cells[j].innerHTML) + parseInt(v.rows[i+1].cells[j].innerHTML);
- v.rows[i].cells[j].innerHTML=" ";
- s.innerHTML=parseInt(s.innerHTML) + Number(v.rows[i+1].cells[j].innerHTML) ;
- break;
- console.log("moved");
- }
- else if(v.rows[i+1].cells[j].innerHTML == " "){
- v.rows[i+1].cells[j].innerHTML=v.rows[i].cells[j].innerHTML ;
- v.rows[i].cells[j].innerHTML=" ";
- console.log("replaced");}
-
-
+ if(v.rows[i].cells[j].innerHTML == v.rows[i+1].cells[j].innerHTML){
+ console.log("in if");
+ v.rows[i+1].cells[j].innerHTML = parseInt(v.rows[i].cells[j].innerHTML) + parseInt(v.rows[i+1].cells[j].innerHTML);
+ v.rows[i].cells[j].innerHTML=" ";
+ s.innerHTML=parseInt(s.innerHTML) + Number(v.rows[i+1].cells[j].innerHTML) ;
+ break;
+ console.log("moved");
-
- i++;
-}
+ }
+ else if(v.rows[i+1].cells[j].innerHTML == " "){
+ v.rows[i+1].cells[j].innerHTML=v.rows[i].cells[j].innerHTML ;
+ v.rows[i].cells[j].innerHTML=" ";
+ console.log("replaced");
+ }
+
+ i++;
+ }
}
var moveup = function(i , j, v,s){
-while(i!=0){
+ while(i!=0){
console.log("I" , i);
-
- if(v.rows[i].cells[j].innerHTML == v.rows[i-1].cells[j].innerHTML){
- console.log("in if");
- v.rows[i-1].cells[j].innerHTML = parseInt(v.rows[i].cells[j].innerHTML) + parseInt(v.rows[i-1].cells[j].innerHTML);
- v.rows[i].cells[j].innerHTML=" ";
- s.innerHTML=parseInt(s.innerHTML) + Number(v.rows[i-1].cells[j].innerHTML);
- break;
- console.log("moved");
- }
- else{
- if(v.rows[i-1].cells[j].innerHTML==" "){
- v.rows[i-1].cells[j].innerHTML=v.rows[i].cells[j].innerHTML ;
- v.rows[i].cells[j].innerHTML=" ";}
+ if(v.rows[i].cells[j].innerHTML == v.rows[i-1].cells[j].innerHTML){
+ console.log("in if");
+ v.rows[i-1].cells[j].innerHTML = parseInt(v.rows[i].cells[j].innerHTML) + parseInt(v.rows[i-1].cells[j].innerHTML);
+ v.rows[i].cells[j].innerHTML=" ";
+ s.innerHTML=parseInt(s.innerHTML) + Number(v.rows[i-1].cells[j].innerHTML);
+ break;
+ console.log("moved");
+ }
else{
- v.rows[i].cells[j].innerHTML = v.rows[i].cells[j].innerHTML;
+ if(v.rows[i-1].cells[j].innerHTML==" "){
+ v.rows[i-1].cells[j].innerHTML=v.rows[i].cells[j].innerHTML ;
+ v.rows[i].cells[j].innerHTML=" ";
+ }
+ else{
+ v.rows[i].cells[j].innerHTML = v.rows[i].cells[j].innerHTML;
+ }
+ console.log("replaced");
}
- console.log("replaced");
+ i--;
}
- i--;
-}
-
-
-
-
-
}
var moveright = function(i ,j,v,s){
while(j!=3){
console.log("I" , i);
-
- if(v.rows[i].cells[j].innerHTML == v.rows[i].cells[j+1].innerHTML){
- console.log("in if");
- v.rows[i].cells[j+1].innerHTML = parseInt(v.rows[i].cells[j].innerHTML) + parseInt(v.rows[i].cells[j+1].innerHTML);
- v.rows[i].cells[j].innerHTML=" ";
- s.innerHTML=parseInt(s.innerHTML) + Number(v.rows[i].cells[j+1].innerHTML);
- break;
- console.log("moved");
- }
- else if(v.rows[i].cells[j+1].innerHTML == " "){
- v.rows[i].cells[j+1].innerHTML=v.rows[i].cells[j].innerHTML ;
- v.rows[i].cells[j].innerHTML=" ";
- console.log("replaced");}
- j++;
-}
+ if(v.rows[i].cells[j].innerHTML == v.rows[i].cells[j+1].innerHTML){
+ console.log("in if");
+ v.rows[i].cells[j+1].innerHTML = parseInt(v.rows[i].cells[j].innerHTML) + parseInt(v.rows[i].cells[j+1].innerHTML);
+ v.rows[i].cells[j].innerHTML=" ";
+ s.innerHTML=parseInt(s.innerHTML) + Number(v.rows[i].cells[j+1].innerHTML);
+ break;
+ console.log("moved");
+ }
+ else if(v.rows[i].cells[j+1].innerHTML == " "){
+ v.rows[i].cells[j+1].innerHTML=v.rows[i].cells[j].innerHTML ;
+ v.rows[i].cells[j].innerHTML=" ";
+ console.log("replaced");
+ }
+
+ j++;
+ }
}
var moveleft = function(i , j , v,s){
while(j!=0){
console.log("I" , i);
-
- if(v.rows[i].cells[j].innerHTML == v.rows[i].cells[j-1].innerHTML){
- console.log("in if");
- v.rows[i].cells[j-1].innerHTML = parseInt(v.rows[i].cells[j].innerHTML) + parseInt(v.rows[i].cells[j-1].innerHTML);
- v.rows[i].cells[j].innerHTML=" ";
- s.innerHTML=parseInt(s.innerHTML) + Number(v.rows[i].cells[j-1].innerHTML);
- break;
- console.log("moved");
- }
- else if(v.rows[i].cells[j-1].innerHTML == " "){
- v.rows[i].cells[j-1].innerHTML=v.rows[i].cells[j].innerHTML ;
- v.rows[i].cells[j].innerHTML=" ";
- console.log("replaced");}
-
- j--;
-}
+ if(v.rows[i].cells[j].innerHTML == v.rows[i].cells[j-1].innerHTML){
+ console.log("in if");
+ v.rows[i].cells[j-1].innerHTML = parseInt(v.rows[i].cells[j].innerHTML) + parseInt(v.rows[i].cells[j-1].innerHTML);
+ v.rows[i].cells[j].innerHTML=" ";
+ s.innerHTML=parseInt(s.innerHTML) + Number(v.rows[i].cells[j-1].innerHTML);
+ break;
+ console.log("moved");
+ }
+ else if(v.rows[i].cells[j-1].innerHTML == " "){
+ v.rows[i].cells[j-1].innerHTML=v.rows[i].cells[j].innerHTML ;
+ v.rows[i].cells[j].innerHTML=" ";
+ console.log("replaced");
+ }
+ j--;
+ }
}
var gameover=function(){
var k = 0;
-
var v = document.querySelector("#table");
for(var i=0 ; i<=3 ; i++){
- for(var j =0 ; j<=3 ; j++){
- if(v.rows[i].cells[j].innerHTML!=v.rows[i+1].cells[j].innerHTML && v.rows[i].cells[j].innerHTML!=v.rows[i].cells[j+1].innerHTML
- && v.rows[i+1].cells[j].innerHTML!=" " && v.rows[i].cells[j+1].innerHTML!=" " ){
- k=k+1;
- console.log("k = ", k);
- }
- }
-
+ for(var j =0 ; j<=3 ; j++){
+ if(v.rows[i].cells[j].innerHTML!=v.rows[i+1].cells[j].innerHTML && v.rows[i].cells[j].innerHTML!=v.rows[i].cells[j+1].innerHTML
+ && v.rows[i+1].cells[j].innerHTML!=" " && v.rows[i].cells[j+1].innerHTML!=" " ){
+ k=k+1;
+ console.log("k = ", k);
+ }
+ }
}
if(k==9){
console.log("GAME OVER");
}
-
}
-
-
-
-
-
-
-
window.addEventListener('load' , startthis);
diff --git a/style.css b/style.css
index d2afa53..32b69e5 100644
--- a/style.css
+++ b/style.css
@@ -1,23 +1,19 @@
#table td{
height: 130px;
width: 130px;
- font-size:40px;
- text-align: center;
+ font-size:40px;
+ text-align: center;
padding: 10px;
border: 8px solid grey;
-
-
}
-
#table tr {
margin: 0px;
padding: 10px;
font-size:40px;
- text-align: center;
+ text-align: center;
border: 8px solid grey;
}
-
#table {
border-radius: 20px;
@@ -25,36 +21,83 @@
background: #CDC1B4;
}
#first{
-border-top-left-radius: 10px;
-}
-
-#back{
- width: 200px;
- height: 100px;
- margin: 10;
- text-align: center;
- border-radius: 10px;
- border: 5px solid grey;
- background: #BBADA0
-}
-#back2{
- width: 150px;
- height: 70px;
- margin: 10;
- text-align: center;
- border-radius: 10px;
- border: 5px solid grey;
- background: #BBADA0
+ border-top-left-radius: 10px;
}
-
#keys .k{
height: 50px;
- font-size:30px;
- text-align: center;
+ font-size:30px;
+ text-align: center;
padding: 10px;
border: 8px solid grey;
-
-
}
-
+#header{
+ text-align: -webkit-center;
+}
+#title{
+ font-size: 60px;
+ color: grey;
+ padding: 10px;
+ margin-bottom: 15px;
+ font-weight: bold;
+}
+#score{
+ font-size: 33px;
+ text-align: center;
+ color: white;
+ font-family: sans-serif;
+}
+#reload{
+ font-size: 33px;
+ text-align: center;
+ color: white;
+ font-family: sans-serif;
+}
+#game{
+ display: flex;
+ align-items: center;
+ /* margin-left: 307px; */
+ justify-content: center;
+}
+#game-board{
+ padding: 18px;
+}
+#top-left-corner{
+ border-top-left-radius: 20px;
+}
+#top-right-corner{
+ border-top-right-radius: 20px;
+}
+#bottom-left-corner{
+ border-bottom-left-radius: 20px;
+}
+#bottom-right-corner{
+ border-bottom-right-radius: 20px;
+}
+#controls{
+ padding: 30px;
+}
+#footer{
+ display: flex ;
+ justify-content: center;
+}
+#footer-text{
+ font-size: 25px;
+ text-align: end;
+ color: gray;
+ font-family: sans-serif;
+ padding: 10px;
+}
+.status-box{
+ width: 200px;
+ height: 100px;
+ margin: 10;
+ text-align: center;
+ border-radius: 10px;
+ border: 5px solid grey;
+ background: #BBADA0
+}
+.arrow{
+ width: 40px;
+ height: 40px;
+}