今天要來做的是打地鼠
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的浮點數
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
屬性,這個屬性會影響元素的垂直位置
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>
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的全部內容了!!