Javascript 30 - Gün 30

11 Haziran 2023

Projenin demosu : Demo

Başlangıç dosyalarını bulabileceğiniz repom: js-30 | github

Javascript 30 Challenge'ının son gününe geldik! Son günü eğlenceli bir projeyle bitireceğiz.

Amaç

JS ile bir köstebek vurma oyunu geliştirmek. Oyun 10 saniye sürecek ve skor takibi yapılacak.

Çözüm

HTML:

<h1>Whack-a-mole! <span class="score">0</span></h1>
 
<div class="game">
  <div class="hole hole1">
    <div class="mole"></div>
  </div>
  <div class="hole hole2">
    <div class="mole"></div>
  </div>
  <div class="hole hole3">
    <div class="mole"></div>
  </div>
  <div class="hole hole4">
    <div class="mole"></div>
  </div>
  <div class="hole hole5">
    <div class="mole"></div>
  </div>
  <div class="hole hole6">
    <div class="mole"></div>
  </div>
</div>
 
<div class="controls">
  <button class="control-btn" id="start">Start!</button>
</div>

Javascript:

<script>
const GAME_DURATION = 10000;
const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
const startButton = document.querySelector('#start')
 
 
let lastHole = null;
let timeUp = false;
let score = 0
 
// minimum - maksimum aralığında rastgele bir zaman dönen fonksiyon
function randomTime(min, max) {
  return Math.round(Math.random() * (max - min) + min)
}
 
 
// köstebek yuvalarından rastgele birini dönen bir fonksiyon
// eğer önceki köstebek yuvasıyla aynısı çıkarsa farklı çıkana kadar tekrar çalışır
// bkz: https://bit.ly/recursion-js
function randomHole(holes) {
  const randomHoleId = Math.floor(Math.random() * holes.length)
  const hole = holes[randomHoleId]
  if (hole === lastHole) {
    return randomHole(holes)
  }
 
  lastHole = hole
  return hole
}
 
// köstebeklerin gözükmesini ve rastgele bir zaman sonra kaybolmasını sağlayan fonksiyon
function popUp() {
  const time = randomTime(200, 1000)
  const hole = randomHole(holes)
 
  hole.classList.add('up')
  setTimeout(() => {
    hole.classList.remove('up')
    if (!timeUp) popUp()
  }, time)
 
}
 
// oyunu başlatan ve gerekli değişkenleri sıfırlayan fonksiyon
function startGame() {
  scoreBoard.textContent = 0
  timeUp = false
  score = 0
  popUp()
 
  setInterval(() => {
    timeUp = true;
  }, GAME_DURATION)
}
 
 
// köstebeklere tıklanırsa skoru arttıran ve köstebeği gizleyen fonksiyon
function hitMole(e) {
  if (!e.isTrusted) return//burada tıklama işleminin js ile değil gerçekten tıklayarak yapıldığına emin oluyoruz
  score++
  this.classList.remove('up')
  scoreBoard.textContent = score
 
}
moles.forEach(mole => mole.addEventListener('click', hitMole))
 
startButton.addEventListener('click', startGame)
</script>

Bu sayfayı düzenle