From 6503991f9a9fffcd5d48d2e7599a3e02b96d2ace Mon Sep 17 00:00:00 2001 From: Matt Kilens Date: Tue, 17 Oct 2017 22:23:10 -0500 Subject: [PATCH 1/3] cleaned up js --- static/script.js | 414 ++++++++++++++++++++--------------------------- 1 file changed, 179 insertions(+), 235 deletions(-) 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); From b7e34332c4217e5cf5600533b84cf3af7b9f0c11 Mon Sep 17 00:00:00 2001 From: Matt Kilens Date: Tue, 17 Oct 2017 22:52:14 -0500 Subject: [PATCH 2/3] moved all css to css file --- index.html | 215 ++++++++++++++++++----------------------------------- style.css | 114 ++++++++++++++++++++-------- 2 files changed, 153 insertions(+), 176 deletions(-) diff --git a/index.html b/index.html index 31240fd..8445806 100644 --- a/index.html +++ b/index.html @@ -1,150 +1,79 @@ - - - - + 2048 + + - -
-

- -2048 - - -

-
-
-

-Score Board - -

- -
-
-

-New Game -

- -
- - - -
-
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
-
-

Made By : Tushar Gupta
Get Code at : Github -

- - - - + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + + +
+
+
+ - - - - - - \ No newline at end of file diff --git a/style.css b/style.css index d2afa53..a85d846 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,88 @@ 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; +} +#game-status{ + display: inline-flex; + align-items: center; + margin-right: 100px; +} +#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; +} From 2423c92b48e4c7d4bd364ed6394100b8aa127e4a Mon Sep 17 00:00:00 2001 From: Matt Kilens Date: Tue, 17 Oct 2017 22:55:20 -0500 Subject: [PATCH 3/3] moved score and reload --- index.html | 22 ++++++++++------------ style.css | 5 ----- 2 files changed, 10 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 8445806..d4e9c6c 100644 --- a/index.html +++ b/index.html @@ -10,18 +10,6 @@

2048

-
-
-

- Score Board -

-
-
-

- New Game -

-
-
@@ -53,6 +41,11 @@
+
+

+ Score Board +

+
@@ -70,6 +63,11 @@
+
+

+ New Game +

+