Day30 Whack A Mole Game

第30天時實作要做出打地鼠的遊戲。

首先在頁面有六個div地洞元素，地洞元素的::after偽元素設為背景url(dirt.svg)。

.hole:after {
  display: block;
  background: url(dirt.svg) bottom center no-repeat;
  background-size:contain;
  content:'';
  width: 100%;
  height:70px;
  position: absolute;
  z-index: 2;
  bottom:-30px;
}

並在每個地洞元素中加入鼴鼠元素<div class="mole"></div>，再加入的元素中填滿父元素，並加入背景為mole.svg，鼴鼠元素向下100%讓他無法被看見。

.mole {
  background:url('mole.svg') bottom center no-repeat;
  background-size:60%;
  position: absolute;
  top: 100%;
  width: 100%;
  height: 100%;
  transition:all 0.4s;
}

之後建立時間亂數和選擇鼴鼠元素的亂數。

  function randomTime(min, max){
    return  Math.round(Math.random() * (max-min)+min)
  }

  function randomHole(holes){
    const index = Math.floor( Math.random() * holes.length )
    const hole = holes[index]

    if (lastHole === hole) {
      return randomHole(holes)
    }
    lastHole = hole
    return hole
  }

過來將時間亂數和鼴鼠元素的亂數合起來，讓鼴鼠元素可以隨機時間並亂數出現且不重複。

  function popUp() {
    const time = randomTime(200, 1000)
    const hole = randomHole(holes)

    hole.classList.add('up')

    setTimeout(()=>{
      hole.classList.remove('up')
      if (!timeUp) popUp()
    }, time)
  }

之後在start按鈕上建立開始遊戲startGame方法。

<button onClick="startGame()">Start!</button>

  function startGame(){
    scoreBoard.textContent = '0'
    timeUp = false;
    popUp()
    setTimeout(()=>{
      timeUp = true
    }, 2000)
  }

在startGame方法中設定得分版為0，並將timeUp設為false，目的為當每次按下開始遊戲時重新設定。因為在開始遊戲中會設定時間內將timeUp設為true，當timeUp為true，就結束遊戲。

接下來設定得分，得分設定的方式為當點擊鼴鼠元素就讓分數加一，並移除CSS類別讓他回復初始向下100%的狀態，分數加一並把分數弄上得分版。

function bonk(e){
    console.log(!e.isTrusted);
    this.classList.remove('up')
    score++
    scoreBoard.textContent = score
}

moles.forEach(mole => mole.addEventListener('click', bonk))

Html

<h1>Whack-a-mole! <span class="score">0</span></h1>
  <button onClick="startGame()">Start!</button>

  <div class="game">
    <div class="hole hole1">
      <div class="mole"></div>
    </div>
    。
    <div class="hole hole6">
      <div class="mole"></div>
    </div>
  </div>

Javascript

1. Event.isTrusted
   isTrusted是當事件觸發由誰觸發。若使用者觸發事件回傳true，其他方式觸發事件回傳false。

CSS

1. 偽元素
   偽元素為讓選定的元素增加特定的樣式。
   [1]

2. 偽類
   偽類讓選定的元素增加特定的狀態。
   [2]

tags: 打地鼠