Basit arac yarisi

by Sahin Deniz

HTML

<html>
  <body>
    <div id="oyun">
      <div id="sahne">
        <img id="araba" src="https://automechanica.com/uploads/service/why_automechanica_section_image/1/Why_Automechanica.png">
        <img id="kaya" src="https://static.vecteezy.com/system/resources/previews/023/545/810/large_2x/rock-stone-isolated-on-white-file-3d-rendering-free-png.png">
        <div class="serit serit-0"></div>
        <div class="serit serit-1"></div>
      </div>
      <div id="skor-tablosu">Skor: 0</div>
    </div>
  </body>
</html>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body,
#oyun {
  width: 100%;
  height: 100%;
}

#oyun {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#skor-tablosu {
  font-size: 26px;
  margin: 10px;
}

#sahne {
  width: 300px;
  height: 500px;
  outline: 1px solid black;
  position: relative;
  overflow: hidden;
}

.serit {
  width: 0px;
  height: 100%;
  outline: 3px dashed black;
  transform: scale(1, 10);
  position: absolute;
}

.serit-0 {
  left: 100px;
}

.serit-1 {
  left: 200px;
}

#araba {
  width: 100px;
  position: absolute;
  bottom: 0;
}

#kaya {
  width: 100px;
  position: absolute;
  top: -100px;
  left: 200px;
}

.yaris-basladi {
  animation: asagi-kaydir 2.5s infinite linear;
}

.gizle {
  display: none;
}

@keyframes asagi-kaydir {
  0% {
    top: -100px;
  }

  100% {
    top: 100%;
  }
}

JavaScript

const sahne = document.getElementById('sahne');
const araba = document.getElementById('araba');
const kaya = document.getElementById('kaya');
const skorTablosu = document.getElementById('skor-tablosu');
const seritler = document.querySelectorAll('.serit');
let skor = 0;
let yarisinDurumu;

function arabayiHareketEttir(yon) {
  const sahneninKutlesi = sahne.getBoundingClientRect();
  const arabaninKutlesi = araba.getBoundingClientRect();
  const arabaninSolAlanaUzakligi = arabaninKutlesi.left - sahneninKutlesi.left;

  if (yon === 'sagaDogru') {
    arabaninYeniKonumu = arabaninSolAlanaUzakligi + arabaninKutlesi.width;

    if ((arabaninYeniKonumu + arabaninKutlesi.width) < sahneninKutlesi.right) {
      araba.style.left = `${arabaninYeniKonumu}px`;
    }
  }

  if (yon === 'solaDogru') {
    arabaninYeniKonumu = arabaninSolAlanaUzakligi - arabaninKutlesi.width;

    if ((arabaninYeniKonumu + arabaninKutlesi.width) >= sahneninKutlesi.left) {
      araba.style.left = `${arabaninYeniKonumu}px`;
    }
  }
}

function kayaniFarkliSeriteYerlestir() {
  const rastgeleSerit = Math.floor(Math.random() * 3);
  const kayaninKutlesi = kaya.getBoundingClientRect();

  kaya.style.left = `${rastgeleSerit * kayaninKutlesi.width}px`;
  console.log(rastgeleSerit, kaya.style.left);
}

function kayaInmeyeBasladi() {
  kayaniFarkliSeriteYerlestir();

  skor += 1;
  skorTablosu.innerHTML = `Skor: ${skor}`;
}

function oyunuSonlandir() {
  clearInterval(yarisinDurumu);
  yarisinDurumu = undefined;
  sahne.classList.add('gizle');
  araba.classList.add('gizle');
  kaya.classList.add('gizle');
  kaya.classList.remove('yaris-basladi');

  seritler.forEach(function(serit) {
    serit.classList.remove('yaris-basladi');
  });

  skorTablosu.innerHTML = `Kaza yaptin oyun bitti! Skorun: ${skor}`;
}

/*function aracinCarpismaDurumunuTakipEt() {
  const sahneninKutlesi = sahne.getBoundingClientRect();
  const arabaninKutlesi = araba.getBoundingClientRect();
  const kayaninKutlesi =...