Animal Crush Saga アニマルくらしゅさが　ການປວດສັດ Animalis contundito saga បិសាចបង្ក្រាបសត្វ

Animal Crush Saga アニマルくらしゅさが　ການປວດສັດ Animalis c..

✨ Wongsapat Asavawongsanon

<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-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);
});

if (document.readyState == "loading") {
  document.addEventListener("DOMContentLoaded", ready);
} else {
  ready();
}

</script>
</html>