Javascript w hołdzie 10 PRINT CHR$

Posted on Mon 10 February 2020 in Shitz • 2 min read

Jest książka, która czeka na przeczytanie ale której tytuł mnie zafascynował, bo po skopiowaniu okazał się zgrabnym programem do rysowania labiryntów.

Mowa o "10 PRINT". Pełny tytuł jest jednolinijkowcem w BASIC-u:

10 PRINT CHR$(205.5+RND(1)); : GOTO 10

Zapragnąłem w jakiś sposób upamiętnić ten program, a że akurat przerabiałem niniejszy blog, to odmiana 10 PRINT trafiła do nagłówka strony.

Niestety, nie jest to jednolinijkowiec ale kaleka odmiana w Javascriptcie.

Na początek pobrałem font symulujący czcionkę z Commodora: https://style64.org/petscii/. Wybrałem odmianę woff i skopiowałem do folderu w którym znajduje się kod strony.

W strukturze tej strony znajduje się następujący kod:

<div id="out">
<div id="header-main" class="header-main container clearfix">
</div><!-- .header-main -->
<div id="mylogo"></div>
</div>
</div>

Gdzie warstwa "out" jest kontenerem na dwie podrzędne warstwy: "header-main" w którą są pisane znaki labiryntu oraz "mylogo" gdzie wpisuję nazwę bloga.

Ostylowanie jest proste:

main-navigation-menu {
    background-color: #ee3333;
}
.site {
    margin: 0;
    padding: 0;
    max-width: none;
}
#out {
    position: relative;
}
#mylogo {
    position: absolute;
    top: 1.2em;
    left: 1em;
    font-family: 'C64 Pro Mono Local', monospace !important;
    font-size: 2em;
    color: #ee3333;
}
#header-main {
    padding:0;
    height: 7em;
    line-height: 1em;
}

Powyżej znajdują się, oprócz niezbędnych definicji, style wymagane przez używany przeze mnie szablon.

No i jeszcze Javascript, który wszystko rysuje:

const fs = 17;   // font-size
const fc = 1;    // font-constant - przydaje się w niestand. sytuacjach
const delay = 5; // opóźnienie
const siteTitle = ["&#x0ee13","&#x0ee03","&#x0ee1a","&#x0ee12","&#x0ee0b","&#x0ee2e","&#x0ee06","&#x0ee02","&#x0ee12","&#x0ee2e","&#x0ee10","&#x0ee0c"]; // nazwa mojego bloga
const odswiez = 90000; // co ile odświeżać całość w ms

var myVar = setInterval(doresize, odswiez);

// funkcja losuje i wypluwa znak '/' albo '\'
function emitZnak() {
  x = Math.floor((Math.random() * 2) + 1);
  if (x == 1) {
    znak = "&#x0ee4d;";
  } else {
    znak = "&#x0ee4e;";
  }
  return znak
}
// śpioch
function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
// funkcja musi być asynchroniczna by działał sleep
async function doroboty() {
  // mierzę rozmiar div-a
  divW = document.getElementById('header-main').clientWidth;
  divH = document.getElementById('header-main').clientHeight;
  // ile znakow miesci sie w linii
  var cpl = Math.floor(divW / (fs / fc));
  // ile linni miesci sie w divie
  var lpd = divH / fs;
  for (i=1; i<=lpd;i++) {
      for (j=1;j<=cpl;j++) {
          document.getElementById('header-main').innerHTML += emitZnak();
          await sleep(delay);
      }
      document.getElementById('header-main').innerHTML += "<br />";
  }
}
// funkcja odpalana przy zmiane rozmiaru okna przeglądarki
function doresize() {
    document.getElementById('header-main').innerHTML = "";
    document.getElementById('mylogo').innerHTML = "";
    doroboty();
    dologo();
}
// rysowanie nazwy bloga, tu można się fajniej pobawić
async function dologo() {
    for (k=0;k<siteTitle.length;k++) {
        document.getElementById('mylogo').innerHTML += siteTitle[k];
        await sleep(80);
    }
}

Myślę, że kod jest czytelny i nie trzeba nic więcej wyjaśniać. Aż się prosi o dodatkowe efekty wizualne: podświetlenia, wygasanie, koloryzację, itp.

Oczywiście Javascript trzeba odpalić dodając dyrektywę onLoad oraz onResize do tagu <body>.

You might enjoy