API tools faq
paste
ahmed0saber

2048 Puzzle in HTML CSS JS

ahmed0saber
Apr 3rd, 2021
82
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 11.49 KB | None | 0 0
raw download clone embed print report
  1. <html>
  2. <head>
  3. <title>2048 puzzle</title>
  4. <style>
  5. table , tr , td{
  6. border : 2px solid black ;
  7. border-radius: 5px;
  8. }
  9. input{
  10.   width: 50px;
  11.   height: 50px;
  12.   text-align: center;
  13.   font-size: 12px;
  14.   border-radius: 5px;
  15. }
  16. button{
  17.   border-radius: 5px;
  18.   background-color: #9999FF;
  19. }
  20. button:hover{
  21.   background-color: #4444FF;
  22.   border-radius: 8px;
  23.   transition-duration: 700ms;
  24. }
  25. table{
  26.   background-color: #CCCCEE;
  27. }
  28. div{
  29.   width: 250px;
  30.   height: 400px;
  31.   box-shadow: 5px 5px 10px 5px #AAAAAA;
  32.   text-align: center;
  33.   border-radius: 10px;
  34.   position: absolute;
  35.   top: 10%;
  36.   left: 20%;
  37.   background-color: #BBBBCC;
  38. }
  39. </style>
  40. <script>
  41. var _array=[] ;
  42. var i , rand , n;
  43. function new_turn(){
  44.   //get a random number from 0 to 15
  45.   rand=Math.floor((Math.random() * 16));
  46.   //then put 2 in its cell
  47.   if(_array[rand]<2){
  48.   _array[rand]=2;
  49.   document.getElementById(rand.toString()).value=2;}
  50.   else{new_turn();}
  51.   //colors
  52.   for(i=0;i<16;i++){
  53.     if(_array[i]=="")
  54.       {document.getElementById(i.toString()).style.backgroundColor="#FFFFFF";}
  55.     if(_array[i]==2)
  56.       {document.getElementById(i.toString()).style.backgroundColor="#EEEEFF";}
  57.     if(_array[i]==4)
  58.       {document.getElementById(i.toString()).style.backgroundColor="#DDDDFF";}
  59.     if(_array[i]==8)
  60.       {document.getElementById(i.toString()).style.backgroundColor="#CCCCFF";}
  61.     if(_array[i]==16)
  62.       {document.getElementById(i.toString()).style.backgroundColor="#BBBBFF";}
  63.     if(_array[i]==32)
  64.       {document.getElementById(i.toString()).style.backgroundColor="#AAAAFF";}
  65.     if(_array[i]==64)
  66.       {document.getElementById(i.toString()).style.backgroundColor="#9999FF";}
  67.     if(_array[i]==128)
  68.       {document.getElementById(i.toString()).style.backgroundColor="#8888FF";}
  69.     if(_array[i]==256)
  70.       {document.getElementById(i.toString()).style.backgroundColor="#7777FF";}
  71.     if(_array[i]==512)
  72.       {document.getElementById(i.toString()).style.backgroundColor="#6666FF";}
  73.     if(_array[i]==1024)
  74.       {document.getElementById(i.toString()).style.backgroundColor="#5555FF";}
  75.     if(_array[i]==2048)
  76.       {document.getElementById(i.toString()).style.backgroundColor="#4444FF";}
  77.   }
  78. }
  79. function new_game(){
  80.   //let all cells equal zero
  81.   for(i=0;i<16;i++){
  82.   _array[i]="";
  83.   document.getElementById(i.toString()).value="";}
  84.   new_turn();
  85. }
  86. function to_right(){
  87.   for(i=2;i>=0;i--){
  88.     for(n=i;n<3;n++){
  89.       if(_array[n+1]<2){
  90.         _array[n+1]=_array[n];
  91.         _array[n]="";
  92.         document.getElementById(n.toString()).value="";
  93.         document.getElementById((n+1).toString()).value=_array[n+1];
  94.       }
  95.       if((_array[n+1]==_array[n])&(_array[n+1]>0)){
  96.         _array[n+1]=_array[n] + _array[n+1];
  97.         _array[n]="";
  98.         document.getElementById(n.toString()).value="";
  99.         document.getElementById((n+1).toString()).value=_array[n+1];
  100.       }
  101.     }
  102.   }
  103.   for(i=6;i>=4;i--){
  104.     for(n=i;n<7;n++){
  105.       if(_array[n+1]<2){
  106.         _array[n+1]=_array[n];
  107.         _array[n]="";
  108.         document.getElementById(n.toString()).value="";
  109.         document.getElementById((n+1).toString()).value=_array[n+1];
  110.       }
  111.       if((_array[n+1]==_array[n])&(_array[n+1]>0)){
  112.         _array[n+1]=_array[n] + _array[n+1];
  113.         _array[n]="";
  114.         document.getElementById(n.toString()).value="";
  115.         document.getElementById((n+1).toString()).value=_array[n+1];
  116.       }
  117.     }
  118.   }
  119.   for(i=10;i>=8;i--){
  120.     for(n=i;n<11;n++){
  121.       if(_array[n+1]<2){
  122.         _array[n+1]=_array[n];
  123.         _array[n]="";
  124.         document.getElementById(n.toString()).value="";
  125.         document.getElementById((n+1).toString()).value=_array[n+1];
  126.       }
  127.       if((_array[n+1]==_array[n])&(_array[n+1]>0)){
  128.         _array[n+1]=_array[n] + _array[n+1];
  129.         _array[n]="";
  130.         document.getElementById(n.toString()).value="";
  131.         document.getElementById((n+1).toString()).value=_array[n+1];
  132.       }
  133.     }
  134.   }
  135.   for(i=14;i>=12;i--){
  136.     for(n=i;n<15;n++){
  137.       if(_array[n+1]<2){
  138.         _array[n+1]=_array[n];
  139.         _array[n]="";
  140.         document.getElementById(n.toString()).value="";
  141.         document.getElementById((n+1).toString()).value=_array[n+1];
  142.       }
  143.       if((_array[n+1]==_array[n])&(_array[n+1]>0)){
  144.         _array[n+1]=_array[n] + _array[n+1];
  145.         _array[n]="";
  146.         document.getElementById(n.toString()).value="";
  147.         document.getElementById((n+1).toString()).value=_array[n+1];
  148.       }
  149.     }
  150.   }
  151.   new_turn();
  152. }
  153. function to_left(){
  154.   for(i=0;i<=3;i++){
  155.     for(n=i;n>0;n--){
  156.       if(_array[n-1]<2){
  157.         _array[n-1]=_array[n];
  158.         _array[n]="";
  159.         document.getElementById(n.toString()).value="";
  160.         document.getElementById((n-1).toString()).value=_array[n-1];
  161.       }
  162.       if((_array[n-1]==_array[n])&(_array[n-1]>0)){
  163.         _array[n-1]=_array[n] + _array[n-1];
  164.         _array[n]="";
  165.         document.getElementById(n.toString()).value="";
  166.         document.getElementById((n-1).toString()).value=_array[n-1];
  167.       }
  168.     }
  169.   }
  170.   for(i=4;i<=7;i++){
  171.     for(n=i;n>4;n--){
  172.       if(_array[n-1]<2){
  173.         _array[n-1]=_array[n];
  174.         _array[n]="";
  175.         document.getElementById(n.toString()).value="";
  176.         document.getElementById((n-1).toString()).value=_array[n-1];
  177.       }
  178.       if((_array[n-1]==_array[n])&(_array[n-1]>0)){
  179.         _array[n-1]=_array[n] + _array[n-1];
  180.         _array[n]="";
  181.         document.getElementById(n.toString()).value="";
  182.         document.getElementById((n-1).toString()).value=_array[n-1];
  183.       }
  184.     }
  185.   }
  186.   for(i=8;i<=11;i++){
  187.     for(n=i;n>8;n--){
  188.       if(_array[n-1]<2){
  189.         _array[n-1]=_array[n];
  190.         _array[n]="";
  191.         document.getElementById(n.toString()).value="";
  192.         document.getElementById((n-1).toString()).value=_array[n-1];
  193.       }
  194.       if((_array[n-1]==_array[n])&(_array[n-1]>0)){
  195.         _array[n-1]=_array[n] + _array[n-1];
  196.         _array[n]="";
  197.         document.getElementById(n.toString()).value="";
  198.         document.getElementById((n-1).toString()).value=_array[n-1];
  199.       }
  200.     }
  201.   }
  202.   for(i=12;i<=15;i++){
  203.     for(n=i;n>12;n--){
  204.       if(_array[n-1]<2){
  205.         _array[n-1]=_array[n];
  206.         _array[n]="";
  207.         document.getElementById(n.toString()).value="";
  208.         document.getElementById((n-1).toString()).value=_array[n-1];
  209.       }
  210.       if((_array[n-1]==_array[n])&(_array[n-1]>0)){
  211.         _array[n-1]=_array[n] + _array[n-1];
  212.         _array[n]="";
  213.         document.getElementById(n.toString()).value="";
  214.         document.getElementById((n-1).toString()).value=_array[n-1];
  215.       }
  216.     }
  217.   }
  218.   new_turn();
  219. }
  220. function to_top(){
  221.   for(i=0;i<=12;i+=4){
  222.     for(n=i;n>0;n-=4){
  223.       if(_array[n-4]<2){
  224.         _array[n-4]=_array[n];
  225.         _array[n]="";
  226.         document.getElementById(n.toString()).value="";
  227.         document.getElementById((n-4).toString()).value=_array[n-4];
  228.       }
  229.       if((_array[n-4]==_array[n])&(_array[n-4]>0)){
  230.         _array[n-4]=_array[n] + _array[n-4];
  231.         _array[n]="";
  232.         document.getElementById(n.toString()).value="";
  233.         document.getElementById((n-4).toString()).value=_array[n-4];
  234.       }
  235.     }
  236.   }
  237.   for(i=1;i<=13;i+=4){
  238.     for(n=i;n>1;n-=4){
  239.       if(_array[n-4]<2){
  240.         _array[n-4]=_array[n];
  241.         _array[n]="";
  242.         document.getElementById(n.toString()).value="";
  243.         document.getElementById((n-4).toString()).value=_array[n-4];
  244.       }
  245.       if((_array[n-4]==_array[n])&(_array[n-4]>0)){
  246.         _array[n-4]=_array[n] + _array[n-4];
  247.         _array[n]="";
  248.         document.getElementById(n.toString()).value="";
  249.         document.getElementById((n-4).toString()).value=_array[n-4];
  250.       }
  251.     }
  252.   }
  253.   for(i=2;i<=14;i+=4){
  254.     for(n=i;n>2;n-=4){
  255.       if(_array[n-4]<2){
  256.         _array[n-4]=_array[n];
  257.         _array[n]="";
  258.         document.getElementById(n.toString()).value="";
  259.         document.getElementById((n-4).toString()).value=_array[n-4];
  260.       }
  261.       if((_array[n-4]==_array[n])&(_array[n-4]>0)){
  262.         _array[n-4]=_array[n] + _array[n-4];
  263.         _array[n]="";
  264.         document.getElementById(n.toString()).value="";
  265.         document.getElementById((n-4).toString()).value=_array[n-4];
  266.       }
  267.     }
  268.   }
  269.   for(i=3;i<=15;i+=4){
  270.     for(n=i;n>3;n-=4){
  271.       if(_array[n-4]<2){
  272.         _array[n-4]=_array[n];
  273.         _array[n]="";
  274.         document.getElementById(n.toString()).value="";
  275.         document.getElementById((n-4).toString()).value=_array[n-4];
  276.       }
  277.       if((_array[n-4]==_array[n])&(_array[n-4]>0)){
  278.         _array[n-4]=_array[n] + _array[n-4];
  279.         _array[n]="";
  280.         document.getElementById(n.toString()).value="";
  281.         document.getElementById((n-4).toString()).value=_array[n-4];
  282.       }
  283.     }
  284.   }
  285.   new_turn();
  286. }
  287. function to_down(){
  288.   for(i=12;i>=0;i-=4){
  289.     for(n=i;n<12;n+=4){
  290.       if(_array[n+4]<2){
  291.         _array[n+4]=_array[n];
  292.         _array[n]="";
  293.         document.getElementById(n.toString()).value="";
  294.         document.getElementById((n+4).toString()).value=_array[n+4];
  295.       }
  296.       if((_array[n+4]==_array[n])&(_array[n+4]>0)){
  297.         _array[n+4]=_array[n] + _array[n+4];
  298.         _array[n]="";
  299.         document.getElementById(n.toString()).value="";
  300.         document.getElementById((n+4).toString()).value=_array[n+4];
  301.       }
  302.     }
  303.   }
  304.   for(i=13;i>=1;i-=4){
  305.     for(n=i;n<13;n+=4){
  306.       if(_array[n+4]<2){
  307.         _array[n+4]=_array[n];
  308.         _array[n]="";
  309.         document.getElementById(n.toString()).value="";
  310.         document.getElementById((n+4).toString()).value=_array[n+4];
  311.       }
  312.       if((_array[n+4]==_array[n])&(_array[n+4]>0)){
  313.         _array[n+4]=_array[n] + _array[n+4];
  314.         _array[n]="";
  315.         document.getElementById(n.toString()).value="";
  316.         document.getElementById((n+4).toString()).value=_array[n+4];
  317.       }
  318.     }
  319.   }
  320.   for(i=14;i>=2;i-=4){
  321.     for(n=i;n<14;n+=4){
  322.       if(_array[n+4]<2){
  323.         _array[n+4]=_array[n];
  324.         _array[n]="";
  325.         document.getElementById(n.toString()).value="";
  326.         document.getElementById((n+4).toString()).value=_array[n+4];
  327.       }
  328.       if((_array[n+4]==_array[n])&(_array[n+4]>0)){
  329.         _array[n+4]=_array[n] + _array[n+4];
  330.         _array[n]="";
  331.         document.getElementById(n.toString()).value="";
  332.         document.getElementById((n+4).toString()).value=_array[n+4];
  333.       }
  334.     }
  335.   }
  336.   for(i=15;i>=3;i-=4){
  337.     for(n=i;n<15;n+=4){
  338.       if(_array[n+4]<2){
  339.         _array[n+4]=_array[n];
  340.         _array[n]="";
  341.         document.getElementById(n.toString()).value="";
  342.         document.getElementById((n+4).toString()).value=_array[n+4];
  343.       }
  344.       if((_array[n+4]==_array[n])&(_array[n+4]>0)){
  345.         _array[n+4]=_array[n] + _array[n+4];
  346.         _array[n]="";
  347.         document.getElementById(n.toString()).value="";
  348.         document.getElementById((n+4).toString()).value=_array[n+4];
  349.       }
  350.     }
  351.   }
  352.   new_turn();
  353. }
  354. </script>
  355. </head>
  356. <body>
  357. <div id="div1">
  358. <p><b>2048 puzzle</b></p>
  359. <table align="center">
  360. <tr>
  361. <td><input type="number" disabled="true" id="0"></td>
  362. <td><input type="number" disabled="true" id="1"></td>
  363. <td><input type="number" disabled="true" id="2"></td>
  364. <td><input type="number" disabled="true" id="3"></td>
  365. </tr>
  366. <tr>
  367. <td><input type="number" disabled="true" id="4"></td>
  368. <td><input type="number" disabled="true" id="5"></td>
  369. <td><input type="number" disabled="true" id="6"></td>
  370. <td><input type="number" disabled="true" id="7"></td>
  371. </tr>
  372. <tr>
  373. <td><input type="number" disabled="true" id="8"></td>
  374. <td><input type="number" disabled="true" id="9"></td>
  375. <td><input type="number" disabled="true" id="10"></td>
  376. <td><input type="number" disabled="true" id="11"></td>
  377. </tr>
  378. <tr>
  379. <td><input type="number" disabled="true" id="12"></td>
  380. <td><input type="number" disabled="true" id="13"></td>
  381. <td><input type="number" disabled="true" id="14"></td>
  382. <td><input type="number" disabled="true" id="15"></td>
  383. </tr>
  384. </table>
  385. </br>
  386. <table align="center">
  387.   <tr>
  388.     <td><button onclick="to_right()">Right</button></td>
  389.     <td><button onclick="to_left()">Left</button></td>
  390.     <td><button onclick="to_top()">Top</button></td>
  391.     <td><button onclick="to_down()">Down</button></td>
  392.   </tr>
  393. </table>
  394. </br>
  395. <button onclick="new_game()">New Game</button>
  396. </div>
  397. </body>
  398. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!