前言

今天是十月的第一天，來復刻個迷因貓貓點擊大賽POPCAT的基本功能吧，希望大家都擁有被小動物療癒身心靈美好的一天！

好的！在開始之前，先來構思一下目標吧：

1. 會製作出一個有標題、數字及貓貓圖片的畫面
2. 當點擊貓貓圖片時數字會累加、圖片會變換
3. 貓貓被點擊時會發出「波」的音效

開始製作

HTML

HTML架構很簡單，最主要會需要有標題、可以累計數字的文字、放圖片的容器及擺放音訊的標籤

<div class="container">
  <div class="content">
    <h1 class="title">POPCAT</h1>
    <span class="times">0</span>
    <div class="image">
      <img src="https://popcat.click/img/p.1e9d00be.png" alt="popcat">
    </div>
    <audio src="https://www.myinstants.com/media/sounds/pop-cat-original-meme_3ObdYkj.mp3" class="pop"></audio>
  </div>
</div>

CSS

CSS可以依照喜好添加喜歡的背景圖或排版，這邊主要採用Flexbox來讓標題、累計數字及貓貓圖片呈現在畫面中間，並使用一個之前沒有嘗試的字體Caesar Dressing來進行搭配

html,
body {
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  text-align: center;
  font-family: "Caesar Dressing", cursive;
  color: #000;
}

.content .title {
  font-size: 60px;
  letter-spacing: 10px;
  margin: 0 0 20px 0;
}

.content .times {
  font-size: 40px;
}

.content .image {
  width: 300px;
}

.image img {
  width: 100%;
}

JS

JS方面有幾件事情需要進行處理：

1. 當點擊圖片時，圖片會進行切換使貓貓嘴巴呈現一次開合的畫面

   → 監聽裝有圖片的容器觸發的點擊事件，當確定圖片被點擊時即變更圖片，並建立setTimeout()讓被變更的圖片隔一段指定時間內改回一開始的圖片。

2. 圖片切換同時會發出「波」的音效

   → 運用audio.play()來播放出音訊，為了避免在快速點擊時音訊可能會發成延遲的狀況，在播放前先設定audio.currentTime = 0讓每次點擊時，音訊都重頭開始撥放。

3. 當圖片被點擊時，累計的數字也會相應的添加點擊的次數

   → 由於節點內容取出時會是字串，所以先新增一變數存放運用Number()轉換成數字型別的節點內容，並於圖片點擊時遞增該變數，最後再將遞增完的數字放入成為該節點的新內容。

// 選取出會使用到的圖片容器、累計數字及音訊節點
const image = document.querySelector(".image");
const times = document.querySelector(".times");
const audio = document.querySelector(".pop");

// 當圖片容器監聽到觸發點擊事件
image.addEventListener("click", (event) => {
  const target = event.target;
  let countTimes = Number(times.textContent);
	// 確保是貓貓圖片被點擊後才會開始進行
  if (target.alt === "popcat") {
		countTimes++;
		target.src = "https://popcat.click/img/op.353767c3.png";
    audio.currentTime = 0;
    audio.play();
    setTimeout(() => {
      target.src = "https://popcat.click/img/p.1e9d00be.png";
    }, 100);
  }
  times.textContent = countTimes;
});

最後放上一張貓貓嘴巴張很大的完成圖XD，祝福大家都有開心的一天: )！