Day31 -- Whack A Mole

目标

今天要来做的是打地鼠

Step1

const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
let lastHole;

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

function randomHole(holes) {
    const idx = Math.floor(Math.random() * holes.length);
    const hole = holes[idx];
    if (hole === lastHole) {
        console.log('Ah nah thats the same one bud');
        return randomHole(holes);
    }
    lastHole = hole;
    return hole;
}

首先，我们要来随机地鼠出现的时间，还有随机地鼠出现的洞

时间的算法就跟之前影片速度一样，是计算最大/最小的时间差，乘上随机的数字，再加上最小值

出现位置的随机方法则是随机数乘上位置的总数再取整数，不过随机有可能两次都随机到同样的位置，所以这边设一个变数来记录上次出现的位置，如果新位置跟就位置相同，就重新执行函式

`Math.random()`

Math.random()函式会随机回传一个介於0~1的浮点数

Step2

let timeUp = false;

function peep() {
    const time = randomTime(200, 1000);
    const hole = randomHole(holes);
    hole.classList.add('up');
    setTimeout(() => {
        hole.classList.remove('up');
        if (!timeUp) peep();
    }, time);
}

接下来要处理地鼠出现/消失，这边使用上一步建立的函式，随机地鼠出现的时间、位置，然後加上up class，最後使用setTimeout()让地鼠在出现的时间到了之後消失

这边还有加上一个变数timeUp，用途是纪录游戏时间是否结束

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

.hole.up .mole {
  top: 0;
}

CSS这边有一个top属性，这个属性会影响元素的垂直位置

Step3

let score = 0;

function startGame() {
    scoreBoard.textContent = 0;
    timeUp = false;
    score = 0;
    peep();
    setTimeout(() => timeUp = true, 10000)
}

这边是处理开始游戏的状态，开始游戏的时候要把一切都归零，然後才开始让地鼠出现，经过一段时间之後，要将timeUp设为true，这样游戏就会停止了

再来加上一个开始游戏的按钮在<body>

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

Step4

function bonk(e) {
    if (!e.isTrusted) return; // cheater!
    score++;
    this.parentNode.classList.remove('up');
    scoreBoard.textContent = score;
}

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

最後，这边要处理打到地鼠要做的事，算分跟移除class我就不赘述了，这里有一个新东西是e.isTrusted，e.isTrusted是一个滑鼠事件属性，是判定是否由滑鼠点击而触发，因为JavaScript可以从控制台输入程序触发，所以属性可以帮助我们防止作弊

以上就是JS30的全部内容了！！

<<: Day 29　Quantum Protocols and Quantum Algorithms

>>: 29/AWS SSA面试经验分享(下)