diff --git a/Satyajit Biswal/Chatgpt/index.html b/Satyajit Biswal/Chatgpt/index.html new file mode 100644 index 0000000..9d9c308 --- /dev/null +++ b/Satyajit Biswal/Chatgpt/index.html @@ -0,0 +1,46 @@ + + + + + + ChatGPT Interface + + + +
+ +

My ChatGPT

+
+
+
+
+ +
+
+
    + +
+
+
+
+
+
Hello! How can I help you today?
+
+ +
+ + + +
+
+
+ + + diff --git a/Satyajit Biswal/Chatgpt/script.js b/Satyajit Biswal/Chatgpt/script.js new file mode 100644 index 0000000..e7b719e --- /dev/null +++ b/Satyajit Biswal/Chatgpt/script.js @@ -0,0 +1,387 @@ +let MyAPIKey +if(localStorage.getItem("API_KEY")){ + MyAPIKey=localStorage.getItem("API_KEY") +} +else{ + MyAPIKey=prompt("Enter Your valid API_KEY here") + localStorage.setItem("API_KEY",MyAPIKey) +} + + +let container=document.querySelector(".chat-container") + let historyPanel=document.querySelector(".history") + let input=document.getElementById("userinput") + let send=document.getElementById("sendBtn") + let historyele=document.querySelector('.box') +let chat=document.getElementById('messages') + +//showing data from local storage +const show=(modelIndex)=>{ + if(historyele){ + historyele.innerHTML=" "; + } + let data=localStorage.getItem(`message${modelIndex}`); + let arr=[]; + try { + arr = data ? JSON.parse(data) : []; + } catch { + arr = []; + } + if(arr.length === 0){ + let a="No Chat History"; + localhistoryQuestion(a); + } + else{ + for(let i=0;i{ + modelIndex=model.indexOf(e.target.value) + console.log(modelIndex); + show(modelIndex) +}) + + + + let historyBtn=document.querySelector(".historybtn") + historyBtn.addEventListener('click',()=>{ + historyPanel.classList.toggle('show'); + container.classList.toggle('dim'); +}) + + +function appendtoChat(question){ + let newchat=document.createElement('div'); + newchat.className='newMessage'; + newchat.innerHTML=question; + chat.append(newchat); +} + + +function appendans(answer){ + let newchat=document.createElement('div'); + newchat.className='newAnswer'; + newchat.innerHTML=answer; + chat.append(newchat); +} + + +function localhistoryQuestion(question){ + let ele=document.createElement('li'); + ele.className='chatHistory' + ele.innerHTML=question; + + // show stored chat + ele.addEventListener('click', () => { + const arr = JSON.parse(localStorage.getItem(`message${modelIndex}`) || '[]'); + const match = arr.find(x => x.question === question); + if (match) { + appendtoChat(match.question); + appendans(match.answer); + } + },{once:true});// if you donot want to call once then donot use once:true Its my chatgpt so my rule applied + + historyele.prepend(ele); +} + + + +//saving to local storage +function saveTolocalStorage(question,answer,modelIndex){ + let mess=localStorage.getItem(`message${modelIndex}`); + if(mess== null){ + let json=[]; + json.push({question:question,answer:answer}) + localStorage.setItem(`message${modelIndex}`,JSON.stringify(json)) + } + else{ + let json=JSON.parse(localStorage.getItem(`message${modelIndex}`)); + json.push({question:question,answer:answer}) + localStorage.setItem(`message${modelIndex}`,JSON.stringify(json)) + } +} + + +//Main function for fetching data +//API Models +const getData={} +getData["model0"] = async function func(){ + let userinput=input.value + input.value=''; + appendtoChat(userinput); + +try{ + const data=await fetch("https://openrouter.ai/api/v1/chat/completions", { + method: "POST", + headers: { + "Authorization": `Bearer ${MyAPIKey}`, + "HTTP-Referer": "", + "X-Title": "", + "Content-Type": "application/json" + }, + body: JSON.stringify({ + model: "openrouter/cypher-alpha:free", + messages: [ + { role: "user", content: userinput } + ] + }) + }) + + + if(!data.ok){ + const errorData = await data.json(); + let error=`API Error: ${data.status}` ; + appendans(error); + } + + const json = await data.json(); + const answer = json.choices[0].message.content; + appendans(answer); + saveTolocalStorage(userinput,answer,0) + show(0) + } + catch(error){ + appendans(error.message); + } +} +getData["model1"] = async function func(){ + let userinput=input.value + input.value=''; + appendtoChat(userinput); + +try{ + const data=await fetch("https://openrouter.ai/api/v1/chat/completions", { + method: "POST", + headers: { + "Authorization": `Bearer ${MyAPIKey}`, + "HTTP-Referer": "", + "X-Title": "", + "Content-Type": "application/json" + }, + body: JSON.stringify({ + "model": "deepseek/deepseek-r1-0528:free", + "messages": [ + { + "role": "user", + "content": userinput + } + ] + }) + }) + + if(!data.ok){ + const errorData = await data.json(); + let error=`API Error: ${data.status}` ; + appendans(error); + } + + const json = await data.json(); + const answer = json.choices[0].message.content; + appendans(answer); + saveTolocalStorage(userinput,answer,1) + show(1) + } + catch(error){ + appendans(error.message); + } +} +getData["model3"] = async function func(){ + let userinput=input.value + input.value=''; + appendtoChat(userinput); + +try{ + const data=await fetch("https://openrouter.ai/api/v1/chat/completions", { + method: "POST", + headers: { + "Authorization": `Bearer ${MyAPIKey}`, + "HTTP-Referer": "", + "X-Title": "", + "Content-Type": "application/json" + }, + body: JSON.stringify({ + "model": "microsoft/mai-ds-r1:free", + "messages": [ + { + "role": "user", + "content": userinput + } + ] + }) + }) + + if(!data.ok){ + const errorData = await data.json(); + let error=`API Error: ${data.status}` ; + appendans(error); + } + + const json = await data.json(); + const answer = json.choices[0].message.content; + appendans(answer); + saveTolocalStorage(userinput,answer,3) + show(3) + } + catch(error){ + appendans(error.message); + } +} +getData["model4"] = async function func(){ + let userinput=input.value + input.value=''; + appendtoChat(userinput); + +try{ + const data=await fetch("https://openrouter.ai/api/v1/chat/completions", { + method: "POST", + headers: { + "Authorization": `Bearer ${MyAPIKey}`, + "HTTP-Referer": "", + "X-Title": "", + "Content-Type": "application/json" + }, + body: JSON.stringify({ + "model": "deepseek/deepseek-chat-v3-0324:free", + "messages": [ + { + "role": "user", + "content": userinput + } + ] + }) + }) + + if(!data.ok){ + const errorData = await data.json(); + let error=`API Error: ${data.status}` ; + appendans(error); + } + + const json = await data.json(); + const answer = json.choices[0].message.content; + appendans(answer); + saveTolocalStorage(userinput,answer,4) + show(4) + } + catch(error){ + appendans(error.message); + } +} +getData["model5"] = async function func(){ + let userinput=input.value + input.value=''; + appendtoChat(userinput); + +try{ + const data=await fetch("https://openrouter.ai/api/v1/chat/completions", { + method: "POST", + headers: { + "Authorization": `Bearer ${MyAPIKey}`, + "HTTP-Referer": "", + "X-Title": "", + "Content-Type": "application/json" + }, + body: JSON.stringify({ + "model": "mistralai/mistral-small-3.2-24b-instruct:free", + "messages": [ + { + "role": "user", + "content":userinput + } + ] + }) +}) + + if(!data.ok){ + const errorData = await data.json(); + let error=`API Error: ${data.status}` ; + appendans(error); + } + + const json = await data.json(); + const answer = json.choices[0].message.content; + appendans(answer); + saveTolocalStorage(userinput,answer,5) + show(5) + } + catch(error){ + appendans(error.message); + } +} +getData["model2"] = async function func(){ + let userinput=input.value + input.value=''; + appendtoChat(userinput); + +try{ + const data=await fetch("https://openrouter.ai/api/v1/chat/completions", { + method: "POST", + headers: { + "Authorization": `Bearer ${MyAPIKey}`, + "HTTP-Referer": "", + "X-Title": "", + "Content-Type": "application/json" + }, + body: JSON.stringify({ + "model": "qwen/qwen3-32b:free", + "messages": [ + { + "role": "user", + "content": userinput + } + ] + }) + }) + + if(!data.ok){ + const errorData = await data.json(); + let error=`API Error: ${data.status}` ; + appendans(error); + } + + const json = await data.json(); + const answer = json.choices[0].message.content; + appendans(answer); + saveTolocalStorage(userinput,answer,2) + show(2) + } + catch(error){ + appendans(error.message); + } +} + + + +// Reset button for clear chat history +let reset=document.querySelector('.reset') +reset.addEventListener('click',(e)=>{ + Updateddata=[] + localStorage.setItem(`message${modelIndex}`,JSON.stringify(Updateddata)); + show(modelIndex) +}) + + + + +sendBtn.addEventListener("click", async () => { + await getData[`model${modelIndex}`](); +}); + +input.addEventListener("keydown", async (e) => { + if (e.key === "Enter") { + await getData[`model${modelIndex}`](); + } +}); + +show(modelIndex) diff --git a/Satyajit Biswal/Chatgpt/style.css b/Satyajit Biswal/Chatgpt/style.css new file mode 100644 index 0000000..bcdb6e2 --- /dev/null +++ b/Satyajit Biswal/Chatgpt/style.css @@ -0,0 +1,207 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + } +body, html { + height: 100%; + font-family: Arial, sans-serif; + background: #f4f6f8; +} + +.main{ + display: flex; + width: 100%; + height: 91%; + position: relative; +} + +.chat-container { + position: absolute; + top: 0; + bottom: 0; + right: 0; + + display: flex; + flex-direction: column; + /* height: 100%; */ + /* order: 2; */ + width: 100%; + opacity: 1; + transition: width 1s ease-out,opacity 0.5s ease-in-out; +} +.history{ + position: absolute; + left: 0; + top: 0; + bottom: 0; + + transform: translateX(-100%); + opacity:0; + width: 0%; + transition: width 1s ease-in-out,opacity 0.5s ease-in-out,transform 1s ease-in-out; + + border: 3px solid black; + padding: 1rem 0.5rem; + overflow-y: auto; + word-wrap: break-word; +} +.dim{ + width: 80%; + opacity: 1; +} +.show{ + opacity:1; + width:20%; + transform: translateX(0); +} +header { + background: #fff; + padding:1rem; + box-shadow: 0 2px 4px rgba(0,0,0,0.1); + display: flex; + justify-content: space-between; +} +header h1 { + font-size: 1.5rem; + color: #333; + text-align: center; +} +header .historybtn{ + padding: 8px 10px; + border: none; + background-color: hotpink; + color: white; + font-weight: 600; + font-size: 15px; + border-radius: 5px; + cursor: pointer; + box-shadow: 0px 2px 6px rgba(0, 0, 0,0.15); + transition:transform 0.2s ease,box-shadow 0.2s ease; + position: relative; + z-index: 10; +} +.historybtn:hover{ + transform: translateY(-2px); + box-shadow: 0px 6px 16px rgba(0, 0, 0,0.25); +} + +.messages { + flex: 1; + overflow-y: auto; + padding: 1rem; +} +.message { + max-width: 60%; + margin-bottom: 0.75rem; + padding: 0.75rem 1rem; + border-radius: 1rem; + line-height: 1.4; +} +.message.assistant { + background: #00f7ff; + color: #1d1d1d; + align-self: flex-start; + box-shadow: 0 1px 3px rgba(0,0,0,0.1); +} +.message.user { + background: #007bff; + color: #fff; + align-self: flex-end; +} + +.input-area { + display: flex; + padding: 1rem; + background: #fff; + box-shadow: 0 -2px 4px rgba(0,0,0,0.05); +} +.input-area input { + flex: 1; + padding: 0.75rem 1rem; + border: 1px solid #ccc; + border-radius: 2rem; + font-size: 1rem; + outline: none; + transition: border-color 0.2s; +} +.input-area input:focus { + border-color: #007bff; +} +.input-area button { + margin-left: 0.5rem; + padding: 0 1rem; + border: none; + background: #007bff; + color: #fff; + border-radius: 2rem; + font-size: 1rem; + cursor: pointer; + transition: background 0.2s; +} +.input-area button:hover { + background: #0056b3; + } + + +.history-nav{ + padding: 1rem; + text-align: end; +} + +.history ul{ + list-style: none; +} +.reset{ + padding: 5px 10px; + font-size: 15px; + font-weight: 500; + border: none; + background-color: red; + color: white; + border-radius:5px ; + cursor: pointer; +} +.history ul li{ + cursor: pointer; + padding: 5px; + background-color: rgb(14, 14, 14); + border: 2px solid none; + border-radius: 8px; + margin-bottom: 5px; + color: white; + transition: transform 0.2s ease,box-shadow 0.2s ease; +} +.history ul li:hover{ + background-color:rgb(43, 141, 253); + box-shadow: 0px 6px 16px rgb(0, 0, 0,0.25); + transform: translateY(-2px); +} +.newMessage{ + max-width: 60%; + margin-bottom: 0.75rem; + padding: 0.75rem 1rem; + border-radius: 1rem; + line-height: 1.4; + background: #fff; + color: #333; + align-self: flex-start; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} +.newAnswer{ + max-width: 60%; + margin-bottom: 0.75rem; + padding: 0.75rem 1rem; + border-radius: 1rem; + line-height: 1.4; + background: rgb(0, 110, 255); + color: #ffffff; + align-self: flex-start; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); +} + +#models{ + border: 3px solid black; + border-radius: 10px; + cursor: pointer; +} \ No newline at end of file diff --git a/Satyajit Biswal/Snappy Site/index.html b/Satyajit Biswal/Snappy Site/index.html new file mode 100644 index 0000000..1fa0c3f --- /dev/null +++ b/Satyajit Biswal/Snappy Site/index.html @@ -0,0 +1,46 @@ + + + + + + Snappy Site + + + +
+

Snappy Site

+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+ + + \ No newline at end of file diff --git a/Satyajit Biswal/Snappy Site/script.js b/Satyajit Biswal/Snappy Site/script.js new file mode 100644 index 0000000..b2f3d1f --- /dev/null +++ b/Satyajit Biswal/Snappy Site/script.js @@ -0,0 +1,60 @@ +let container=document.querySelector('.container'); + +//append the box +function appendBox(data){ + let element=document.createElement('div'); + element.className="box"; + element.innerHTML= + `
+ box1 +
+
+ brand:${data.brand} + category: ${data.category} + dimensions_cm: ${data.dimensions_cm} + id: ${data.id} + name: ${data.name} + price:${data.price} + sku:${data.sku} + stock: ${data.stock} + subcategory: ${data.subcategory} + tags: ${data.tags} + weight_kg: ${data.weight_kg} + description: ${data.description} +
+ ` + container.append(element) +} + + +let selctedBtn=document.querySelectorAll('input[type="radio]') + +let checked="All" + +async function main(){ + let x=await fetch("http://43.205.110.71:8000/items") + let json=await x.json(); + json.forEach(e => { + appendBox(e); + }); +} +main() + +async function onOptionChange(event){ + container.innerHTML=``; + checked=event.target.value; + console.log(checked) + let x=await fetch("http://43.205.110.71:8000/items") + let json=await x.json(); + json.forEach(e => { + if(checked != "All"){ + if(e.category === checked){ + appendBox(e); + } + } + else{ + appendBox(e); + } + }); +} + diff --git a/Satyajit Biswal/Snappy Site/style.css b/Satyajit Biswal/Snappy Site/style.css new file mode 100644 index 0000000..c0939c9 --- /dev/null +++ b/Satyajit Biswal/Snappy Site/style.css @@ -0,0 +1,92 @@ + @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2&family=Poppins:wght@300&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +body{ + overflow-y: auto; + background-color: aliceblue; +} +header{ + font-family:sans-serif; + text-align: center; + font-size: 25px; + background-color: #00d4ff; + color: black; +} +.categ{ + padding: 10px; + font-family: "Baloo Bhai 2", sans-serif; + display: flex; + gap: 20px; + justify-content: center; + font-size: 20px; + background-color: #1e1e2f; + } +input[type="radio"]{ + display: none; +} + label{ + color: #333333; + background-color: #ffcc00; + padding: 5px 10px; + border: none; + border-radius: 10px; + cursor: pointer; + transition: transform 0.2s ease,box-shadow 0.2s ease; +} + +label:hover { + transform: translateY(-2px); + box-shadow: 0px 2px 16px black; + color: white; + background-color: #00bcd4; +} +input[type="radio"]:checked + label{ + color: black; + background-color: #4ade80; +} + +.container{ + display: flex; + justify-content: flex-start; + margin-left: 3vw; + margin-right: 3vw; + row-gap: 10vh; + column-gap: 1.5vw; + margin-top: 50px; + flex-wrap: wrap; +} + +.box{ + background-color: white; + width: 22vw; + display: flex; + flex-direction: column; + border: 2px solid black; + border-radius: 20px; + box-shadow: -3px 8px 8px rgb(152 218 240); +} +.content{ + display: flex; + font-family: "Baloo Bhai 2", sans-serif; + padding: 10px 12px; + display: flex; + flex-direction: column; +} +.box .imagecontainer{ + height: 200px; +} +.box img{ + width: 100%; + height: 100%; + object-fit: cover; + object-position: center center; + border-top-left-radius: 20px; + border-top-right-radius: 20px; +} +.key{ + font-weight: bold; + font-family: Poppins,sans-serif; +} \ No newline at end of file diff --git a/Satyajit Biswal/Whack - a - mole Optimised/Bat.jpeg b/Satyajit Biswal/Whack - a - mole Optimised/Bat.jpeg new file mode 100644 index 0000000..6aa3361 Binary files /dev/null and b/Satyajit Biswal/Whack - a - mole Optimised/Bat.jpeg differ diff --git a/Satyajit Biswal/Whack - a - mole Optimised/Bomb.jpeg b/Satyajit Biswal/Whack - a - mole Optimised/Bomb.jpeg new file mode 100644 index 0000000..a3db1cd Binary files /dev/null and b/Satyajit Biswal/Whack - a - mole Optimised/Bomb.jpeg differ diff --git a/Satyajit Biswal/Whack - a - mole Optimised/ElectricStick.jpeg b/Satyajit Biswal/Whack - a - mole Optimised/ElectricStick.jpeg new file mode 100644 index 0000000..c54436f Binary files /dev/null and b/Satyajit Biswal/Whack - a - mole Optimised/ElectricStick.jpeg differ diff --git a/Satyajit Biswal/Whack - a - mole Optimised/Hammer.jpeg b/Satyajit Biswal/Whack - a - mole Optimised/Hammer.jpeg new file mode 100644 index 0000000..2d01a29 Binary files /dev/null and b/Satyajit Biswal/Whack - a - mole Optimised/Hammer.jpeg differ diff --git a/Satyajit Biswal/Whack - a - mole Optimised/Jerry.png b/Satyajit Biswal/Whack - a - mole Optimised/Jerry.png new file mode 100644 index 0000000..919124f Binary files /dev/null and b/Satyajit Biswal/Whack - a - mole Optimised/Jerry.png differ diff --git a/Satyajit Biswal/Whack - a - mole Optimised/Laser.jpeg b/Satyajit Biswal/Whack - a - mole Optimised/Laser.jpeg new file mode 100644 index 0000000..5812d47 Binary files /dev/null and b/Satyajit Biswal/Whack - a - mole Optimised/Laser.jpeg differ diff --git a/Satyajit Biswal/Whack - a - mole Optimised/cactus.png b/Satyajit Biswal/Whack - a - mole Optimised/cactus.png new file mode 100644 index 0000000..a44d667 Binary files /dev/null and b/Satyajit Biswal/Whack - a - mole Optimised/cactus.png differ diff --git a/Satyajit Biswal/Whack - a - mole Optimised/gameover.mp3 b/Satyajit Biswal/Whack - a - mole Optimised/gameover.mp3 new file mode 100644 index 0000000..34033cd Binary files /dev/null and b/Satyajit Biswal/Whack - a - mole Optimised/gameover.mp3 differ diff --git a/Satyajit Biswal/Whack - a - mole Optimised/index.html b/Satyajit Biswal/Whack - a - mole Optimised/index.html new file mode 100644 index 0000000..5812b6c --- /dev/null +++ b/Satyajit Biswal/Whack - a - mole Optimised/index.html @@ -0,0 +1,125 @@ + + + + + + + Whack-a-mole + + + + + +
+
+
+
Choose Your Mode
+
    +
  • + + + +
  • +
  • + + + +
  • +
  • + + + +
  • +
+
+
+
Weapons:
+
+
+ + + +

🔨 Hammer

+

Damage: 1
Reload: 300ms
Special: Basic whack tool

+
+
+
+ + + +

🪓 Spiked Bat

+

Damage: 2
Reload: 2s
Special: Extra damage with slight cooldown

+
+
+ + + +

⚡ Electric Stick

+

Damage: 1
Reload: 3s
Special: Stuns nearby animals for 1 second

+
+
+
+ + + +

🔫 Laser Gun

+

Damage: Instant Kill
Reload: 5s
Special: Pierces through multiple animals

+
+
+
+ + + +

💣 Bomb

+

Damage: 3 (Area Effect)
Reload: 5s
Special: Kills all animals in blast radius +

+
+
+
+
+
+
+

🐹 Whack-a-Mole 🛠️

+
+
+
+
+
+
+
+
+
+
+
+
+
+
Your Score:0
+ +
+
+
+ mole + HP:1 +
+
+ jerry + HP:2 +
+
+ snake + HP:3 +
+
+
+
+ + + + \ No newline at end of file diff --git a/Satyajit Biswal/Whack - a - mole Optimised/main.js b/Satyajit Biswal/Whack - a - mole Optimised/main.js new file mode 100644 index 0000000..69fc2a3 --- /dev/null +++ b/Satyajit Biswal/Whack - a - mole Optimised/main.js @@ -0,0 +1,432 @@ +// let gameoverAudio=new Audio("gameover.mp3"); +// let music = new Audio("music.mp3") + +let mole = document.createElement("img"); +mole.src = "./mole.png"; +mole.className = "mole"; + +let jerry = document.createElement("img"); +jerry.src = "./Jerry.png"; +jerry.className = "mole"; + +let snake = document.createElement("img"); +snake.src = "./snake.png"; +snake.className = "mole"; + +let cactus = document.createElement("img"); +cactus.src = "./cactus.png"; +cactus.className = "cactus"; + + +let scorecard = document.querySelector(".score"); +let score = 0; +scorecard.innerHTML = `Your Score: ${score}`; +let isgameover = false; + + +function randommole() { + let randomIdw = Math.floor((Math.random() * 9) + 1); + return randomIdw.toString() +} + +function randomcactus() { + let randomIdl = Math.floor((Math.random() * 9) + 1); + return randomIdl.toString() +} + +function randomjerry() { + let randomIdj = Math.floor((Math.random() * 9) + 1); + return randomIdj.toString() +} + +function randomsnake() { + let randomIds = Math.floor((Math.random() * 9) + 1); + return randomIds.toString() +} + + +let isactivatespikebat=true; +function spikebat() { + let randombox = document.querySelectorAll(".box"); + randombox.forEach(box => { + box.onclick = (e) => { + if (!isactivatespikebat) { + alert("You can use spikebat after reload time") + return; + } + if (isgameover) return; + let targetid = e.currentTarget.id + if (targetid == cactus.parentNode.id) { + return gameover(); + } + else{ + if (targetid == mole.parentNode.id) { + box.style.backgroundColor='red' + setTimeout(() => { + box.style.backgroundColor = ''; + }, 200); + score += 10; + } + else if (targetid == jerry.parentNode.id) { + box.style.backgroundColor='red' + setTimeout(() => { + box.style.backgroundColor = ''; + }, 200); + score += 20; + } + } + scorecard.innerHTML = `Your Score: ${score}`; + isactivatespikebat = false; + setTimeout(() => { + isactivatespikebat = true; + }, 2000) + } + } + ) +} + +let isactivatehammer=true; +function hammer() { + let randombox = document.querySelectorAll(".box"); + randombox.forEach(box => { + box.onclick = (e) => { + if (!isactivatehammer) { + alert("You can use hammer after reload time") + return; + } + if (isgameover) return; + let targetid = e.currentTarget.id + if (targetid == cactus.parentNode.id) { + return gameover(); + } + else{ + if (targetid == mole.parentNode.id) { + box.style.backgroundColor='red' + setTimeout(() => { + box.style.backgroundColor = ''; + }, 200); + score += 10; + scorecard.innerHTML = `Your Score: ${score}`; + + } + } + isactivatehammer = false; + setTimeout(() => { + isactivatehammer = true; + }, 300) + } + } + ) +} + + +let isactivateelectric=true; +function electricstick() { + let randombox = document.querySelectorAll(".box"); + randombox.forEach(box => { + box.onclick = null; + box.onclick = (e) => { + if (!isactivateelectric) { + alert("You can use electric after reload time") + return; + } + if (isgameover) return; + let targetid = e.currentTarget.id + if (targetid == cactus.parentNode.id) { + return gameover(); + + } + else{ + if (targetid === mole.parentNode.id) { + box.style.backgroundColor='red' + setTimeout(() => { + box.style.backgroundColor = ''; + }, 200); + score += 10; + scorecard.innerHTML = `Your Score: ${score}`; + } + else if (targetid === jerry.parentNode.id) { + box.style.backgroundColor='red' + setTimeout(() => { + box.style.backgroundColor = ''; + }, 200); + score += 20; + scorecard.innerHTML = `Your Score: ${score}`; + } + else { + box.style.backgroundColor='red' + setTimeout(() => { + box.style.backgroundColor = ''; + }, 200); + score += 30; + scorecard.innerHTML = `Your Score: ${score}`; + } + } + isactivateelectric = false; + setTimeout(() => { + isactivateelectric = true; + }, 3000) + + } + } + ) +} + +// function laser(){ + +// } +let isactivatebomb = true; + +function bomb() { + let randombox = document.querySelectorAll(".box"); + randombox.forEach(box => { + box.onclick = () => { + document.querySelectorAll(".box").forEach((e)=>{ + e.style.backgroundColor='red' + setTimeout(() => { + e.style.backgroundColor = ''; + }, 200); + }) + if (!isactivatebomb) { + alert("You can use laser after reload time") + return; + } + if (cactus.parentNode) { + gameover(); + } + else { + if (mole.parentNode) { + if (!isgameover) { + score = score + 10; + scorecard.innerHTML = `Your Score: ${score}`; + } + } + if (jerry.parentNode) { + if (!isgameover) { + score = score + 20; + scorecard.innerHTML = `Your Score: ${score}`; + } + } + if (snake.parentNode) { + if (!isgameover) { + score = score + 30; + scorecard.innerHTML = `Your Score: ${score}`; + } + } + } + isactivatebomb = false; + setTimeout(() => { + isactivatebomb = true; + }, 5000) + }; + }); +} + +let isactivatelaser = true; + +function laser() { + document.querySelectorAll(".box").forEach(box => { + box.onclick = e => { + if (!isactivatelaser) { + alert("You can use laser after reload time") + return; + } + if (isgameover) return; + const clickedBoxId = Number(e.currentTarget.id); + const rowIndex = Math.floor((clickedBoxId - 1) / 3); + const rowIds = [1, 2, 3].map(i => rowIndex * 3 + i); + if (rowIds.includes(Number(cactus.parentNode?.id))) { + document.querySelectorAll(".box").forEach((e)=>{ + if(rowIds.includes(Number(e.id))){ + e.style.backgroundColor='red' + setTimeout(() => { + e.style.backgroundColor = ''; + }, 200); + } + }) + return gameover(); + } + + if (rowIds.includes(Number(mole.parentNode?.id))) { + document.querySelectorAll(".box").forEach((e)=>{ + if(rowIds.includes(Number(e.id))){ + e.style.backgroundColor='red' + setTimeout(() => { + e.style.backgroundColor = ''; + }, 200); + } + }) + score += 10; + } + if (rowIds.includes(Number(jerry.parentNode?.id))) { + document.querySelectorAll(".box").forEach((e)=>{ + if(rowIds.includes(Number(e.id))){ + e.style.backgroundColor='red' + setTimeout(() => { + e.style.backgroundColor = ''; + }, 200); + } + }) + score += 20; + } + if (rowIds.includes(Number(snake.parentNode?.id))) { + document.querySelectorAll(".box").forEach((e)=>{ + if(rowIds.includes(Number(e.id))){ + e.style.backgroundColor='red' + setTimeout(() => { + e.style.backgroundColor = ''; + }, 200); + } + }) + score += 30; + } + + scorecard.innerHTML = `Your Score: ${score}`; + + isactivatelaser = false; + setTimeout(() => { + isactivatelaser = true; + }, 5000) + }; + }); +} + + +let weapons = document.querySelectorAll("input[name='weapon']"); +function getSelectedWeapon() { + let selected = document.querySelector("input[name='weapon']:checked"); + return selected ? selected.value : null; +} +function onWeaponChange() { + let weapon = getSelectedWeapon() || "hammer"; + // document.querySelectorAll(".box").forEach(box => box.onclick = null); + if (weapon == "spikebat") { + spikebat() + } + else if (weapon == "electricstick") { + electricstick() + } + else if (weapon == "bomb") { + bomb() + } + else if (weapon == "laser") { + laser() + } + else { + hammer() + } +} + +document.querySelectorAll("input[name='weapon']").forEach(radio => { + radio.addEventListener("change", onWeaponChange) +}); + +window.addEventListener("DOMContentLoaded", onWeaponChange); + +function game(event) { + if (isgameover) { + return; + } + // music.play(); + if (mole.parentNode) mole.parentNode.removeChild(mole); + if (cactus.parentNode) cactus.parentNode.removeChild(cactus); + if (jerry.parentNode) jerry.parentNode.removeChild(jerry); + if (snake.parentNode) snake.parentNode.removeChild(snake); + + let a = (Math.floor((Math.random() * 9) + 1)); + let b = (Math.floor((Math.random() * 9) + 1)); + let c = (Math.floor((Math.random() * 9) + 1)); + let d = (Math.floor((Math.random() * 9) + 1)); + + // console.log(a,b,c,d) + + boxa = document.getElementById(`${a.toString()}`); + boxb = document.getElementById(`${b.toString()}`); + boxc = document.getElementById(`${c.toString()}`); + boxd = document.getElementById(`${d.toString()}`); + + boxa.append(mole); + if (!(boxb.hasChildNodes())) { + boxb.append(jerry); + } + if (!(boxc.hasChildNodes())) { + boxc.append(cactus); + } + if (!(boxd.hasChildNodes())) { + boxd.append(snake); + } + +} + +//Game over Option +let gameInterval = setInterval(game, 2000); + + +function gameover() { + isgameover = true; + clearInterval(gameInterval); + document.querySelector(".gameover").innerText = + "Game Over!!! Start on clicking Reset button"; +} + + + + +//Level change option +let radio = document.querySelectorAll("input[name='levels']") + +function onModeChange(event) { + clearInterval(gameInterval); + + let x = event.target.value + if (x == "hard") { + gameInterval = setInterval(game, 500); + console.log("its hard") + } + else if (x == "medium") { + gameInterval = setInterval(game, 1000); + } + else { + gameInterval = setInterval(game, 1500); + } + +} + + + + +//highscore +let highscore +let highscorecard = document.querySelector('.highscore') +if (localStorage.getItem("highscore")) { + highscore = localStorage.getItem("highscore"); + highscorecard.innerHTML = `Highscore: ${highscore}`; +} +else { + highscore = 0; + localStorage.setItem("highscore", 0) + highscorecard.innerHTML = `Highscore: ${highscore}`; +} + + + + +//Reset button +resetbtn = document.querySelector('.reset-btn'); +resetbtn.addEventListener('click', () => { + if (score > highscore) { + highscore = score + localStorage.setItem("highscore", highscore) + highscorecard.innerHTML = `Highscore:${highscore}`; + } + score = 0 + scorecard.innerHTML = `Your Score: 0`; + document.querySelector(".gameover").innerText = ""; + isgameover = false; + gameInterval = setInterval(game, 1500); + + + const checked = document.querySelector('input[name="level"]:checked'); + if (checked) onModeChange({ target: checked }); +}) + diff --git a/Satyajit Biswal/Whack - a - mole Optimised/mole.png b/Satyajit Biswal/Whack - a - mole Optimised/mole.png new file mode 100644 index 0000000..60eaa2b Binary files /dev/null and b/Satyajit Biswal/Whack - a - mole Optimised/mole.png differ diff --git a/Satyajit Biswal/Whack - a - mole Optimised/music.mp3 b/Satyajit Biswal/Whack - a - mole Optimised/music.mp3 new file mode 100644 index 0000000..f1507af Binary files /dev/null and b/Satyajit Biswal/Whack - a - mole Optimised/music.mp3 differ diff --git a/Satyajit Biswal/Whack - a - mole Optimised/script.js b/Satyajit Biswal/Whack - a - mole Optimised/script.js new file mode 100644 index 0000000..f6c4527 --- /dev/null +++ b/Satyajit Biswal/Whack - a - mole Optimised/script.js @@ -0,0 +1,171 @@ +// let gameoverAudio=new Audio("gameover.mp3"); +// let music = new Audio("music.mp3") + +let mole= document.createElement("img"); +mole.src="./mole.png"; +mole.className="mole"; + +let jerry= document.createElement("img"); +jerry.src="./Jerry.png"; +jerry.className="mole"; + +let snake= document.createElement("img"); +snake.src="./snake.png"; +snake.className="mole"; + +let cactus=document.createElement("img"); +cactus.src="./cactus.png"; +cactus.className="cactus"; + + +let scorecard=document.querySelector(".score"); +let score=0; +scorecard.innerHTML=`Your Score: ${score}`; +let isgameover=false; + +// function updateScore(){ +// score =score+10; +// console.log("Mole clicked"); +// scorecard.innerHTML=`Your Score: ${score}`; +// } + + +function randommole(){ + let randomIdw=Math.floor((Math.random()*9)+1); + return randomIdw.toString() +} + +function randomcactus(){ + let randomIdl=Math.floor((Math.random()*9)+1); + return randomIdl.toString() +} + +function randomjerry(){ + let randomIdj=Math.floor((Math.random()*9)+1); + return randomIdj.toString() +} + +function randomsnake(){ + let randomIds=Math.floor((Math.random()*9)+1); + return randomIds.toString() +} + +//Main game +function game(){ + if(isgameover) { + return; + } + // music.play(); + if (mole.parentNode) mole.parentNode.removeChild(mole); + if (cactus.parentNode) cactus.parentNode.removeChild(cactus); + + let random1=randommole(); + boxw=document.getElementById(`${random1}`); + + let random2=randomcactus(); + boxl=document.getElementById(`${random2}`); + + if(random1 !== random2){ + boxw.append(mole); + mole.onclick = () => { + if(!isgameover){ + updateScore(score); + } + }; + boxl.append(cactus); + cactus.onclick=()=>{ + gameover(); + } + } + else{ + boxw.append(mole); + mole.onclick = () => { + if(!isgameover){ + updateScore(score); + } + }; + } +} + + + +//Game over Option +let gameInterval = setInterval(game, 2000); + + +function gameover(){ + isgameover = true; + clearInterval(gameInterval); + document.querySelector(".gameover").innerText = + "Game Over!!! Start on clicking Reset button"; +} + + + + +//Level change option +let radio=document.querySelectorAll('input[type="radio"]') + + +function onModeChange(event){ + clearInterval(gameInterval); + + let x=event.target.value + if(x=="hard"){ + gameInterval = setInterval(game, 500); + console.log("its hard") + } + else if(x=="medium"){ + gameInterval = setInterval(game, 1000); + } + else{ + gameInterval = setInterval(game, 1500); + } + +} + + + + +//highscore +let highscore +let highscorecard=document.querySelector('.highscore') +if(localStorage.getItem("highscore")){ + highscore=localStorage.getItem("highscore"); + highscorecard.innerHTML=`Highscore: ${highscore}`; +} +else{ + highscore=0; + localStorage.setItem("highscore",0) + highscorecard.innerHTML=`Highscore: ${highscore}`; +} + + + + +//Reset button +resetbtn=document.querySelector('.reset-btn'); +resetbtn.addEventListener('click',()=>{ + if(score>highscore){ + highscore=score + localStorage.setItem("highscore",highscore) + highscorecard.innerHTML=`Highscore:${highscore}`; + } + score=0 + scorecard.innerHTML=`Your Score: 0`; + document.querySelector(".gameover").innerText =""; + isgameover=false; + gameInterval = setInterval(game, 1500); + + + const checked = document.querySelector('input[name="level"]:checked'); + if (checked) onModeChange({ target: checked }); +}) + + + +let weapons=document.querySelectorAll("input[type='radio']") +function onWeaponChange(event){ + console.log(event.target.value) +} + diff --git a/Satyajit Biswal/Whack - a - mole Optimised/snake.png b/Satyajit Biswal/Whack - a - mole Optimised/snake.png new file mode 100644 index 0000000..bc18d79 Binary files /dev/null and b/Satyajit Biswal/Whack - a - mole Optimised/snake.png differ diff --git a/Satyajit Biswal/Whack - a - mole Optimised/style.css b/Satyajit Biswal/Whack - a - mole Optimised/style.css new file mode 100644 index 0000000..c1e2779 --- /dev/null +++ b/Satyajit Biswal/Whack - a - mole Optimised/style.css @@ -0,0 +1,246 @@ +@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); + +*{ + margin: 0; + padding: 0; + font-family: "Baloo Bhai", sans-serif; +} + +body{ + background-color: #fef9ef; +} +.nav-bar { + height: 10vh; + display: flex; + align-items: center; + justify-content: space-between; + font-size: 30px; + background-color: deeppink; + color: white; + padding-left: 20px; + padding-right: 50px; +} +.highscore{ + font-size: 20px; +} +.contain{ + display: grid; + grid-template-columns: 35vw 45vw 20vw; + grid-template-rows: 90vh; +} +.level-instruction{ + display: flex; + flex-direction: column; + align-items: center; +} +.level{ + font-size: 25px; +} +.mode{ + padding-top: 20px; + color: rgb(255, 0, 195); + font-weight: 600; + padding-bottom: 10px; +} +.level-mode{ + list-style: none; + display: flex; + /* flex-direction: column; */ + gap: 10px; +} +.level-mode li{ + display: flex; + /* justify-content: center; */ + align-items: center; + height:50px; +} +.level-btn{ + padding: 10px 30px; + border-radius: 2000px; + cursor: pointer; + border: none; + transition: transform 0.2s ease,box-shadow 0.2s ease; + box-shadow: 0 2px 8px rgba(0,0,0,0.15); + font-weight: bold; + font-size: 20px; + color: #ffffff; +} +.level-btn:hover{ + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(0,0,0.25); +} +.level-mode .easy{ + background:#00ff2f; + color: #ffffff; +} +.level-mode .medium{ + background:#f59e0b; + color: #ffffff; +} +.level-mode .hard{ + background:#ef4444; + color: #ffffff; +} +.instruction{ + margin: 40px 30px; + font-size: 20px; + text-align: justify; + border: 5px solid black; + outline: 5px solid rgb(164, 164, 164); + border-radius: 30px; + padding: 10px 20px 20px 20px; + background-color: #0080ffdf; + color: white; + font-style:italic; +} +.heading{ + font-size: 25px; + font-weight: 600; + color:rgb(0, 255, 229) ; + padding-bottom: 10px; +} + +.maingame{ + display: flex; + flex-direction: column; + align-items: center; + padding:10px ; +} +.game{ + padding: 25px; + display: grid; + grid-template-columns: repeat(3,10vw); + grid-template-rows: repeat(3,10vw); + gap: 10px; +} +.box{ + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + background-color: #44ef75; + border: none; + border-radius: 20px; +} +.reset-btn{ + color: #1e3a8a; + background-color: #a3e469; +} + +input[type="radio"] { + opacity: 0; + position: fixed; + width: 0; + } + + input[type="radio"]:checked + .easy{ + background-color: #bbf7d0; + color: #065f46; +} +input[type="radio"]:checked + .medium{ + background-color: #fde68a; + color: #92400e; +} +input[type="radio"]:checked + .hard{ + background-color: #fecaca; + color: #991b1b; +} +.mole{ + height: 110px; +} +.cactus{ + height: 110px; +} +.gameover{ + color: deeppink; + font-size: 20px; + padding: 20px; + +} + +.scorecard{ + display: flex; + flex-direction: column; + align-items: center; +} +.score{ + color: black; + background-color: aqua; + padding: 20px 30px; + border: 2px solid black; + border-radius: 10px; + width: max-content; + margin: 30px; + font-size: 20px; + font-weight: 600; +} + +.gameover{ + font-weight: 600; + color: rgb(39, 108, 238); +} + +.weapon-box{ + align-self: baseline; + margin-left: 50px; + margin-top: 30px; +} +.weapons-list{ + display: flex; + flex-direction: column; + gap: 20px; +} + +.weapon-option{ + display: flex; + gap: 10px; +} +.weapon-option .weapon-name{ + border: 3px solid rgb(20, 255, 118); + height: 60px; + width: 60px; + border-radius: 50px; + cursor: pointer; + transition:box-shadow 0.2s ease,transform 0.2s ease; +} +.weapon-name img{ + object-fit: cover; + object-position: center center; + height: 100%; + width:100%; + border-radius: 50px; +} + +.weapons-option label:hover{ + box-shadow: 0px 0px 16px red; + transform: translateY(-2px); +} +input[type='radio']:checked + .weapon-name { + border: 4px solid rgba(255, 20, 20, 0.953); +} + +.weapon-desc{ + padding: 5px 10px; + background-color: rgb(52, 177, 255); + color: white; + border-radius: 20px ; + font-size: 12px; +} + +.animals{ + display: flex; + flex-direction: column; + gap: 20px; +} +.animal{ + display: flex; + justify-content: center; + align-items: center; + gap: 10px; +} +.animal span{ + background-color: red; + padding: 5px 10px; + color: white; + border-radius: 10px; +} \ No newline at end of file diff --git a/Satyajit Biswal/Whack - a - mole Optimised/ting.mp3 b/Satyajit Biswal/Whack - a - mole Optimised/ting.mp3 new file mode 100644 index 0000000..6dbc877 Binary files /dev/null and b/Satyajit Biswal/Whack - a - mole Optimised/ting.mp3 differ