diff --git a/DELTA-PROJECTS/README.md b/DELTA-PROJECTS/README.md new file mode 100644 index 0000000..213e1d3 --- /dev/null +++ b/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 diff --git a/DELTA-PROJECTS/app.js b/DELTA-PROJECTS/app.js new file mode 100644 index 0000000..19af8f1 --- /dev/null +++ b/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{ + 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{ + 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); \ No newline at end of file diff --git a/DELTA-PROJECTS/assets/a.jpg b/DELTA-PROJECTS/assets/a.jpg new file mode 100644 index 0000000..aa17c4f Binary files /dev/null and b/DELTA-PROJECTS/assets/a.jpg differ diff --git a/DELTA-PROJECTS/assets/a1.jpg b/DELTA-PROJECTS/assets/a1.jpg new file mode 100644 index 0000000..15bbdad Binary files /dev/null and b/DELTA-PROJECTS/assets/a1.jpg differ diff --git a/DELTA-PROJECTS/assets/a2.jpg b/DELTA-PROJECTS/assets/a2.jpg new file mode 100644 index 0000000..77e2fd3 Binary files /dev/null and b/DELTA-PROJECTS/assets/a2.jpg differ diff --git a/DELTA-PROJECTS/assets/a3.jpg b/DELTA-PROJECTS/assets/a3.jpg new file mode 100644 index 0000000..723211c Binary files /dev/null and b/DELTA-PROJECTS/assets/a3.jpg differ diff --git a/DELTA-PROJECTS/assets/a4.jpg b/DELTA-PROJECTS/assets/a4.jpg new file mode 100644 index 0000000..0ba00db Binary files /dev/null and b/DELTA-PROJECTS/assets/a4.jpg differ diff --git a/DELTA-PROJECTS/assets/a5.jpg b/DELTA-PROJECTS/assets/a5.jpg new file mode 100644 index 0000000..43fe48b Binary files /dev/null and b/DELTA-PROJECTS/assets/a5.jpg differ diff --git a/DELTA-PROJECTS/assets/poke.jpg b/DELTA-PROJECTS/assets/poke.jpg new file mode 100644 index 0000000..20f3a30 Binary files /dev/null and b/DELTA-PROJECTS/assets/poke.jpg differ diff --git a/DELTA-PROJECTS/assets/pokeball.jpg b/DELTA-PROJECTS/assets/pokeball.jpg new file mode 100644 index 0000000..658091d Binary files /dev/null and b/DELTA-PROJECTS/assets/pokeball.jpg differ diff --git a/DELTA-PROJECTS/assets/pokeicon.jpg b/DELTA-PROJECTS/assets/pokeicon.jpg new file mode 100644 index 0000000..e533b32 Binary files /dev/null and b/DELTA-PROJECTS/assets/pokeicon.jpg differ diff --git a/DELTA-PROJECTS/assets/pokeicon2.png b/DELTA-PROJECTS/assets/pokeicon2.png new file mode 100644 index 0000000..644b817 Binary files /dev/null and b/DELTA-PROJECTS/assets/pokeicon2.png differ diff --git a/DELTA-PROJECTS/index.html b/DELTA-PROJECTS/index.html new file mode 100644 index 0000000..0b7896a --- /dev/null +++ b/DELTA-PROJECTS/index.html @@ -0,0 +1,29 @@ + + + + + + POKEMON + + + + + + + +
pokeicon

Pokemon Memory Game

+
+
+
4
+
8
+
+

+
+
10
+
12
+
+
+ + + + \ No newline at end of file diff --git a/DELTA-PROJECTS/style.css b/DELTA-PROJECTS/style.css new file mode 100644 index 0000000..db243ce --- /dev/null +++ b/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; +} \ No newline at end of file