Dudukadin Shopping District: Restless A Mole Game

Can you really find true strict. Emty spaces are building's area, whackies are in emty spaces. And this probably last JavaScript game. Because almost kind of code was written.

<!DOCTYPE html>
<html>
<!--orjinal-name: whacky-a-mole-->
<!--new edit:dudukadinshoppingdistrict@gmail.com-->
<!--2025 restless-a-mole-->
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Restless-A-Mole Game</title>
    <style>
@import url('https://fonts.googleapis.com/css?family=Nunito');

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 10px;
}

body {
  padding: 0;
  margin: 0;
  font-family: 'Nunito', sans-serif;
  background: #fff9e2;
  text-align: center;
}

h1 {
  font-size: 4.5rem;
  line-height: 1;
  margin: 2rem 0 0 0;
  color: #ff7660;
}

h2 {
  font-size: 3rem;
  color: #3b1010;
  margin: 2rem;
}

.sonuc {
  background: #ffe5cf;
  padding: 0 3rem;
  line-height: 1;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  border-radius: 1rem;
  color: #3b1010;
}

.oyun {
  width: 800px;
  height: 800px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}
.sabit {
  flex: 1 0 9.09%;
  overflow: hidden;
  position: relative;
  background: black bottom center no-repeat;
}

.isabetlik {
  flex: 1 0 9.09%;
  overflow: hidden;
  position: relative;
}

.isabetlik:after {
  display: block;
  background: grey bottom center no-repeat;
  background-size: contain;
  content: '';
  width: 100%;
  height: 40px;
  position: absolute;
  z-index: 2;
  bottom: -30px;
}

.huzursuz {
  background: black bottom center no-repeat;
  background-size: 60%;
  position: absolute;
  top: 100%;
  width: 100%;
  height: 100%;
  transition: all 0.9s;
}

.isabetlik.up .huzursuz {
  top: 0;
}

#basla {
  font-family: 'Nunito', sans-serif;
  display: inline-block;
  text-decoration: none;
  border: 0;
  background: #3b1010;
  color: #fff;
  font-size: 2rem;
  padding: 1rem 2rem;
  cursor: pointer;
  margin: 1rem;
}

#basla:hover {
  opacity: 0.8;
}
</style>
 </head>
  <body>
    <h1> Restless-A-Mole! </h1>
    <h2>POİNT : <span class="sonuc">0</span></h2>
    <button id="basla" onClick="oyunaBasla()">START</button>
    <div class="oyun"></div>
  <script>

function oyunDiz(){
    var array=[];
    for(var i=0;i<110;i++){
      array.push(Math.round(Math.random(0,1)+0));
    }
    var eleman = document.getElementsByTagName('div')[0];
    
    for(var k=0;k<array.length;k++){
    if(array[k]==1){
    var sd = document.createElement('div');
    sd.classList.add('isabetlik');
    sd.appendChild(document.createTextNode('\u0020'));
    sd.innerHTML = '<div class="huzursuz"></div>';
    eleman.appendChild(sd);
   }
   if(array[k]==0){
    var sd = document.createElement('div');
    sd.classList.add('sabit');
    sd.appendChild(document.createTextNode('\u0020'));
    sd.innerHTML = '<div class="sabit"></div>';
    eleman.appendChild(sd);
    }
 }
}

    oyunDiz();

    const holes = document.querySelectorAll('.isabetlik');
    const scoreBoard = document.querySelector('.sonuc');
    const moles = document.querySelectorAll('.huzursuz');
    const button = document.querySelector('#basla');
    let lastHole;
    let timeUp = false;
    let score = 0;

  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('Same one');
        return randomHole(holes);
      }
      lastHole = hole;
      return hole;
    }

  function setRT() {
      const time = randomTime(600, 1000);
      const hole = randomHole(holes);
      hole.classList.add('up');
      hole.style.background = '#fff9e2';
      setTimeout(() => {
        hole.classList.remove('up');
        if(!timeUp) setRT();
      }, time);
    }

  function oyunaBasla() {
      scoreBoard.textContent = 0;
      timeUp = false;
      sonuc = 0;
      button.style.visibility = 'hidden';
      setRT();
      setTimeout(() => {
        timeUp = true;
        button.innerHTML = 'Try Again!';
        button.style.visibility = 'visible';
      }, 10000);
    }

  function hareket(e) {
      if(!e.isTrusted) return;
      sonuc++;
      this.classList.remove('up');
      scoreBoard.textContent = sonuc;
    }
    moles.forEach(mole => mole.addEventListener('click', hareket));
</script>
  </body>
</html>

you can change whit an image like

background: url('00.png') bottom center no-repeat;

that you want.

Download Link:https://drive.google.com/file/d/1yiJiOXhzMcpFx7Q8PJn5rErXDv-1aICM/view?usp=sharing

there was a problem in downloading file

Video Link:Watch Video

Edit by: dudukadinshoppingdistrict@gmail.com

You can olso send article dudukadinshoppingdistrict@gmail.com that you deem important.

Dudukadin Shopping District

25 Kasım 2025 Salı

Restless A Mole Game

Hiç yorum yok:

Yorum Gönder

Restless A Mole Game

Bu Blogda Ara