tags: ItIron2022 Javascript

前言

我們昨天完成了基本的ui以及事前的規劃，今天就動手把核心功能完成吧！

Getting started

Step1: 元素選擇

首先請你先將以下的程式碼寫入js檔案，這是目前我們會用到的所有需要動態處理的元素。

// select DOM elements
const wordEl = document.getElementById("word");
const inputEl = document.getElementById("text");
const scroeEl = document.getElementById("score");
const timeEl = document.getElementById("time");
const endgameEl = document.getElementById("end-game-container");
const finalScoreEL = document.getElementById("final-score");
const restartBtn = document.getElementById("restart-btn");

endgameEl需要特別選擇是因為我們在結束遊戲時，需要讓整個遊戲結束的蓋住之前的遊戲畫面，眼尖的你可能在之前的css檔案有注意到以下的程式碼。

.end-game-container {
  background-color: inherit;
  display: none; // 這裡
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.show {
  display: flex;
}

在遊戲進行中我們先讓整個元素隱藏起來，等到遊戲結束後再透過加上show這個class讓它顯示！

2. 隨機文字的產生

這個部分我們這次就採用簡單一點的做法吧！ 我們照之前規劃的直接用個陣列來處理所有的文字就好，同時我們需要一個簡單的函數去從陣列中隨機取值，並且我們需要一個變數去紀錄目前的文字好讓我們之後做比對，最後再透過一個函數將該變數的值呈現在畫面上，請你補上以下的程式碼，當然裡面的文字也可以隨你個人喜好變動！

// list words
const words = [
  "sigh",
  "tense",
  "airplane",
  "ball",
  "pies",
  "juice",
  "warlike",
  "bad",
  "north",
  "dependent",
  "steer",
  "silver",
  "highfalutin",
  "superficial",
  "quince",
  "eight",
  "feeble",
  "admit",
  "drag",
  "loving",
];

// init word
let randomWord;

// genrate the first word
addWord();

// get random word
function getRandomWord() {
  return words[Math.floor(Math.random() * words.length)];
}

// add word to the DOM
function addWord() {
  randomWord = getRandomWord();
  wordEl.innerHTML = randomWord;
}

3. 監聽文字輸入框

我們先看一下我們昨天的虛擬碼，要處理的邏輯其實並不會太複雜，除了以下的虛擬碼之外，我們還會需要分數跟時間的變數來控制畫面上顯示的元素，同時我們會需要一個倒數計時器去定期更新時間。

funtion handleTextInput(e) {
  if (答對了) {
     更新隨機文字
     更新分數
     更新時間
     清空輸入框
  }
}

inputBar.addEventListener('input', handleTextInput)

理解我們要做的事情之後就把以下的程式碼補進js檔案吧！

// init score and time
let score = 0;
let time = 10;

// start counting down
const timeInterval = setInterval(updateTime, 1000);

// add word to the DOM
function addWord() {
  randomWord = getRandomWord();
  wordEl.innerHTML = randomWord;
}

// update score
function updateScore() {
  score++;
  scroeEl.innerHTML = score;
}

// update time
function updateTime() {
  time--;
  timeEl.innerHTML = time + "s";
  if (time === 0) {
    clearInterval(timeInterval);
  }
}

// check if typing match
inputEl.addEventListener("input", (e) => {
  const insertText = e.target.value;
  if (insertText === randomWord) {
    // 每次答對就增加可用時間，暫時我們先以每次5秒為例
    time += 5;   
    addWord();
    updateScore();
    updateTime();
    e.target.value = "";
  }
});

這邊補上你可能會有疑問的部分

• 計時器

const timeInterval = setInterval(updateTime, 1000);

在遊戲的一開始你就需要先設定計時器的開始，特別用一個timeInterval變數將其回傳值存下來的目的是當今天時間到了之後，我們需要透過clearInterval這個方法去停止這個計時器。

• updateTime

在這個函數中要做的事情很簡單，每次呼叫就遞減時間1s並更新DOM的顯示內容，同時當時間倒數到0的時候結束計時器。 同時需要注意這個函數要每秒呼叫一次，因此答對題目增加時間的邏輯並不能直接寫在這裡，否則你會看到即便什麼也不做，時間還是蹭蹭蹭往上爬。

time--;
timeEl.innerHTML = time + "s";

4. 遊戲結束

最後的部分就是結束遊戲囉！剛剛我們在updateTime函數中就已經有寫入時間到0之後的邏輯，這邊要剩下做的事情就只有顯示結束遊戲的畫面！ 請你補上以下的程式碼

// update time
function updateTime() {
  time--;
  timeEl.innerHTML = time + "s";
  if (time === 0) {
    clearInterval(timeInterval);
    // end game
    gameOver(); // 請加入這行
  }
}

function gameOver() {
  endgameEl.classList.add("show");
  finalScoreEL.textContent = score;
}

總結

這麼一來基本的功能就結束了，目前程式碼已經可以順利的運作，剩下的設定以及一些優化的部分礙於篇幅我們就到明天再繼續吧！

文章中的範例程式碼可以在這邊取得，歡迎自行取用

轉職Q & A

Danny，你好像一直有提到對於面試jr等級的職缺來說，框架與工具都不重要，打好你的基礎就行、尤其是js的部分，那麼要怎麼樣加強js的底層知識呢？

由於我一直強調js要學好，這確實也是我很常收到的提問，我自己的方法是...碰到不懂的就死命查，一次看不懂就多看幾次，非常的土法煉鋼。這種時候我參考的資源多半來自網路或書籍，資訊會比較零散，你需要再自己整理，如果硬要我推薦的話，首推還是udemy的一堂課程: Understanding Javascript The Wierd Parts。一天到晚都在特價，這門課程幫了我很多，讓我知道我有哪些不足的地方，坦白說我認為這360花的太值得了，英文還行的同學建議聽原文的。

另外網路上有一本免費的資源，Eloquent Javascript ，是我第一份工作的mentor推薦給我的書，我當時看了也覺得挺不錯的!

本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!