Deutsch
Germany.ru → Группы → Архив Досок→ Дневник тяжелобольного инвалида

Тараканьи бега 09.05.2024

2371  
uscheswoi_82 коренной житель09.05.24 00:57
09.05.24 00:57 

Всем добрый ночи! Посмотрел я это видео:

и мне захотелось сделать такую-же игру под браузер.


Вот формула:


Вот мой код:

<!DOCTYPE html>
<html>
  <head>
  <title>Тараканьи бега</title>
  <style>
    .tarakan { position:relative; color:#510; }
    .init { left:5px; }
    #tarakan1 { top:10px; }
    #tarakan2 { top:20px; }
    #tarakan3 { top:30px; }
    #tarakan4 { top:40px; }
    #tarakan5 { top:50px; }
    #tarakan6 { top:60px; }
    #pole { width:600px; min-height:190px; 
            border:1px solid #000; 
            background-color:#080;}
  </style>
  <script>
    var tm = null;
    function move_tarakan(tarakan_id, step) {
      var el = document.getElementById(tarakan_id);
      var offset = el.getBoundingClientRect();
      var new_pos = offset.left + step;
      el.setAttribute('style', 'left:' + String(new_pos) + 'px');
    }


    function get_position_tarakan(tarakan_id) {
      var el = document.getElementById(tarakan_id);
      var offset = el.getBoundingClientRect();
      return offset.left;
    }

   function go(el) { 
     var tarakan_stavka = 0;   
     do {
       tarakan_stavka = prompt('На какого таракана будете ставить (1-6)?', '1');
     } while(! (tarakan_stavka >= 1 && tarakan_stavka <= 6));
   
     el.setAttribute('disabled', 'true');
      tm = setInterval(() => {
        for(var i=1; i<7; i++) {
          move_tarakan('tarakan' + i, Math.floor(Math.random() * 10));
          if(get_position_tarakan('tarakan' + i) >= 590) { 
            if(tarakan_stavka == i)
              alert('Таракан под номером ' + i + ' выиграл!');
              clearInterval(tm); 
          }}}, 400);
    }
  </script>
  </head>
  <body>
    <div id="pole">
      <div id="tarakan1" class="tarakan init">x</div>
      <div id="tarakan2" class="tarakan init">x</div>
      <div id="tarakan3" class="tarakan init">x</div>
      <div id="tarakan4" class="tarakan init">x</div>
      <div id="tarakan5" class="tarakan init">x</div>
      <div id="tarakan6" class="tarakan init">x</div>
      </div>
    </div>
    <br>
    <button onclick="go(this);">Погнали!</button>
  </body>
</html>
Если я кому-то отвечаю, это не значит что я ему симпатизирую, каждый остаётся при своём мнении Моя ФЛ Он и Она
#1 
uscheswoi_82 коренной житель09.05.24 01:03
NEW 09.05.24 01:03 
в ответ uscheswoi_82 09.05.24 00:57

Результат работы программы "тараканьи бега":


Если я кому-то отвечаю, это не значит что я ему симпатизирую, каждый остаётся при своём мнении Моя ФЛ Он и Она
#2 
uscheswoi_82 коренной житель09.05.24 19:46
NEW 09.05.24 19:46 
в ответ uscheswoi_82 09.05.24 01:03

Улучшил немного код: 

<!DOCTYPE html>
<html>
  <head>
  <title>Тараканьи бега</title>
  <style>
    .tarakan { position:relative; 
               color:#510; 
               width:17px; 
               text-align:center; }
    #message { color:red; }
    .init { left:5px; }
    .sel { border:1px solid #ff0; 
           background-color:#f00; 
           border-radius:100%; 
           color:#ff0;  
           font-weight:bold; }
    .btn { text-shadow:0px 0px 3px #999; 
           border-radius:3px; 
           border:1px solid #bbb; 
           background-color:#eee; 
           box-shadow:0px 0px 3px #aaa; 
           padding:7px 7px; } 
    #tarakan1 { top:10px; }
    #tarakan2 { top:20px; }
    #tarakan3 { top:30px; }
    #tarakan4 { top:40px; }
    #tarakan5 { top:50px; }
    #tarakan6 { top:60px; }
    #pole { width:600px; 
            min-height:190px; 
            border:1px solid #000; 
            background-color:#080; 
            box-shadow:0px 0px 10px #bbb; }
  </style>
  <script>
    var tm = null;
    function move_tarakan(tarakan_id, step) {
      var el = document.getElementById(tarakan_id);
      var offset = el.getBoundingClientRect();
      var new_pos = offset.left + step;
      el.setAttribute('style', 'left:' + String(new_pos) + 'px');
    }

    function get_position_tarakan(tarakan_id) {
      var offset = document.getElementById(tarakan_id).getBoundingClientRect();
      return offset.left;
    }

    function reset() {
      for(var j=1; j<7; j++) {
        var el = document.getElementById('tarakan' + j);
        el.setAttribute('style', 'left:5px;');
        //el.setAttribute('class', 'tarakan init;');
      }
    }

    function go(el) { 
   var tarakan_stavka = 0;
   reset();
   do {
     tarakan_stavka = prompt('На какого таракана будете ставить (1-6)?', '1');
   } while(! (tarakan_stavka >= 1 && tarakan_stavka <= 6));
   
      el.disabled = true;
      document.getElementById('tarakan' + tarakan_stavka).setAttribute('class', 'tarakan init sel');
      document.getElementById('message').innerHTML = 'Вы поставили на таракана под номером ' + tarakan_stavka;
      tm = setInterval(() => {
        for(var i=1; i<7; i++) {
          move_tarakan('tarakan' + i, Math.floor(Math.random() * 10));
          if(get_position_tarakan('tarakan' + i) >= 580) { 
              if(tarakan_stavka == i) 
                alert('Таракан под номером ' + i + ' выиграл!');


            el.disabled = false;
            clearInterval(tm); 
          }}}, 400);
    }


    window.onload = () => { 
      reset();
    }
  </script>
  </head>
  <body>
    <div id="pole">
      <div id="tarakan1" class="tarakan init">x</div>
      <div id="tarakan2" class="tarakan init">x</div>
      <div id="tarakan3" class="tarakan init">x</div>
      <div id="tarakan4" class="tarakan init">x</div>
      <div id="tarakan5" class="tarakan init">x</div>
      <div id="tarakan6" class="tarakan init">x</div>
    </div>
    <div id="message"></div>
    <br>
    <button class="btn" onclick="go(this);">Погнали!</button>
  </body>
</html>


Результат работы игры "тараканьи бега":



Если я кому-то отвечаю, это не значит что я ему симпатизирую, каждый остаётся при своём мнении Моя ФЛ Он и Она
#3