diff --git a/apnacollege-deltaprojects/README.md b/apnacollege-deltaprojects/README.md new file mode 100644 index 0000000..bf31221 --- /dev/null +++ b/apnacollege-deltaprojects/README.md @@ -0,0 +1 @@ +# tic-tac-toe-game \ No newline at end of file diff --git a/apnacollege-deltaprojects/board.html b/apnacollege-deltaprojects/board.html new file mode 100644 index 0000000..c175de8 --- /dev/null +++ b/apnacollege-deltaprojects/board.html @@ -0,0 +1,38 @@ + + + + + + + Lets Play friends..... + + + + + + + + +
+
+ + + + + + + + + +
+
+ + + + + + + + + + \ No newline at end of file diff --git a/apnacollege-deltaprojects/board2.html b/apnacollege-deltaprojects/board2.html new file mode 100644 index 0000000..5df9bf0 --- /dev/null +++ b/apnacollege-deltaprojects/board2.html @@ -0,0 +1,38 @@ + + + + + + + Lets Play with computer..... + + + + + + + + +
+
+ + + + + + + + + +
+
+ + + + + + + + + + \ No newline at end of file diff --git a/apnacollege-deltaprojects/index.html b/apnacollege-deltaprojects/index.html new file mode 100644 index 0000000..483180d --- /dev/null +++ b/apnacollege-deltaprojects/index.html @@ -0,0 +1,35 @@ + + + + + + + + Tic Tac Toe -rushi38 + + + + + + +
+ Tic Tac Toe +
+ + +
+
+ + + + + + + + + \ No newline at end of file diff --git a/apnacollege-deltaprojects/pvc.js b/apnacollege-deltaprojects/pvc.js new file mode 100644 index 0000000..926dc4e --- /dev/null +++ b/apnacollege-deltaprojects/pvc.js @@ -0,0 +1,225 @@ +const cells = document.querySelectorAll(".btn"); + +let board = ["", "", "", "", "", "", "", "", ""]; +let gameover = false; +let currentPlayer = "x"; + +const winpattern = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6] +]; + +cells.forEach((cell, index) => { + cell.addEventListener("click", () => { + if (currentPlayer !== "x") return; + turn(cell, index); + }); +}); + +function turn(cell, index) { + + console.log(cell); + console.log("cell"); + if (board[index] !== "" || gameover) return; + + + + board[index] = currentPlayer; + + renderSymbol(cell); + + if (checkwinner()) { + const winningPattern = winpattern.find(pattern => { + const [a, b, c] = pattern; + return board[a] && board[a] === board[b] && board[a] === board[c]; + }); + + Highlightwin(winningPattern); + + + requestAnimationFrame(() => { + setTimeout(() => { + popup(`winner of this match is ${currentPlayer}`); + }, 1500); + }); + + gameover = true; + setTimeout(resetfun,3500) + return; + } + + if (checkdraw()) { + popup("its draw"); + gameover = true; + setTimeout(resetfun, 3100); + return; + } + + currentPlayer="o"; + setTimeout(computerwin,600); + playername(currentPlayer); +} +function computerwin(){ + + if (gameover) return; + + let emptyIndexes = board + .map((v, i) => v === "" ? i : null) + .filter(v => v !== null); + + if (emptyIndexes.length === 0) return; + + let move = emptyIndexes[Math.floor(Math.random() * emptyIndexes.length)]; + board[move] = "o"; + renderSymbol(cells[move]); + + if (checkwinner()) { + popup("Computer wins!"); + gameover = true; + setTimeout(resetfun, 3000); + return; + } + currentPlayer='x'; + playername(currentPlayer); +} + +function popup(content) { + const popups = document.createElement("div"); + + const glowColor = currentPlayer === "x" ? "red" : "dodgerblue"; + + popups.innerHTML = `${content} `; + + popups.style.position = "fixed"; + popups.style.top = "50%"; + popups.style.left = "50%"; + popups.style.transform = "translate(-50%, -50%)"; + + /* responsive sizing */ + popups.style.width = "min(85vw, 360px)"; + popups.style.padding = "clamp(16px, 4vw, 30px)"; + + popups.style.display = "flex"; + popups.style.justifyContent = "center"; + popups.style.alignItems = "center"; + popups.style.textAlign = "center"; + + popups.style.background = "rgba(0,0,0,0.85)"; + popups.style.color = "white"; + popups.style.fontWeight = "700"; + popups.style.fontSize = "clamp(18px, 5vw, 28px)"; + popups.style.lineHeight = "1.4"; + + popups.style.borderRadius = "clamp(12px, 4vw, 18px)"; + popups.style.boxShadow = ` + 0 0 15px ${glowColor}, + 0 0 35px ${glowColor} + `; + + popups.style.zIndex = "9999"; + + document.body.appendChild(popups); + + setTimeout(() => popups.remove(), 3000); +} + +function playername(pname) { + let name = document.getElementById("player-indicator"); + + if (!name) { + name = document.createElement("div"); + name.id = "player-indicator"; + document.body.appendChild(name); + } + + const glowColor = pname === "x" ? "red" : "dodgerblue"; + name.textContent = `${pname}'s turn`; + + const isMobile = window.innerWidth <= 600; + + name.style.position = "fixed"; + name.style.background = "rgba(0,0,0,0.85)"; + name.style.color = "white"; + name.style.fontWeight = "700"; + name.style.textAlign = "center"; + name.style.borderRadius = "12px"; + name.style.boxShadow = `0 0 12px ${glowColor}`; + name.style.zIndex = "999"; + + if (isMobile) { + /* 📱 Mobile styles */ + name.style.bottom = "16px"; + name.style.top = "auto"; + name.style.left = "50%"; + name.style.transform = "translateX(-50%)"; + + name.style.width = "auto"; + name.style.padding = "8px 16px"; + name.style.fontSize = "14px"; + } +} + + +function renderSymbol(cell) { + cell.textContent = currentPlayer; + cell.style.fontSize = "80px"; + cell.style.fontWeight = "bold"; + cell.style.borderRadius = "10px"; + cell.style.transition = "all 0.8s ease"; + + if (currentPlayer == "x") { + cell.style.color = "red"; + cell.style.boxShadow = "0 0 30px red"; + cell.style.textShadow = "0 0 20px red"; + } else { + cell.style.color = "blue"; + cell.style.boxShadow = "0 0 30px blue"; + cell.style.textShadow = "0 0 20px blue"; + } +} + +function checkdraw() { + return board.every(cell => cell !== ""); +} + +function checkwinner() { + return winpattern.some(pattern => { + const [a, b, c] = pattern; + return ( + board[a] && + board[a] == board[b] && + board[a] == board[c] + + ); + }); +} + +function resetfun() { + board = ["", "", "", "", "", "", "", "", ""]; + gameover = false; + currentPlayer = "x"; + + cells.forEach(cell => { + cell.textContent = ""; + cell.style.boxShadow = "0 0 30px rgba(244, 105, 105, 0.5)"; + cell.style.textShadow = "none"; + cell.style.border = "none"; + + }); +} +function Highlightwin(pattern) { + pattern.forEach(index => { + cells[index].style.boxShadow = "0 0 20px gold"; + cells[index].style.border = "3px solid gold"; + }); + + +} + + diff --git a/apnacollege-deltaprojects/script.js b/apnacollege-deltaprojects/script.js new file mode 100644 index 0000000..e6944f9 --- /dev/null +++ b/apnacollege-deltaprojects/script.js @@ -0,0 +1,202 @@ +// pvsp +const cells = document.querySelectorAll(".btn"); + +let board = ["", "", "", "", "", "", "", "", ""]; +let gameover = false; +let currentPlayer = "x"; + +const winpattern = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6] +]; + +cells.forEach((cell, index) => { + cell.addEventListener("click", () => turn(cell, index)); +}); + +function turn(cell, index) { + + console.log(cell); + console.log("cell"); + if (board[index] !== "" || gameover) return; + + board[index] = currentPlayer; + + renderSymbol(cell); + + if (checkwinner()) { + const winningPattern = winpattern.find(pattern => { + const [a, b, c] = pattern; + return board[a] && board[a] === board[b] && board[a] === board[c]; + }); + + Highlightwin(winningPattern); + + + requestAnimationFrame(() => { + setTimeout(() => { + popup(`winner of this match is ${currentPlayer}`); + }, 1500); + }); + + gameover = true; + setTimeout(resetfun,3500) + return; + } + + if (checkdraw()) { + popup("its draw"); + gameover = true; + setTimeout(resetfun, 3100); + return; + } + + if (currentPlayer == "x") { + currentPlayer = "o"; + } else { + currentPlayer = "x"; + } + playername(currentPlayer); +} + + +function popup(content) { + const popups = document.createElement("div"); + + const glowColor = currentPlayer === "x" ? "red" : "dodgerblue"; + + popups.innerHTML = `${content}`; + + popups.style.position = "fixed"; + popups.style.top = "50%"; + popups.style.left = "50%"; + popups.style.transform = "translate(-50%, -50%)"; + + /* responsive sizing */ + popups.style.width = "min(85vw, 360px)"; + popups.style.padding = "clamp(16px, 4vw, 30px)"; + + popups.style.display = "flex"; + popups.style.justifyContent = "center"; + popups.style.alignItems = "center"; + popups.style.textAlign = "center"; + + popups.style.background = "rgba(0,0,0,0.85)"; + popups.style.color = "white"; + popups.style.fontWeight = "700"; + popups.style.fontSize = "clamp(20px, 8vw, 35px)"; + popups.style.lineHeight = "1.4"; + + popups.style.borderRadius = "clamp(12px, 4vw, 18px)"; + popups.style.boxShadow = ` + 0 0 15px ${glowColor}, + 0 0 35px ${glowColor} + `; + + popups.style.zIndex = "9999"; + + document.body.appendChild(popups); + + setTimeout(() => popups.remove(), 3000); +} +function playername(pname) { + let name = document.getElementById("player-indicator"); + + if (!name) { + name = document.createElement("div"); + name.id = "player-indicator"; + document.body.appendChild(name); + } + + const glowColor = pname === "x" ? "red" : "dodgerblue"; + name.textContent = `${pname}'s turn`; + + const isMobile = window.innerWidth <= 460; + + name.style.position = "fixed"; + name.style.background = "rgba(0,0,0,0.85)"; + name.style.color = "white"; + name.style.fontWeight = "700"; + name.style.textAlign = "center"; + name.style.borderRadius = "12px"; + name.style.boxShadow = `0 0 12px ${glowColor}`; + name.style.zIndex = "999"; + + if (isMobile) { + /* 📱 Mobile styles */ + name.style.bottom = "16px"; + name.style.top = "auto"; + name.style.left = "50%"; + name.style.transform = "translateX(-50%)"; + + name.style.width = "auto"; + name.style.padding = "8px 16px"; + name.style.fontSize = "14px"; + + } +} + + +function renderSymbol(cell) { + cell.textContent = currentPlayer; + cell.style.fontSize = "80px"; + cell.style.fontWeight = "bold"; + cell.style.borderRadius = "10px"; + cell.style.transition = "all 0.8s ease"; + + if (currentPlayer == "x") { + cell.style.color = "red"; + cell.style.boxShadow = "0 0 30px red"; + cell.style.textShadow = "0 0 20px red"; + } else { + cell.style.color = "blue"; + cell.style.boxShadow = "0 0 30px blue"; + cell.style.textShadow = "0 0 20px blue"; + } +} + +function checkdraw() { + return board.every(cell => cell !== ""); +} + +function checkwinner() { + return winpattern.some(pattern => { + const [a, b, c] = pattern; + return ( + board[a] && + board[a] == board[b] && + board[a] == board[c] + + ); + }); +} + +function resetfun() { + board = ["", "", "", "", "", "", "", "", ""]; + gameover = false; + currentPlayer = "x"; + + cells.forEach(cell => { + cell.textContent = ""; + cell.style.boxShadow = "0 0 30px rgba(244, 105, 105, 0.5)"; + cell.style.textShadow = "none"; + cell.style.border = "none"; + + }); +} +function Highlightwin(pattern) { + pattern.forEach(index => { + cells[index].style.boxShadow = "0 0 20px gold"; + cells[index].style.border = "3px solid gold"; + }); + + +} +// pvsc + diff --git a/apnacollege-deltaprojects/style.css b/apnacollege-deltaprojects/style.css new file mode 100644 index 0000000..3f28153 --- /dev/null +++ b/apnacollege-deltaprojects/style.css @@ -0,0 +1,147 @@ +* { + margin: 0; + padding: 0; + overflow: hidden; + + +} + +body { + height: 100vh; + width: 100vw; + + background-image: url("tictactoeicon.png"); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + background-color: black; +} + +.home { + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + height: 100vh; + width: 100vw; + backdrop-filter: blur(10px); +} + +.home img { + display: flex; + align-items: center; + + height: auto; + width: 500px; + backdrop-filter: blur(10px); + +} + +.buttons { + display: flex; + flex-direction: column; + align-items: center; + gap: 15px; + +} + +.option { + display: flex; + align-items: center; + justify-content: center; + height: 60px; + width: 260px; + background: linear-gradient(to right, red, blue); + font-size: 25px; + + border-radius: 15px; + transition: all 0.4s ease-in-out 0s; + cursor: pointer; + + +} + +.option a { + text-decoration: none; + color: rgb(247, 217, 217); +} + +.option:hover { + transform: scale(1.2); + background: linear-gradient(135deg, #ccfb8f, #6cadf3); + border: 5px solid rgb(7, 188, 248); + +} + +/* boardgame css*/ + +.board { + height: 100vh; + width: 100vw; + background: black; + display: flex; + justify-content: center; + align-items: center; +} + +.btn { + width: 100%; + height: 100%; + + display: flex; + justify-content: center; + align-items: center; + + font-size: clamp(32px, 12vw, 72px); + font-weight: bold; + + border-radius: clamp(8px, 3vw, 14px); + + background: radial-gradient(circle at center, + #1c1c1c 20%, + #050505 80%); + box-Shadow: 0 0 30px rgba(244, 105, 105, 0.5); + border: none; + cursor: pointer; + touch-action: manipulation; + + transition: transform 0.25s ease, box-shadow 0.25s ease; +} + +.btn:hover { + box-shadow: 0 0 20px rgb(46, 19, 137); + border-radius: 15px; + transform: scale(1.1); +} + +.container { + + height: 600px; + + aspect-ratio: 1 / 1; + + gap: 2vw; + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(3, 1fr); + + color: white; + width: min(90vw, 460px); + +} + +#player-indicator { + position: fixed; + top: 30px; + left: 30px; + + padding: 16px 32px; + background: rgba(0, 0, 0, 0.9); + color: white; + + font-size: 20px; + font-weight: 700; + border-radius: 14px; + + z-index: 1000; +}