2048_clone added

Web Development/Basic/2048_clone/README.md

@@ -0,0 +1,18 @@
+# 2048
+
+Introduction
+2048 is a sliding block puzzle where the player uses arrow keys (or swipe gestures in mobile versions) to combine tiles with the same number. The game starts with two randomly placed tiles, each containing either 2 or 4, and players slide the tiles on a 4x4 grid to sum them up to reach 2048.
+
+This implementation includes the basic mechanics of the 2048 game, score tracking, and a simple UI to make it easy to play.
+
+How to Play
+Use the arrow keys to slide all tiles in the desired direction.
+When two tiles with the same number touch, they merge into one (e.g., 2 + 2 = 4, 4 + 4 = 8, etc.).
+The goal is to create a tile with the number 2048.
+The game ends if there are no more valid moves left (either no more empty spaces or no adjacent tiles with the same value).
+Features
+Classic 4x4 grid with sliding and combining tiles.
+Score tracker that updates as you combine tiles.
+Random placement of new tiles after each move.
+Simple and intuitive interface for gameplay.
+Game over detection when no more moves are possible.

Web Development/Basic/2048_clone/app.js

@@ -0,0 +1,270 @@
+
+const gameBoard =document.querySelector(".gameBoard")
+
+const userScore= document.querySelector(".points")
+
+let score ;
+let filledCell;
+let endGame ;
+let highScore=0;
+
+startGame();
+newPosition();
+
+document.querySelector(".newPlay").addEventListener("click",function()
+{
+    gameBoard.innerHTML=""; 
+    startGame();
+    newPosition(); 
+
+    console.log(filledCell);
+});
+
+function startGame () 
+{ 
+  score =0;
+  userScore.innerHTML=score;
+   filledCell=[[0 , 0 , 0 , 0] , [0 , 0 , 0 , 0]
+               ,[0 , 0 , 0 , 0],[0 , 0 , 0 , 0]]; 
+               //array to mark cell with value 
+
+
+   for(let j=0;j<4;j++)
+    {
+        for(let k=0;k<4;k++)
+        {
+            let  cell=document.createElement("div");
+            cell.id=`index${j}-${k}`;
+            gameBoard.append(cell);
+
+            updateValue(j,k);
+        }
+    }
+
+}
+
+// function to genrate a new cell value i.e 2 or 4
+ function generate () {
+
+  let newValue =Math.floor(Math.random()*2);
+  if(newValue===0)
+  { return 2;}
+  else 
+  { return 4;}
+}
+
+
+// function to get a new position for new cell 
+ function newPosition (){
+
+    if(canPlay()===1)
+    {
+        let newi =Math.floor(Math.random()*4);
+    let newj =Math.floor(Math.random()*4);
+
+    if(filledCell[newi][newj]!=0)
+    {
+       newPosition();
+    }
+    else 
+    filledCell[newi][newj]=generate();
+    updateValue(newi,newj);
+}
+else alert("Well played ! but you loose start new game by New Game button ");
+}
+
+
+document.querySelector("body").addEventListener('keyup',(e)=>{
+    // console.log(e.key);
+    switch(e.key)
+    {
+            case "ArrowUp":
+
+                moveUp();
+                newPosition();
+                updateHighScore ();
+              break
+
+            case "ArrowDown":
+
+                moveDown();
+                newPosition();
+                updateHighScore ();
+                break
+
+            case "ArrowRight":
+                moveRight();
+                newPosition();
+                updateHighScore ();
+            break
+
+            case "ArrowLeft":
+                moveLeft();
+                newPosition();
+                updateHighScore ();
+            break  
+    }
+});
+
+
+function updateValue(i,j)
+{
+    let cell=document.querySelector(`#index${i}-${j}`);
+            if(filledCell[i][j]>0)
+            {
+
+                  cell.innerHTML=filledCell[i][j];
+                  cell.classList.add(`value${filledCell[i][j]}`);
+                    // console.log("value"+filledCell[i][j]);
+            }
+            else
+            {
+                document.querySelector(`#index${i}-${j}`).innerHTML="";
+                cell.className="";  
+            }
+        }
+
+function moveUp()
+{
+    for(let j=0;j<4;j++)
+    {
+        // console.log("--     555555555--");
+        for(let i=3;i>0;i--)
+        {
+            // console.log(filledCell[i][j]);
+            // console.log("----");
+            if(filledCell[i][j]===filledCell[i-1][j] && filledCell[i][j])
+            {  
+                // merge
+                filledCell[i-1][j]=2*filledCell[i][j];
+                filledCell[i][j]=0;
+                score=score+filledCell[i-1][j];
+                userScore.innerHTML=score;
+                updateValue(i,j);
+                updateValue(i-1,j);
+                i--;
+            }
+
+             else if(filledCell[i][j] && !filledCell[i-1][j])
+            {
+                filledCell[i-1][j] =filledCell[i][j];
+                filledCell[i][j]=0;
+                updateValue(i,j);
+                updateValue(i-1,j);
+            }
+
+        }
+    }
+}
+
+function moveDown()
+{
+    // console.log("move down called");
+   for(let j=0;j<4;j++)
+   {
+    for( let i=0;i<3;i++)
+    {
+        // console.log("loop is great ");
+      if(filledCell[i][j]===filledCell[i+1][j] && filledCell[i][j])
+      {
+        filledCell[i+1][j]=2*filledCell[i][j];
+        filledCell[i][j]=0;
+        score=score+filledCell[i+1][j];
+        userScore.innerHTML=score;
+        updateValue(i,j);
+        updateValue(i+1,j);
+        i++;
+      }
+
+      else if(filledCell[i][j] && !filledCell[i+1][j])
+      {
+        filledCell[i+1][j]=filledCell[i][j];
+        filledCell[i][j]=0;
+        updateValue(i,j);
+        updateValue(i+1,j);
+      }
+    }
+   }
+}
+
+function moveLeft()
+{
+    for( i=0;i<4;i++)
+    {
+        for( j=3;j>0;j--)
+        {
+            if(filledCell[i][j]===filledCell[i][j-1] && filledCell[i][j])
+            {
+               filledCell[i][j-1]=2*filledCell[i][j];
+               filledCell[i][j]=0;
+               updateValue(i,j);
+               updateValue(i,j-1);
+               score=score+filledCell[i][j-1];
+               userScore.innerHTML=score;
+               j--;
+            }
+
+            else if(filledCell[i][j] && !filledCell[i][j-1])
+            {
+                filledCell[i][j-1] =filledCell[i][j];
+                filledCell[i][j]=0;
+                updateValue(i,j);
+                updateValue(i,j-1);
+            }
+        }
+    }
+}
+
+function moveRight()
+{ for(let i=0;i<4;i++)
+    {
+     for( let j=0;j<3;j++)
+     {
+        //  console.log("loop is great ");
+       if(filledCell[i][j]===filledCell[i][j+1] && filledCell[i][j])
+       {
+         filledCell[i][j+1]=2*filledCell[i][j];
+         filledCell[i][j]=0;
+         score=score+filledCell[i][j+1];
+         userScore.innerHTML=score;
+         updateValue(i,j);
+         updateValue(i,j+1);
+         i++;
+       }
+
+       else if(filledCell[i][j] && !filledCell[i][j+1])
+       {
+         filledCell[i][j+1]=filledCell[i][j];
+         filledCell[i][j]=0;
+         updateValue(i,j);
+         updateValue(i,j+1);
+       }
+     }
+    }
+
+}
+
+function canPlay()
+{ 
+    for(let i=0;i<4;i++)
+    {
+     for( let j=0;j<4;j++)
+     {
+      if(filledCell[i][j]==0){
+        return 1;
+      }
+}
+}
+return 0 ;
+}
+
+function updateHighScore ()
+{
+    // console.log( score , highScore );
+   if(score>=highScore)
+   {
+   highScore=score;
+   console.log( score , highScore );
+   document.querySelector(".best").innerHTML= highScore;
+   }
+}

Web Development/Basic/2048_clone/index.html

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>2048</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1 class ="heading">2048</h1>
+    <hr>
+    <div class="topbar">  
+        <button class="newPlay"> New Game </button>
+
+      <div>
+
+        <div class="scoreBar">
+            <h3 > Best : <span class="best"></span></h3>
+
+           </div> 
+           <div class="scoreBar">
+            <h3 > Score : <span class="points">  </span></h3>
+
+           </div>
+
+       </div>
+
+
+    </div>
+
+    <div class="gameBoard">
+
+            <!-- <div class="box"></div>
+            <div class="box"></div>
+            <div class="box"></div>
+            <div class="box"></div>
+
+            <div class="box"></div>
+            <div class="box"></div>
+            <div class="box"></div>
+            <div class="box"></div>
+
+            <div class="box"></div>
+            <div class="box"></div>
+            <div class="box"></div>
+            <div class="box"></div>
+
+            <div class="box"></div>
+            <div class="box"></div>
+            <div class="box"></div>
+            <div class="box"></div>
+         -->
+    </div>
+
+    <script src="app.js"></script>
+</body>
+</html>