Have fun! 新手也能打造的Javascript微型專案! Day15: 不知道該怎麼做決定？那就交給Magic 8 Ball吧！

2022 iThome 鐵人賽

DAY 15

Modern Web

Have fun! 新手也能打造的Javascript微型專案系列第 15 篇

Have fun! 新手也能打造的Javascript微型專案! Day15: 不知道該怎麼做決定？那就交給Magic 8 Ball吧！

14th鐵人賽

windate3411

團隊桌遊玩樂團

2022-09-28 11:01:02

704 瀏覽

分享至

tags: `ItIron2022` `Javascript`

前言

接連幾天都是稍微有點篇幅的專案，今天我們就放輕鬆來個簡單一點的東西吧！Magic 8 Ball又稱神奇8號球是一種美國常見的兒童玩具，他大概長得像這樣。

magic 8 ball

玩法也相當簡單，你詢問它一個問題後將它用力的甩一甩，在它的背面就會出現其中一種答案

其中會包含10種肯定的回答、5種模稜兩可的回答以及5種否定的回答，在許多美劇或卡通中都能見到它的身影，今天就一起來做個簡易版的吧，本次的小專案是參照我之前看到的一篇影片教學，我會附在文末，有興趣的可以去看看影片版！

預期成果

我們要的成果很簡單，對著它問個問題後我們點下搖動按鈕，接著就可以看到問題的結果，比方說我今天問說"鐵人賽我是否能完賽呢？" 結果會是這樣的。

Getting started

Step1: 專案結構

老樣子，一樣請你把那三元素的檔案建立起來，js檔案同樣先留空，請你先在html & css檔案補上以下的內容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Magic 8 Ball</title>
    <script src="./script.js" defer></script>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <h1>Ask me anything!</h1>
    <div class="container">
      <img src="./magic-8-ball.png" class="ball-image" alt="magic-eight-ball" />
      <div class="result-box">
        <button id="shake">Shake it!</button>
        <div class="result">Your fortune will be displayed here</div>
      </div>
    </div>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #fff;
}

body {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #222;
}

.container {
  padding: 24px 48px;
  display: flex;
  width: 1000px;
  align-items: center;
  justify-content: space-around;
}

.result-box {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  flex-basis: 40%;
}

.result,
button {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 20px;
}

button {
  background: #fff;
  color: #222;
  border: none;
  cursor: pointer;
  transition: transform 0.3s ease-in;
}

button:active {
  transform: scale(0.85);
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.shake {
  animation: shake 1s;
}

@keyframes shake {
  0% {
    transform: translate(4px, 4px) rotate(0deg);
  }
  10% {
    transform: translate(-4px, -4px) rotate(-10deg);
  }
  20% {
    transform: translate(4px, 4px) rotate(0deg);
  }
  30% {
    transform: translate(-4px, -4px) rotate(-10deg);
  }
  40% {
    transform: translate(4px, 4px) rotate(0deg);
  }
  50% {
    transform: translate(-4px, -4px) rotate(-10deg);
  }
  60% {
    transform: translate(4px, 4px) rotate(0deg);
  }
  70% {
    transform: translate(-4px, -4px) rotate(-10deg);
  }
  80% {
    transform: translate(4px, 4px) rotate(0deg);
  }
  90% {
    transform: translate(-4px, -4px) rotate(-10deg);
  }
  100% {
    transform: translate(4px, 4px) rotate(0deg);
  }
}

Step2: 產出並呈現隨機的答案

產出隨機答案這點跟之前的打字遊戲一樣，我們建立一個含有所有答案的陣列並利用函數從中隨機取出一個即可，相信這已經難不倒你了！我們只要先建立答案陣列、選好元素並加上監聽器，這個步驟真的一下就結束了，請你在js檔案先補上以下的內容

const shakeBtn = document.getElementById("shake");
const result = document.querySelector(".result");

const possibleAnswers = [
  "It is certain.",
  "It is decidedly so.",
  "Without a doubt.",
  "Yes definitely.",
  "You may rely on it.",
  "As I see it, yes.",
  "Most likely.",
  "Outlook good.",
  "Yes.",
  "Signs point to yes.",
  "Reply hazy, try again.",
  "Ask again later.",
  "Better not tell you now.",
  "Cannot predict now.",
  "Concentrate and ask again.",
  "Don't count on it.",
  "My reply is no.",
  "My sources say no.",
  "Outlook not so good.",
  "Very doubtful.",
];

function getRandomAnswer() {
  return possibleAnswers[Math.floor(Math.random() * possibleAnswers.length)];
}

function handleBtnClick() {
  result.textContent = getRandomAnswer();
}

shakeBtn.addEventListener("click", handleBtnClick);

Step3: 加入抖動動畫

目前雖然可以順利在點擊按鈕後產生結果，不過一點感覺都沒有！答案直接顯示真的有夠無趣的，我們最終想要以下的流程

點擊shake按鈕
魔法球開始抖動1秒
1秒後停止抖動並呈現答案

我們之前已經在css檔案內寫好shake的動畫了，那麼要做的事情很簡單，只要在點擊後將這個class加上去並在一秒後移除即可，請你修改我們剛寫好的handleBtnClick函數，並在上方加一個ballImage元素

const ballImage = document.querySelector(".ball-image");

function handleBtnClick() {
  ballImage.classList.add("shake");
  setTimeout(() => {
    ballImage.classList.remove("shake");
    result.textContent = getRandomAnswer();
  }, 1000);
}

這麼一來球就會抖的有那麼一回事了！

Step4: 額外優化

不過目前還存在一個比較明顯的問題，當你不斷的連續點擊時會出現答案快速被洗掉的情況，我們這種有耐心的人都希望一次點擊看一個答案就好，因此我們會希望加上一個點擊的限制，在結果出來前不允許再次點擊，這個其實也相當容易做到！我們最後一次修改handleBtnClick函數吧！

function handleBtnClick() {
  ballImage.classList.add("shake");
  shakeBtn.disabled = true;
  setTimeout(() => {
    ballImage.classList.remove("shake");
    result.textContent = getRandomAnswer();
    shakeBtn.disabled = false;
  }, 1000);
}