Animal Crush Saga アニマルくらしゅさが ການປວດສັດ Animalis c..
✨ Wongsapat Asavawongsanon
<html lang="en" dir="ltr"> <head> <style> @font-face { font-family: "LostFish"; src: url("https://raw.githubusercontent.com/63070138/Multi/main/Tomeoftheunknown-3gL3.ttf") format("woff"), url("https://raw.githubusercontent.com/63070138/Multi/main/LostFish-5DOz.woff2") format("woff2"); } html { min-height: 100vh; cursor:url(https://cdn.discordapp.com/attachments/798207254897754122/807572501102198814/cursor1.png),auto; } .grid { height: 560px; min-width: 560px; display: flex; flex-wrap: wrap; margin-left: 80px; margin-top: 50px; background-color: rgba(109, 127, 151, 0.5); padding:5px; border-radius: 10px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff; color: #85796b; } .grid div { height: 70px; width: 70px; } .grid:hover { cursor:url(https://cdn.discordapp.com/attachments/798207254897754122/807572503408279613/cursor1-2.png),auto; } h3 { font-family: "LostFish", sans-serif; font-size:30px; } h1 { font-family: "LostFish", sans-serif; margin-top: -10px; } .invisible { background-color: white; } body { background-image: url("https://media.discordapp.net/attachments/798207254897754122/807279570067652629/47c291aeec4d497d911fd4cfa09ae554.png?width=1201&height=676"); max-width: 100vh; display: flex; background-size: cover; background-repeat: no-repeat; } .score-board { background-color: pink; border-radius: 10px; margin-top: 200px; margin-left: 200px; margin-bottom: 350px; min-width: 200px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: top; background-image: linear-gradient(#FDC7AB, #FEDEB7); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) inset, 0 1px 0 #fff; color: black; height: 150px; } .overlay-text { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; justify-content: center; align-items: center; z-index: 100; color: #F4A460; font-family: LostFish, serif; } .overlay-text-small { font-size: 0.3em; font-family: LostFish, serif; } .overlay-text.visible { display: flex; flex-direction: column; animation: overlay-grow 500ms forwards; } @keyframes overlay-grow { from { background-color: rgba(0, 0, 0, 0); font-size: 0; } to { background-color: rgba(0, 0, 0, 0.8); font-size: 10em; } } .overlay-text { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; justify-content: center; align-items: center; z-index: 100; color: #F4A460; font-family: LostFish, serif; } .overlay-text-small { font-size: 0.3em; font-family: LostFish, serif; } .overlay-text.visible { display: flex; flex-direction: column; animation: overlay-grow 500ms forwards; } @keyframes overlay-grow { from { background-color: rgba(0, 0, 0, 0); font-size: 0; } to { background-color: rgba(0, 0, 0, 0.8); font-size: 10em; } } #progressBar{ display: block; max-width: 50%; top:17.25rem; position:absolute; left:39.25rem; height:50px; } #score{ display: block; max-width: 50%; top:16.75rem; position:absolute; left:18.5rem; height:50px; } </style> <meta charset="utf-8"> <title>Animal Crush Saga</title> <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400&display=swap" rel="stylesheet"> </head> <body> <audio> <source src="https://raw.githubusercontent.com/63070138/Multi/main/yt1s.com%20-%20Hakuna%20Matata%20%20El%20Rey%20Le%C3%B3n%20%20Karaoke_v720P.mp4"> </audio> <div class="overlay-text visible"> Click to Start </div> <div id="victory-text" class="overlay-text"> Time's UP! <span class="overlay-text-small">Click to Restart</span> </div> </div> <div class="score-board"> <h3>Score</h3> <h3 id="score"></h3> </div> <div class="score-board"> <h3>Time Left</h3> <h1><span id="myFuction"></span></h1> <progress value="0" max="60" id="progressBar"></progress> </div> <div class="grid"></div> </body> <script> const audioElem = document.querySelector("audio"); document.body.addEventListener("click", () => { audioElem.play(); audioElem.volume = 0.3; }); class AudioController { constructor() { this.bgMusic = new Audio('https://github.com/63070138/Multi/raw/main/BGmusic.mp3'); this.flipSound = new Audio('https://raw.githubusercontent.com/63070138/Multi/main/Flip.mp3'); this.matchSound = new Audio('https://raw.githubusercontent.com/63070138/Multi/main/Coin.mp3'); this.victorySound = new Audio('https://raw.githubusercontent.com/63070138/Multi/main/VictorySound.mp3'); this.notmatchSound = new Audio("https://raw.githubusercontent.com/63070138/Multi/main/Bruh.mp3"); this.gameOverSound = new Audio('https://raw.githubusercontent.com/63070138/Multi/main/Gameover.mp3'); } gameover(){ this.gameOverSound.play(); this.bgMusic.pause(); } match(){ this.matchSound.play() this.matchSound.volume = 0.1; } } const sound = new AudioController; document.addEventListener("DOMContentLoaded", () => { const grid = document.querySelector(".grid"); const scoreDisplay = document.getElementById("score"); const width = 8; const squares = []; let score = 0; const candyColors = [ "url(https://media.discordapp.net/attachments/798207254897754122/807244334315339796/icon5.png)", "url(https://media.discordapp.net/attachments/798207254897754122/807244336193863750/icon6.png)", "url(https://media.discordapp.net/attachments/798207254897754122/807244338080776222/icon1.png)", "url(https://media.discordapp.net/attachments/798207254897754122/807244339264618557/icon2.png)", "url(https://media.discordapp.net/attachments/798207254897754122/807244340611121152/icon3.png)", "url(https://media.discordapp.net/attachments/798207254897754122/807244342070214686/icon4.png)" ]; //create your board function createBoard() { for (let i = 0; i < width * width; i++) { const square = document.createElement("div"); square.setAttribute("draggable", true); square.setAttribute("id", i); let randomColor = Math.floor(Math.random() * candyColors.length); square.style.backgroundImage = candyColors[randomColor]; grid.appendChild(square); squares.push(square); } } createBoard(); // Dragging the Candy let colorBeingDragged; let colorBeingReplaced; let squareIdBeingDragged; let squareIdBeingReplaced; squares.forEach((square) => square.addEventListener("dragstart", dragStart)); squares.forEach((square) => square.addEventListener("dragend", dragEnd)); squares.forEach((square) => square.addEventListener("dragover", dragOver)); squares.forEach((square) => square.addEventListener("dragenter", dragEnter)); squares.forEach((square) => square.addEventListener("drageleave", dragLeave)); squares.forEach((square) => square.addEventListener("drop", dragDrop)); function dragStart() { colorBeingDragged = this.style.backgroundImage; squareIdBeingDragged = parseInt(this.id); // this.style.backgroundImage = '' } function dragOver(e) { e.preventDefault(); } function dragEnter(e) { e.preventDefault(); } function dragLeave() { this.style.backgroundImage = ""; } function dragDrop() { colorBeingReplaced = this.style.backgroundImage; squareIdBeingReplaced = parseInt(this.id); this.style.backgroundImage = colorBeingDragged; squares[squareIdBeingDragged].style.backgroundImage = colorBeingReplaced; } function dragEnd() { //What is a valid move? let validMoves = [ squareIdBeingDragged - 1, squareIdBeingDragged - width, squareIdBeingDragged + 1, squareIdBeingDragged + width ]; let validMove = validMoves.includes(squareIdBeingReplaced); if (squareIdBeingReplaced && validMove) { squareIdBeingReplaced = null; } else if (squareIdBeingReplaced && !validMove) { squares[squareIdBeingReplaced].style.backgroundImage = colorBeingReplaced; squares[squareIdBeingDragged].style.backgroundImage = colorBeingDragged; } else squares[squareIdBeingDragged].style.backgroundImage = colorBeingDragged; } //drop candies once some have been cleared function moveIntoSquareBelow() { for (i = 0; i < 55; i++) { if (squares[i + width].style.backgroundImage === "") { squares[i + width].style.backgroundImage = squares[i].style.backgroundImage; squares[i].style.backgroundImage = ""; const firstRow = [0, 1, 2, 3, 4, 5, 6, 7]; const isFirstRow = firstRow.includes(i); if (isFirstRow && squares[i].style.backgroundImage === "") { let randomColor = Math.floor(Math.random() * candyColors.length); squares[i].style.backgroundImage = candyColors[randomColor]; } } } } ///Checking for Matches //for row of Four function checkRowForFour() { for (i = 0; i < 60; i++) { let rowOfFour = [i, i + 1, i + 2, i + 3]; let decidedColor = squares[i].style.backgroundImage; const isBlank = squares[i].style.backgroundImage === ""; const notValid = [ 5, 6, 7, 13, 14, 15, 21, 22, 23, 29, 30, 31, 37, 38, 39, 45, 46, 47, 53, 54, 55 ]; if (notValid.includes(i)) continue; if ( rowOfFour.every( (index) => squares[index].style.backgroundImage === decidedColor && !isBlank ) ) { score += 4; scoreDisplay.innerHTML = score; sound.match() rowOfFour.forEach((index) => { squares[index].style.backgroundImage = ""; }); } } } checkRowForFour(); //for column of Four function checkColumnForFour() { for (i = 0; i < 39; i++) { let columnOfFour = [i, i + width, i + width * 2, i + width * 3]; let decidedColor = squares[i].style.backgroundImage; const isBlank = squares[i].style.backgroundImage === ""; if ( columnOfFour.every( (index) => squares[index].style.backgroundImage === decidedColor && !isBlank ) ) { score += 4; scoreDisplay.innerHTML = score; sound.match() columnOfFour.forEach((index) => { squares[index].style.backgroundImage = ""; }); } } } checkColumnForFour(); //for row of Three function checkRowForThree() { for (i = 0; i < 61; i++) { let rowOfThree = [i, i + 1, i + 2]; let decidedColor = squares[i].style.backgroundImage; const isBlank = squares[i].style.backgroundImage === ""; const notValid = [6, 7, 14, 15, 22, 23, 30, 31, 38, 39, 46, 47, 54, 55]; if (notValid.includes(i)) continue; if ( rowOfThree.every( (index) => squares[index].style.backgroundImage === decidedColor && !isBlank ) ) { score += 3; scoreDisplay.innerHTML = score; sound.match() rowOfThree.forEach((index) => { squares[index].style.backgroundImage = ""; }); } } } checkRowForThree(); //for column of Three function checkColumnForThree() { for (i = 0; i < 47; i++) { let columnOfThree = [i, i + width, i + width * 2]; let decidedColor = squares[i].style.backgroundImage; const isBlank = squares[i].style.backgroundImage === ""; if ( columnOfThree.every( (index) => squares[index].style.backgroundImage === decidedColor && !isBlank ) ) { score += 3; scoreDisplay.innerHTML = score; sound.match() columnOfThree.forEach((index) => { squares[index].style.backgroundImage = ""; }); } } } checkColumnForThree(); // Checks carried out indefintely - Add Butotn to clear interval for best practise window.setInterval(function () { checkRowForFour(); checkColumnForFour(); checkRowForThree(); checkColumnForThree(); moveIntoSquareBelow(); }, 100); }); function myFunction() { var timeleft = 60; var downloadTimer = setInterval(function () { document.getElementById("progressBar").value = 60 - --timeleft; if (timeleft <= 0) { clearInterval(downloadTimer); document.getElementById("victory-text").classList.add("visible"); score = 0; document.getElementById("score").innerText = 0; sound.gameover() } }, 1000); } if (document.readyState == "loading") { document.addEventListener("DOMContentLoaded", ready); } else { ready(); } function ready() { let overlays = Array.from(document.getElementsByClassName("overlay-text")); overlays.forEach((overlay) => { overlay.addEventListener("click", () => { overlay.classList.remove("visible"); myFunction(); }); }); } function end() { let overlays = Array.from(document.getElementsByClassName("overlay-text")); overlays.forEach((overlay) => { overlay.addEventListener("click", () => { overlay.classList.remove("visible"); }); }); } </script> </html>