자바스크립트 연습을 해보자!!
문법공부는 지겹도록 한거같고 그런데 계속 까먹으니 더이상 안되겠어서 나 혼자 100%는 다 못해도 코드를 쳐 보면서 해보려고 한다. 하다보면 모르는것을 찾아보면서 공부해보려고 한다.. 그래서 나 해보려는건 숫자게임 이다 일명, 술자리 게임!!
숫자 게임을 하려고 하는 순서도를 순서대로 먼저 적어보자!
1. 랜덤번호를 지정.
2. 참가자가 번호를 입력한다. 그리고 Go버튼을 누른다.
3. 만약 참가자가 버튼을 맞투면, '맞췄습니다' 라고 알려준다.
4. 랜덤번호가 참가자가 입력한 번호보다 크면(<) Down!! 이라고 알려준다.
5. 랜던번호가 참가자가 입력한 번호보다 작으면(>) UP!! 이라고 알려준다.
6. Reset 버튼을 누르면 게임이 리셋된다.
7. 5번의 기회를 다쓰면 게임이 끝난다. (더이상 실행 불가, 버튼이 disable 된다)
8. 참가자가 1~100 범위 밖의 숫자를 입력하면 알려준다. 그리고 기회를 깎지 않는다.
9. 참가자가 이미 입력한 숫자를 또 입력하면 알려준다. 그리고 기회를 깎지 않는다.
<body>
<h1>숫자맞추기 게임</h1>
<div id = "result-area">결과가 나온다</div>
<div id ="chance-area">남은 찬스:</div>
<input type = "number" id = "user-input">
<button id = "play-button">Go!</button>
<button id = "reset-button">Reset!</button>
</body> 
html은div태그 두개와input태그 하나 그리고button태그 두개로 만들어주었다. 그리고 각각의 태그에id태그를 넣고javascript에document.getElementById로 입력해두어html에 있는 태그를javascript에서도 볼수 있도록 해주었다.
1. 랜던번호 지정.
let randomNum = 0
function pickRandomNum(){
randomNum = Math.floor(Math.random() * 100)+1;randomNum라는 변수에 숫자 0 을 만들어주고 랜덤하게 2자리수 를 만들어주는 함수를 만들어 주었다.- 랜덤번호는
Math.random함수를 이용해 무작위의 숫자를 받을수 있도록 먼저 해주었다. 하지만Math.random을 이용하면 0 이하의 소수점의 랜점한 번호가 생성되기 때문에 두자리 숫자를 만들어 줘야되기 떄문에 100을 곱해주고 값이 0이 아닌 1부터 시작하기 위해 1을 더해주었다. - 그리고 자연수 두자리수만 필요하기 때문에 소수점을 제거해주는
Math,floor로 감싸주었다.
2. 참가자가 번호를 입력한다. 그리고 Go 버튼을 누른다.
- 참가자가
input에 숫자를 입력하고 그 숫자를 자바스크립트에서 받기 위해서는 마찬가지로 연결한다.
let userInput = document.getElementById("user-input")- 그리고 참가자가 번호를 입력하고 Go 버튼을 누른다
let palybutton = document.getElementById("play-button")
let resultArea = document.getElementBuId("result-area")
playButton.addEventListener("click", play)- 여기서는 버튼태그에
click event를 입력해 줘야한다. 그래야 마찬가지고 버튼을 눌렀을때 그 버튼에 함수를 넣어서 랜덤번호와 참가자가 입력한 번호를 비교해 판단하도록 한다... 이 것은 뒤에서 확인가능하다.
3. 만약 참가자가 버튼을 맞투면, '맞췄습니다' 라고 알려준다.
4. 랜덤번호가 참가자가 입력한 번호보다 크면(<) Down!! 이라고 알려준다.
5. 랜던번호가 참가자가 입력한 번호보다 작으면(>) UP!! 이라고 알려준다.
- 이제 함수를 만들어 줌으로써 3,4,5 스텝을 한꺼번에
if문으로 처리가 가능하다.
function paly(){
let userValue = userInput.value
if(userValue < randomNum){
resultArea.textContent = "UP!!"
}else if(userValue > randomNum){
resultArea.textContent = "Down!!"
}else{
resultArea.textContent = "정답입니다!!"
- 이렇게 함수를 만들어줄 경우 참가자가 번호를 입력하고
play을 누를경우 참가자 번호의 입력에따라 UP, Down, 정답입니다 라고 알려준다. - 여기서
resultArea는 사진에서 보듯이 결과를 알려준다!!
6. Reset 버튼을 누르면 게임이 리셋된다.
- 여기서는 만약 참가자가 기회를 다 소모했거나 그냥 다시 하고 싶을때
Reset버튼을 클릭시 처음부터 다시 시작하도록 하는 버튼이다.
let reserButton = document.getElementById("reset-button")
resetButton.addEventListener("click", reset)
function reset(){// Reset 버튼을 누르면 게임이 리셋된다.
userInput.value = ""; // 리셋시 input창이 깨끗하게 정리된다.
pickRandomNum(); // 그리고 새로운 랜덤번호가 생긴다.
result.Area.texnContent = "게임을 시작하세요!"7. 5번의 기회를 다쓰면 게임이 끝난다. (더이상 실행 불가, 버튼이 disable 된다)
- 이 게임은 총 5번의 기회가 주어진다. 만약 5번의 기회를 다 사용하고도 정답을 맞추지 못하면 GameOver가 된다. 그러면 버튼이 눌러지지 않는다.
let chances = 5
let gameOver = false
let chanceArea = document.getElementById("chance=area")
chances --;
function play(){
chances --; // 찬스를 5번에서 1씩 줄어든다.
chanceArea.textContent = `남은기회: ${chances}번`
// 정적인 남은기회와 동적인 `chances`를 같이 넣어서 `chances` 횟수가 바뀌어야되니 `${}` 에다가 넣어줘 확인할 수 있도록 했다.
if(chances < 1){
gameOver = true;
}
if(gameOver === true){
playButton.disabled = true;
}
// chance가 1보다 작으면 즉, 기회를 다쓰면 gameOver는 true 즉, 사실이 되기 때문에, 게임이 끝난다. 그 후, gameOver === true 즉, 게임이 끝난다(기회를 다 사용했다) 면 `playButton.disabled = true` 플레이 버튼이 disabled 즉, 사용할 수 없게 되어 버린다.
Go버튼이 아예 사용할 수 없게 된다.
8. 참가자가 1~100 범위 밖의 숫자를 입력하면 알려준다. 그리고 기회를 깎지 않는다.
function play(){
if(userValue < 1 || 100 < userValue){
resultArea.textContent = "1 ~ 100 사이의 숫자를 입력해주세요!"
return;
- 이 8번 코드는 기회를 깍는 코드
chances --;코드 전에 넣어줘야 참가자가 100 보다 많은 숫자를 입력할시 기회를 깎지 않는다. chances --;전에 넣어줘야 되는 이유는 컴퓨터가 코드를 읽을 시 Top to bottom 인 방식에서 전에 넣어줘야 찬스가 깎이지 않는다.
9. 참가자가 이미 입력한 숫자를 또 입력하면 알려준다. 그리고 기회를 깎지 않는다.
- 이 스텝에서는 내가 입력한 숫자를 컴퓨터가 저장을 하고있어야 내가 입력한 숫자가 그 전에 입력했던 숫자인지 아닌지 알수 있다. 그래서
배열(array를 사용하는것이 좋다.
let history = []
function play(){
if(history.includes(userValue)){
resultArea.textContent = "이미 입력한 값입니다."
return;
history.push(userValue)userValue에 참가자가 숫자를 입력하면history.push배열함수에 의해history배열에 저장된다.- 그 후
history.includes(userValue)배열함수를 이용해서 배열안에 똑같은 숫자가 입력되어있는지 판단한다. 그 후 알려준다.
❗️느낀점 및 배운점
이 게임은 코딩알려주는 누나 강의를 보면서 연습해본것이다.
자바스크립트 기본문법을 여러 강의를 통해 공부를 했지만 한편으로는 불안한 마음이 컸다 html,css는 먼가 혼자 할 수 있겠다는 자신감이 있었는데, js는 여러번 문법을 반복하면서 느꼈지만 그런 자신감은 없었다. 공부하고도 조금만 지나도 잃어버렸고, 어디서 부터 시작할지가 막막했었다 정말..🤣
그래도 여러 강의를 보면서 하는말이 다른사람이 만들어놓은 코드를 보면서 공부하는게 굉장히 도움이 많이 된다는걸 보고, 나도 해봐야겠다는 생각이 들어 시작했다. 지금 이 게임을 해보고 정말 많이 배웠다고 느낀다. 아직 부족한건 엄청많지만, 천천히 차근차근 하다보면 언젠간 혼자도 스스로 할 수 있지 않을까라는 생각을 조심히한다.
document.getElementById("")를 통해 html에 있는 태그를 javascript에 연결할 수 있다는것을 배웠다..addEventListener("",)를 통해 event함수를 연결할 수 있다는것을 배웠다..textContent를 통해console.log로만 화면에 표시할 수 있는줄 알았던걸 다른 방법으로도 화면체 출력이 가능하다는것도 배웠다.
userInput.addEventListener("focus", function(){
userInput.value = "";- 이 코드로 인해 사용자 편의성을 제공할수 있는 방법도 알았다.
나는 프론트엔드 개발자다!
자바스크립트는 게임 만들기정도로 여러개를 만들면 어느정도 자스를 익히고 리액트 를 넘어가는 정도로 하면될까요 ??