iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 30
0
Modern Web

JavaScript 30實作心得筆記系列 第 30

Day30 Whack A Mole Game

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,當timeUptrue,就結束遊戲。

接下來設定得分,得分設定的方式為當點擊鼴鼠元素就讓分數加一,並移除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: 打地鼠

上一篇
Day29 Countdown Clock
系列文
JavaScript 30實作心得筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言