PLAY
const gameData = { 1: { id: "image01", text: "Game 1 description", link: "game1", pos: { x: -200, y: -150 }, }, 2: { id: "image02", text: "Game 2 description", link: "game2", pos: { x: 0, y: -200 }, w: 120, h: 120, }, 3: { id: "image03", text: "Game 3 description", link: "game3", pos: { x: 200, y: -150 }, w: 110, h: 110, }, 4: { id: "image04", text: "Game 4 description", link: "game4", pos: { x: -180, y: 100 }, w: 90, h: 90, }, 5: { id: "image05", text: "Game 5 description", link: "game5", pos: { x: 0, y: 180 }, w: 105, h: 105, }, 6: { id: "image06", text: "Game 6 description", link: "game6", pos: { x: 180, y: 100 }, w: 115, h: 115, }, }; const gradients = [ "linear-gradient(135deg, #667eea 0%, #764ba2 100%)", "linear-gradient(135deg, #f093fb 0%, #f5576c 100%)", "linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)", "linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)", "linear-gradient(135deg, #fa709a 0%, #fee140 100%)", "linear-gradient(135deg, #30cfd0 0%, #330867 100%)", ]; let overlayLock = false; function initImageBoxes() { const container = document.querySelector(".container"); Object.keys(gameData).forEach((key, index) => { const data = gameData[key]; const sourceImage = document.getElementById(data.id); const box = document.createElement("div"); box.className = "image-box"; box.style.setProperty("--delay", `${0.2 + index * 0.2}s`); box.style.setProperty("--end-x", data.pos.x + "px"); box.style.setProperty("--end-y", data.pos.y + "px"); if (data.w) box.style.width = data.w + "px"; if (data.h) box.style.height = data.h + "px"; if (sourceImage && sourceImage.src) { box.style.backgroundImage = `url(${sourceImage.src})`; } else { box.style.backgroundImage = gradients[index % gradients.length]; } box.addEventListener("click", () => openOverlay(key)); container.appendChild(box); }); replayAnimation(); } function openOverlay(num) { if (overlayLock) return; overlayLock = true; const { id, text, link } = gameData[num]; const source = document.getElementById(id); const enlarged = document.getElementById("enlargedBox"); if (source && source.src) { enlarged.style.backgroundImage = `url(${source.src})`; } else { enlarged.style.backgroundImage = gradients[num - 1]; } document.getElementById("overlayText").innerText = text; document.getElementById("playBtn").onclick = () => window.open(`https://play.agon.lol/${link}`, "_blank"); document.getElementById("overlay").classList.add("active"); } function closeOverlay(e) { if (e.target === document.getElementById("overlay")) { document.getElementById("overlay").classList.remove("active"); overlayLock = false; } } function replayAnimation() { const boxes = document.querySelectorAll(".image-box"); boxes.forEach((box, index) => { box.classList.remove("animated"); box.style.animation = "none"; void box.offsetHeight; setTimeout(() => { box.style.animation = `expandFromCenter 0.6s ${ 0.2 + index * 0.2 }s ease-out forwards`; setTimeout(() => box.classList.add("animated"), 800 + index * 200); }, 10); }); } document.addEventListener("DOMContentLoaded", initImageBoxes);
Click on any of our games above
v v v
NEW GAME RELEASES
That's a
logo
, not a
game
.
