DELTA PROJECT-SELF

DELTA-PROJECTS/README.md

@@ -0,0 +1,69 @@
+# 🧠 Pokémon Memory Game
+
+A memory card game built using **HTML**, **CSS**, **JavaScript**, **Bootstrap**, and the **Pokémon TCG API**. Players test their memory skills by flipping Pokémon cards and matching pairs. The game supports multiple grid sizes and keeps track of the score and top score.
+
+---
+
+## 🎮 Gameplay Instructions
+
+1. **Choose difficulty**: Select from 4, 8, 10, or 12 cards.
+2. **Start matching**: Click on the Pokéballs to reveal the Pokémon.
+3. **Match pairs**: Two same Pokémon in a row count as a successful match.
+4. **Scoring**:
+   - Start at **2000 points**.
+   - Lose **100 points** for each mismatch.
+   - Score is displayed at the end.
+5. **Top score** is updated live.
+
+---
+
+## 🚀 Features
+
+- 🧩 Dynamic card generation using **TCGdex Pokémon API**
+- 🎴 Randomised card shuffling on each attempt
+- 🎯 Scoring system with real-time updates
+- 🏆 Top score memory within session
+- 📱 Responsive layout with Bootstrap
+- 🎨 Background image updates every 10 seconds
+- 🔁 Smooth animations and flip transitions
+
+---
+
+## 📁 File Structure
+
+project-root/
+├── index.html # Main HTML structure
+├── style.css # Styling for layout and transitions
+├── app.js # Game logic, API integration, DOM handling
+├── assets/
+│ ├── poke.jpg # Pokéball image
+│ ├── pokeball.jpg # Button background
+│ ├── pokeicon2.png # Game header icon
+│ ├── a1.jpg - a5.jpg # Backgrounds (cycled every 10s)
+└── README.md # Project documentation
+
+
+---
+
+## 🛠 Tech Stack
+
+- **HTML5** + **CSS3**
+- **JavaScript (ES6)**
+- **Bootstrap 5.3** – layout and responsiveness
+- **Axios** – API calls
+- **Pokémon TCGdex API** – Pokémon card data
+
+---
+
+## 📸 Screenshot
+
+> *(Optional: Insert a screenshot below)*  
+> ![Game preview](./assets/pokeicon2.png)
+
+---
+
+## 🧪 How to Run
+
+1. Clone or download the project:
+   ```bash
+   git clone https://github.com/your-username/pokemon-memory-game.git

DELTA-PROJECTS/app.js

@@ -0,0 +1,157 @@
+let h1=document.querySelector('h1');
+let div=document.getElementById("a");
+let div4=document.getElementById("b");
+let div8=document.getElementById("c");
+let div10=document.getElementById("d");
+let div12=document.getElementById("e");
+let body=document.querySelector('body');
+let stack=[];
+let topscore=0;
+let removeobj=function(){
+    let imall=document.querySelectorAll('img');
+    for(k of imall){
+        k.remove();
+    }
+    let divsmall=document.querySelectorAll('#a h1');
+    for (n of divsmall){
+        n.remove();
+    }
+};
+let setmaker=(arr)=>{
+    let finalarr=[];
+    let n=arr.length;
+    for(let i=0;i<n;i++){
+        ransel(arr,finalarr)
+    }
+    return finalarr;
+};
+let ransel=(list,narr)=>{
+    let n=Math.floor(Math.random()*list.length);
+    narr.push(list[n]);
+    list.splice(n,1);
+};
+async function poke(num){
+    div.style.backgroundColor="#EEEDE7a1"
+    removeobj();
+    let score=2000;
+    if(num==4){
+        div.style.gridTemplateRows="repeat(1,1fr)";
+        div.style.gridTemplateColumns=`repeat(4,1fr)`;
+    }
+    else{
+        div.style.gridTemplateRows="repeat(2,1fr)";
+        div.style.gridTemplateColumns=`repeat(${num/2},1fr)`;
+    }
+    let ran= Math.ceil(Math.random()*100);
+    let dat= await axios.get("https://api.tcgdex.net/v2/en/sets/base1");
+    arr=[];
+    for(let m=0;m<num;m++){
+        arr.push(m);
+    }
+    let shuffledarr=setmaker(arr);
+    console.log(shuffledarr);
+    for (let i=ran;i<ran+num;i++){
+        let im=document.createElement('img');
+        div.append(im);
+    }
+    imall=document.querySelectorAll('img');
+    let savenamearr=[];
+    let countarr=[];
+    let crosschecker=[];
+    for(let j=0;j<shuffledarr.length;j=j+2){
+        imall[shuffledarr[j]].src="assets/poke.jpg";
+        imall[shuffledarr[j+1]].src="assets/poke.jpg";
+        imall[shuffledarr[j]].addEventListener("click",()=>{
+            imall[shuffledarr[j]].classList.add("turn");
+            imall[shuffledarr[j]].src=dat.data.cards[ran+j].image+"/high.webp";
+            savenamearr.push(dat.data.cards[ran+j].name);
+            countarr.push(shuffledarr[j]);
+            crosschecker.push(shuffledarr[j+1]);
+            let c=cardlogicchecker(savenamearr,countarr,crosschecker,imall,num,score);
+            if (c==0){
+                score-=100;
+            }
+            console.log(score);
+        });
+        imall[shuffledarr[j+1]].addEventListener("click",()=>{
+            imall[shuffledarr[j+1]].classList.add("turn");
+            imall[shuffledarr[j+1]].src=dat.data.cards[ran+j].image+"/high.webp";
+            savenamearr.push(dat.data.cards[ran+j].name);
+            countarr.push(shuffledarr[j+1]);
+            crosschecker.push(shuffledarr[j]);
+            let c=cardlogicchecker(savenamearr,countarr,crosschecker,imall,num,score);
+            if (c==0){
+                score-=100;
+            }
+            console.log(score);
+        });
+    }
+};
+div4.addEventListener("click",()=>{
+    poke(4);
+});
+div8.addEventListener("click",()=>{
+    poke(8);
+});
+div10.addEventListener("click",()=>{
+    poke(10);
+});
+div12.addEventListener("click",()=>{
+    poke(12);
+});
+let cardlogicchecker=(arr1,arr2,arr3,imall,num,score)=>{
+    if (arr1.length==2){
+        console.log("PRESSED 2");
+        console.log(arr1,arr2);
+    if(arr1[1]==arr1[0] ){
+        if(arr2[1]==arr3[0]){
+            console.log("Same");
+        setTimeout(function(){
+        imall[arr2[0]].style.opacity="0";
+        imall[arr2[1]].style.opacity="0";
+        stack.push(1);
+        if(stack.length==num/2){
+            console.log("Game ended");
+            stack.length=0;
+            if(score>topscore){
+                topscore=score;
+            }
+            let divsmall=document.createElement('h1');
+            divsmall.innerText=`YOUR SCORE IS ${score}
+            TOP SCORE IS ${topscore}`;
+            divsmall.classList.add("size");
+            div.append(divsmall);
+            let imall=document.querySelectorAll('img');
+            for(k of imall){
+            k.remove();
+            }
+        }
+        arr1.length=0;
+        arr2.length=0;
+        arr3.length=0;
+    },1000);
+        }
+        else{
+            console.log("Exceptional case")
+            arr1.length=1;
+            arr2.length=1;
+            console.log(arr1,arr2);
+        }
+    }
+    else{
+        setTimeout(function(){
+        imall[arr2[1]].src="assets/poke.jpg";
+        imall[arr2[0]].src="assets/poke.jpg";
+        arr1.length=0;
+        arr2.length=0;
+        arr3.length=0;
+    },1000);
+    return 0;
+    } 
+}
+}
+setInterval(()=>{
+    let a=Math.floor(Math.random()*5)+1;
+    body.style.backgroundImage=`url("assets/a${a}.jpg")`;
+    console.log("set");
+},10000);

DELTA-PROJECTS/index.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>POKEMON</title>
+    <link rel="stylesheet" href="style.css"/>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=WDXL+Lubrifont+TC&display=swap" rel="stylesheet">
+</head>
+<body>
+    <div class="head"><img id="pokeicon" src="assets/pokeicon2.png" alt="pokeicon"><h1>Pokemon Memory Game</h1></div>
+    <div class="main">
+        <div class="left">
+        <div id="b">4</div>
+        <div id="c">8</div>
+    </div>
+    <div id="a" class="center"><h1></h1></div>
+    <div class="right">
+        <div id="d">10</div>
+        <div id="e">12</div>
+    </div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>
+    <script src="app.js"></script>
+</body>
+</html>

DELTA-PROJECTS/style.css

@@ -0,0 +1,100 @@
+*{
+    margin: auto;
+    text-align: center;
+    padding:0;
+    margin: 0;
+    font-family: "WDXL Lubrifont TC", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+}
+body{
+    background-image: url("assets/a3.jpg");
+    background-size: cover;
+}
+.head{
+    height: 75px;
+    width: 100%;
+    position: fixed;
+    z-index: 3;
+    background-color: #000000a1;
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.center{
+    height: 100vh;
+    width: 80%;
+    display: inline-grid;
+    grid-template-rows: repeat(2,1fr);
+    grid-template-columns: repeat(6,1fr);
+    margin: 0;
+    position: relative;
+    background-color: none;
+    justify-items: center;
+    align-items: center;
+}
+img{
+    width: 8rem;
+    height: 12rem;
+}
+h1{
+    padding: 0;
+    margin: 0;
+}
+.left{
+    height: 630px;
+    width: 10%;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: space-between;
+    justify-content: center;
+}
+.left div{
+    width: 90%;
+    height: 22%;
+    border: 1px solid white;
+    border-radius: 50%;
+    background-color: gray;
+    background-image: url("assets/pokeball.jpg");
+    background-size: cover;
+}
+.right{
+    width: 10%;
+    height: 630px;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: space-between;
+    justify-content: center;
+}
+.right div{
+    width: 90%;
+    height: 22%;
+    border: 1px solid white;
+    border-radius: 50%;
+    background-image: url("assets/pokeball.jpg");
+    background-size: cover;
+}
+.main{
+    display: flex;
+    position: relative;
+    top:6rem;
+
+
+}
+.left,.right{
+    box-shadow: 2px;
+    text-align: center;
+    font-size: 2.2rem;
+}
+.turn{
+    transition: transform 0.2s ease-in 0s;
+    transform: rotateY(360deg);
+}
+#pokeicon{
+    width: 2.5rem;
+    height: 2.5rem;
+}
+.size{
+    font-size: 3rem;
+}