[Dreamhack] wargame 'Flying Chars' write-up

🌱 Biginner
문제링크
날아다니는 글자들을 멈춰서 전체 문자열을 알아내세요! 플래그 형식은 DH{전체 문자열} 입니다.
❗첨부파일을 제공하지 않는 문제입니다.
❗플래그에 포함된 알파벳 중 x, s, o는 모두 소문자입니다.
❗플래그에 포함된 알파벳 중 C는 모두 대문자입니다.

 

📌문제 파악

따로 주어진 코드는 없으며 웹페이지를 열어보면 빠르게 글자들이 이동하고 있는 장면을 볼 수 있다.

개발자 모드를 열어서 코드를 확인해보면 다음 부분이 글자를 이동시키는 부부분에 해당한다.

<script type="text/javascript">
    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);
    }
  </script>

 

코드는 다음과 같이 작동된다.

1. 이미지 생성 및 설정
   • img_files라는 배열에 20개 이미지 파일의 경로를 저장
   • for 반복문을 통해 20개의 <img> 태그를 동적으로 생성
   • 생성된 각 이미지에 너비와 높이를 10픽셀로 지정하고, 'box'라는 ID를 가진 HTML 요소 안에 추가
2. 애니메이션 함수 anim()
   • HTML 요소와 시작 위치, 이동 거리를 입력받아 애니메이션을 처리하는 함수
   • 내부의 move 함수는 requestAnimationFrame을 사용하여 부드러운 애니메이션을 구현
   • 이미지의 x좌표를 계속해서 증가시켜 오른쪽으로 움직이게함
   • 이미지가 화면 오른쪽 끝을 넘어가면 위치를 다시 0으로 리셋하여 왼쪽에서 다시 나타나도록함
3. 애니메이션 실행
   • 마지막 for 반복문에서 20개의 각 이미지에 대해 anim 함수를 실행
   • Math.random()을 사용하여 각 이미지가 20에서 80 사이의 무작위 속도를 갖게 하여, 이미지들이 서로 다른 속도로 움직이는 효과 구현

📌문제 풀이

총 두가지의 풀이 방법을 떠올렸다.

1. 배열에서 불러오는 순서대로 읽기

• 그러나 이건 (개인적으로) 재미가 없는 풀이라고 느껴서 이렇게 풀지는 않았다.

2. 화면 캡쳐

• 이 역시도 문제에서 의도하는 풀이는 아니라고 생각하여 다른 방법으로 풀었다.

3. 애니메이션 함수 자체를 무력화

• 애니메이션 구현의 핵심은 requestAnimationFrame() 함수이므로 이 함수를 아무것도 하지 않는 빈함수로 덮어쓴다면 해당 페이지의 모든 애니메이션이 멈추게 된다.
• 따라서 콘솔에 아래 코드를 입력했다

window.requestAnimationFrame = function() {};

 

 

• 이 코드가 실행된 이후부터 브라우저는 다음 프레임을 그려달라는 모든 요청을 무시하게 되므로, 이미지들의 움직임이 그 자리에 즉시 얼어붙게 된다.
• 멈춘 화면에서 글자를 하나하나 가져오면 정답은
  Too_H4rd_to_sEe_th3_Ch4rs_x.x이다.

[참고할 자료]

문제를 풀고 나서 찾아본 다른 분들의 풀이중에 참고하면 좋을 풀이를 공유한다.

랜덤 속도만 0으로 바꾸는 방법
https://whkakrkr.tistory.com/542