【實作記錄】The Dice Game | Vanilla JS

live Demo
Github

簡介

這是使用純 JS 寫的小小擲骰子遊戲，主要用來練習使用 JS 操控 DOM.

功能

• 點擊按鈕擲骰子，點數直接加到分數板，贏家為先獲得 20 分的隊伍
• 兩隊玩家各有兩個角色可以選擇
• 玩家可以輸入名字
• 輪到藍隊玩家時，其角色會出現藍色框框；粉隊玩家則為粉色框框
• 點數更換成骰子的 icon

小筆記

• inner.HTML : 可以直接加入 html tag

  characterPlayer1_first.addEventListener("click", function(){
      document.querySelector(".border1").innerHTML='<img class="img1" src="./img/robot-1.png" alt="player one">'
  })

• 圖片重疊 : 使用 position:absolute 進行定位

小結

這不是一個複雜的遊戲，基本擲骰子積計分的功能蠻快就做出來了。反而花最多時間的地方在玩家回合的粉色和藍色框框，原本框框設置成照片的 border, 但在換角色時候，框框就無法顯示。最後才想到把框框獨立出來就好了(༎ຶ⌑༎ຶ) 其他部分則沒有遇到太大的問題。之後有機會要再改良的話，應該會從兩隊勝率不均這個部分下手。

這篇筆記為個人學習記錄，若有錯誤或是可以改進的地方再麻煩各位大大指點（鞠躬