자바스크립트/축구선수 랜덤게임

[자바스크립트] 축구선수 랜덤 이미지 게임

위르겐 2022. 6. 11. 22:39

 

리액트 공부하다보니

말랑말랑한 바닐라 JS가 그리워져서

아주 간단한 랜덤이미지게임 하나 만들어 봤다.

 

호스팅 한 후

활동하고 있는 리버풀 팬카페에 배포했는데 반응이 아주 뜨거웠다 ^^

(그 이유는 아래에서 설명하겠다)

.

 

 

멈춤 버튼을 누르면 랜덤으로 돌아가는 이미지가 멈추면서 한 사진이 고정되는 

흔하디 흔한 랜덤게임이다. 

 

 

HTML과 CSS는 

간단하니 생략하고 

JS 코드를 첨부하겠다.

 

const button2 = document.querySelector('.color-10');
const real_img = document.querySelector('.real-img');
const p_tag = document.querySelector('.div-p');

 

CSS로 꾸며준 버튼과 img태그 그리고 버튼을 클릭했을 때 나오는 선수들의 이름을

각각 변수로 지정해준다.

 

  let img_arr = ['./images/01.png',
   './images/02.png', 
   './images/03.png', 
   './images/04.png', 
   './images/05.png', 
   './images/06.png', 
   './images/07.png', 
   './images/08.png', 
   './images/09.png', 
   './images/10.png', 
   './images/11.png', 
   './images/12.png', 
  ]

배열을 만들어 각 이미지들로 구성한 후

 

function random_game () {
  let ranNum = Math.floor(Math.random() * img_arr.length);
  real_img.src= img_arr[ranNum];

}

let interval = setInterval(random_game, 100);

 

random_game 함수를 우선 선언해주고

 

0부터 1까지의 무한한 숫자를 하나 뽑아서 출력해주는

Math.random()내장함수를 사용한다.

0 < a < 1

여기에 img_arr의 길이인 12를 곱해서

0부터 11을 랜덤하게 추출한후

img태그의 src속성으로 img_arr 배열의 인덱스값으로 넣어준다!

 

interval 변수를 선언한다. 그리고 

setInterval함수의 첫번째 파라미터에 random_game 함수를 넣고

두번째 파라미터에 100을 넣어

할당한다.

이렇게되면 

웹페이지에 접속하자마자

0.1초마다 한번씩 random_game함수가 실행이되며

이미지가 빠르게 넘어간다.

 

const random_switch = () => {
  let lucky = (Math.random());
  let lucky_cut = lucky.toFixed(2)

  switch (true) {
    case lucky_cut < 0.1 :
      real_img.src = img_arr[0];
      p_tag.innerHTML = 'Next Gerrard'
      break;
    case lucky_cut < 0.2 :
      real_img.src = img_arr[1];
      p_tag.innerHTML = 'Oxlade-Chamberlain'
      break;
    case lucky_cut < 0.3 :
      real_img.src = img_arr[2];
      p_tag.innerHTML = 'Robertson'
      break;
    case lucky_cut < 0.4 :
      real_img.src = img_arr[3];
      p_tag.innerHTML = 'Luis Diaz'
      break;
    case lucky_cut < 0.5 :
      real_img.src = img_arr[4];
      p_tag.innerHTML = '세네갈 흑표범 (뮌헨(진))'
      break;
    case lucky_cut < 0.6 :
      real_img.src = img_arr[5];
      p_tag.innerHTML = '철강왕 마팁'
      break;
    case lucky_cut < 0.65 :
      real_img.src = img_arr[6];
      p_tag.innerHTML = '차기발롱후보'
      break;
    case lucky_cut < 0.7 :
      real_img.src = img_arr[7];
      p_tag.innerHTML = '이집트 파라오'
      break;
    case lucky_cut < 0.75 :
      real_img.src = img_arr[8];
      p_tag.innerHTML = '근본유스'
      break;
    case lucky_cut < 0.8 :
      real_img.src = img_arr[9];
      p_tag.innerHTML = '캡틴'
      break;
    case lucky_cut < 0.9 :
      real_img.src = img_arr[10];
      p_tag.innerHTML = '리버풀 본체'
      break;
    case lucky_cut < 1 :
      real_img.src = img_arr[11];
      p_tag.innerHTML = '교수님'
      break;
  }
  console.log(lucky_cut)
}

 

switch case문을 이용해

Math.random()내장함수의 소수점 두번째자리까지 자른 후

각 케이스를 비교하여 

사진과 innerHTML을 지정해주었다.

 

switch case문에서

비교할 기준이 되는 대상을 (true)로

설정하면

case 조건문에 

lucky_cut < 0.9 이런식으로 범위 지정이 가능하다는걸 알게 됐다.

 

button2.addEventListener('click', () => {
  if (interval !== null) {
    clearInterval(interval);
   random_switch();
    interval = null;
    button2.innerHTML = '다시 ㄱ';
  } else {
    interval = setInterval(random_game, 100);
    button2.innerHTML = '멈춰!';
    p_tag.innerHTML = '';
  }
})

버튼의 토글 기능이다

만약 위에서 할당해준 interval함수가 null이 아니라면 버튼을 클릭했을 때

interval함수를 clearInterval로 멈춰주고 

random_switch()함수를 실행 한 후 

interval 을 null로 할당해준다

 

이렇게되면

interval변수가 null이 되기 때문에

여기서 다시한번 버튼을 눌렀을때

 

clearInterval로 멈춘 함수를 다시

복구시켜 setinterval을 할당하면

 

토글버튼이 완성된다.

 

 

여기서 확률을 마음대로 손봐서

리버풀 팬카페에 배포했는데

팬들이 가장 싫어하는 선수두명을

각각 45퍼 확률로 넣어주고 나머지 선수들을

10퍼확률안에서 쪼개어 나눠줬기 때문에

높은확률로 그 두선수만 나왔을 것이다 ㅋㅋ

 

 

욕이 난무하는 댓글들을 보며

성공했다는 느낌이 들어 뿌듯했다

 

공부하고있는 리액트로도

새로운 기능 추가해서 다시 만들어봐야겠다.

반응형