[DreamHack] Flying Chars

https://dreamhack.io/wargame/challenges/850

Flying Chars

난이도: Level 1

화면을 보면, 문자들이 날아다니는 것을 확인할 수 있습니다. 

 

    const img_files = ["/static/images/10.png", "/static/images/17.png", "/static/images/13.png", "/static/images/7.png","/static/images/16.png", "/static/images/8.png", "/static/images/14.png", "/static/images/2.png", "/static/images/9.png", "/static/images/5.png", "/static/images/11.png", "/static/images/6.png", "/static/images/12.png", "/static/images/3.png", "/static/images/0.png", "/static/images/19.png", "/static/images/4.png", "/static/images/15.png", "/static/images/18.png", "/static/images/1.png"];
    var imgs = [];
    for (var i = 0; i < img_files.length; i++){
      imgs[i] = document.createElement('img');
      imgs[i].src = img_files[i]; 
      imgs[i].style.display = 'block';
      imgs[i].style.width = '10px';
      imgs[i].style.height = '10px';
      document.getElementById('box').appendChild(imgs[i]);
    }

    const max_pos = self.innerWidth;
    function anim(elem, pos, dis){
      function move() {
        pos += dis;
        if (pos > max_pos) {
          pos = 0;
        }
        elem.style.transform = `translateX(${pos}px)`;
        requestAnimationFrame(move);
      }
      move();
    }

    for(var i = 0; i < 20; i++){
      anim(imgs[i], 0, Math.random()*60+20);
    }

Javascript 코드를 보면, move 함수에 dis 변수를 통해 위치 값을 계속 더해주고 있고, 아래 for 문을 보면 위치 값을 랜덤하게 생성하여  anim 함수에 전달하고 있습니다.  

 

위치 값을 고정시키기 위해 move 함수에 pos = dis ; 로 변경해주고, for 문에서 랜덤 값 생성하는 Math.random() * 60을 지워줍니다. 

function anim(elem, pos, dis){
    function move() {
        pos = dis;
        if (pos > max_pos) {
          pos = 0;
        }
        elem.style.transform = `translateX(${pos}px)`;
        requestAnimationFrame(move);
    }
    move();
}

for(var i = 0; i < 20; i++){
    anim(imgs[i], 0, 20);
}

 

위 코드를 Console에 입력하면 아래 사진과 같이 문자들이 멈추는 것을 확인할 수 있습니다. 

 

이 문자들을 나열하여 DH{ } 안에 넣어 플래그를 제출하면 됩니다.