[자바스크립트] 숫자 맞추기 게임 TIL - #01

⭐프로그램을 만들기 전 로직, 알고리즘을 생각해보기

프로그램을 만들기 전, 간단하게라도 프로그램 알고리즘을 생각하면서 하나씩 차근차근 풀어나간다. 이번에 만들어야 할 숫자 맞주기 게임 프로젝트의 대략적인 구조!

// 랜덤번호 지정
// 유저가 번호를 입력한다 -> Go라는 버튼을 누른다
// 랜덤번호 == 유저번호 맞췄습니다 화면에 표출!
// 랜덤번호 < 유저번호 Down
// 랜덤번호 > 유저번호 Up
// Reset버튼을 누르면 게임은 리셋
// 5번의 기회를 다 쓰면 게임은 끝 -> 버튼 disable
// 유저가 1~100 범위 밖에 숫자를 입력하면 알려준다. (기회는 그대로)
// 유저가 이미 입력한 숫자를 또 입력하면 알려준다. (기회는 그대로)

 

---

오늘 배운 내용, TIL

 

1. 랜덤번호를 지정한다.

Math.floor로 난수 생성

- Math.random() : 실행할 때 마다 ★ 0~1까지의 난수를 생성한다. 1에 근접한 값까지 출력되고 1은 미포함한다. (난수란 무작위로 만들어진 수열을 가리킨다.)

- Math.floor() : 소숫점 아래 숫자를 버린다.

 

★ 랜덤 번호 지정하는 법

let computerNum = 0;

function pickRandomNum (){
    computerNum = Math.floor(Math.random() * 100)+1;;
    console.log(computerNum);
}

pickRandomNum();

1. 우리는 소수가 아닌 자연수를 원하니까 Math.random * 100을 해서 앞에 0~99까지 나오도록 만들어줌. 
2. 소수점 뒤를 버리는 함수 Math.floor를 사용해서 자연수 만들어주기.
3. 우리는 1~100까지의 숫자를 원하는 거니까, +1만 해주면 0~99 -> 1~100이 되는 것!

 

2. 유저가 번호를 입력한다 -> Go라는 버튼을 누른다.

HTML input 태그로 유저가 입력할 수 있는 창을 만든 후, 자바스크립트에 input값을 받을 수 있는 변수를 만들고 value로 연결하기

- document.getElementById("Something") : HTML의 Id요소 가져올때 (class등 다른 것들도 가져올 수 있음)

let clickBtn = document.getElementById("click__btn");

 

- Something.addEventListener("Event 이름",함수이름) : 이벤트를 실행시킬 수 있음

//clickBtn을 클릭하면 play함수를 실행하세요.

clickBtn.addEventListener("click",play);

function play (){
	console.log("게임시작");
}

 

- Something.value : 유저가 입력한 값을 불러올 수 있음

let userInput = document.getElementById("user__input");

function play(){
    let userValue = userInput.value;
    console.log(userValue);
}

 

3. 정답을 맞추면 "맞췄습니다!"와 같이 결과 내용을 화면에 표출!

div로 결과창 태그를 만든 후, 자바스크립트에 변수를 만들어 textContent로 연결하기

- Something.textContent : 콘솔값(결과값)을 유저에게 보여주기 위해서 html로 보내기

 

4. 랜덤번호 = 유저번호 / 랜덤번호 < 유저번호 Down / 랜덤번호 > 유저번호 Up 조건 만들기

if문으로 조건에 따른 결과 도출하기 (if문 더 알고 싶으면 하단 링크 클릭)

[자바스크립트] if문, switch문(feat.case), 삼항연산자(feat.if문 줄임말)

 

---

기억하고 싶은 내용 및 느낀점

 

가장 많이 하는 실수

1. 함수 : 함수이름(); 이걸 입력 안함으로 실행을 안시킨다.
2. getElementById(); : 스펠링, 그러므로 항상 Id나 Class 있는 그대로 카피하기