Have fun! 新手也能打造的Javascript微型專案! Day14: 英打總是龜速? 寫個打字測驗遊戲來練習吧!(下)

tags: ItIron2022 Javascript

前言

我們昨天完成了最主要的核心功能,今天剩餘的時間我們就來做一些剩餘的優化,就跟之前幾個專案一樣,我也留了一些作業讓你們嘗試 😀 那我們就開始吧!

Getting started

Step1: 開啟/隱藏難度選擇表單

目前我們在每次答題時都是會加時5秒,不過這樣一視同仁的行為可能會讓人覺得太難/太簡單,因此加入個難度設定會讓使用上更親民一些吧! UI的部分我們在前兩天做好了,我們現在只要加上邏輯處理的部分就可以了,首先我們自然需要先選取所有相關的元素,請你在昨天的基礎上補上以下的程式碼

// select DOM elements
const settingBtn = document.getElementById("setting-btn");
const setting = document.getElementById("setting");
const difficultySelect = document.getElementById("difficulty");

對照一下我們目前的ui應該你會更有感覺

preview

接著我們需要在settingBtn上加入監聽器,點擊settingBtn會開啟/隱藏整個setting元素
,隱藏用的class我們也在之前寫好了,那麼剩下的自然就很簡單囉!

.setting.hide {
  transform: translateY(-100%);
}

請你在js檔案中監聽器的部分新增一個監聽器

// Setting btn click
settingBtn.addEventListener("click", () => {
  setting.classList.toggle("hide");
});

這麼一來在點擊時就會自動toggle “hide"這個class,選單便會根據狀態開啟/隱藏。

Step2: 儲存使用者選擇的難度

這邊你可能會想,這有什麼難的? 不就一個變數就能解決的問題嗎? 你說對了! 但這邊我想動點小手腳,我會希望使用者每次打開這個頁面時就繼續他上次選擇的難度,於是我們會需要一種更長久的儲存方式,像這種情況localStorage就是個很好的選擇,請你將以下的程式碼
加入js檔案中。

// init difficulty
let difficulty =
  localStorage.getItem("difficulty") === null
    ? "medium"
    : localStorage.getItem("difficulty");

// set diffculty value
difficultySelect.value = difficulty;

我們首先建立一個difficulty變數,這個變數的值會先試著從localStorage中找是否有過去的紀錄,如果沒有的話就預設為"medium"字串(注意localStorage.getItem在指定的key不存在時會回傳null),最後再將這個值給畫面上的difficultySelect元素做呈現。

Step3: 根據困難度調整增加的時間

最後就是答對題目時的調整了,我們之前有說過這個遊戲會在你答對題目時增加可用的時間,當時我們先設定為每次答題後+5秒,現在我們可以根據困難度做更細部的調整了,稍稍調整一下input監聽器的部分吧!

inputEl.addEventListener("input", (e) => {
  const insertText = e.target.value;
  if (insertText === randomWord) {
    addWord();
    updateScore();
    // 加入以下的判斷
    switch (difficulty) {
      case "easy":
        time += 5;
        break;
      case "medium":
        time += 3;
        break;
      case "hard":
        time += 1;
        break;
    }
    updateTime();
    e.target.value = "";
  }
});

Step4: 細部優化

到這邊包含難易度設定的部分就已經全部完成了,不過有個小地方挺礙眼的。尤其是頁面一打開遊戲就開始了,為了讓使用者可以快速輸入,一開始就應該要指向輸入的位置,這麼一來就可以直接打字而不需要手動選擇輸入框囉! 一行搞定的東西我們就不用跟他客氣了,請在程式碼中加入這一行。

// focus text on start
inputEl.focus();

總結

這麼一來一個簡易的打字遊戲就結束了,篇幅雖有點長但實際上程式碼的部分並不算太多,多半的篇幅都是一些說明,這個遊戲自然還有很多地方可以優化的,比方說你可以有個開始遊戲的按鈕、或是答對時給予一些畫面提示等! sky’s the limit! 行有餘力的話可以自由發揮創意修改! 明天我們將進入新的主題!

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

轉職Q & A

Danny,我目前已經跑了幾個面試了,但後續都完全沒有消息,我該怎麼辦?

很好的問題,有些人會在收到拒絕或無聲卡後感到沮喪或是不安,你當然可以有這樣的情緒,我認為這很正常! 不過很多時候這樣的結果並不是你能力不足所造成的,可能對方想找的就是一個只會泡茶的工程師,而剛好你會的不只泡茶而已!

面試這種事情有太多的變數,而許多因素都不在你自己的掌握中(團隊其實沒缺人、面試題目不合理或流程亂七八糟等)。既然問題不見得出在你身上,每一次的得失心不用放太重,你要做的只是了解自己不足的地方並加以補強,將這樣的經驗活用在下次面試即可。塞翁失馬的故事你也很熟,誰說你錯過這個offer一定是件壞事的,對吧?

廣告

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s