728x90
0. 배포 링크
- 오늘 회사 연차라 오전에 간단히 프로젝트 진행함(여유ㅎ)
1. 화면 이미지 모음
- 낮은 숫자를 입력하면 -> 'up!'이라고 나옴
- 낮은 숫자를 입력하면 -> 'down!'이라고 나옴
- 기회는 단 5번뿐
- 답을 맞히면 '정답입니다!'라고 나오도록 만듦
2. 코드
2-1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>숫자 맞추기 게임</h1>
<div id="result-area">결과가 나온다</div>
<div id="chance-area">남은 찬스: 5번</div>
<input type="number" id='user-input'/>
<button id="play-button">Go!</button>
<button id="reset-button">리셋!</button>
<script src="main.js"></script>
</body>
</html>
- vs코드에 'html:5'나오는 것으로 자동완성해서 시작했는데 <html lang="en">로 나오는 거 신기함 --> 영어 베이스인 듯
2-2. main.js
//랜덤 번호 지정
//유저가 번호 입력 그리고 go라는 버튼 누름
//만약 랜덤번호 맞추면, 맞췄습니다
//랜덤번호<유저번호 down
//> up
//reset 버튼 누르면 게임 리셋
//5번의 기회를 다쓰면 게임 끝
//1~100범위 안에서만 가능
//이미 입력한 숫자는 기회 줄이기 x
let computerNum = 0;
let playButton = document.getElementById("play-button");
let userInput = document.getElementById("user-input");
let resultArea = document.getElementById("result-area");
let resetButton = document.getElementById('reset-button');
let chances = 5;
let gameOver = false;
let chancesArea = document.getElementById('chance-area');
let history = [];
playButton.addEventListener('click', play)
resetButton.addEventListener('click', reset)
userInput.addEventListener('focus', function(){
userInput.value=''
});
function pickRandomNum(){
computerNum = Math.floor(Math.random()*100);
console.log("정답", computerNum);
}
function play(){
let userValue = userInput.value;
if(userValue<1 || userValue>100){
resultArea.textContent='1과 100사이 숫자를 입력해 주세요'
return;
}
if(history.includes(userValue)){
resultArea.textContent = '이미 입력한 숫자입니다 다른 숫자를 입력해 주세요';
return;
}
chances --;
chancesArea.textContent = `남은기회: ${chances}번`;
if(userValue < computerNum){
resultArea.textContent = 'UP!'
}else if (userValue > computerNum){
resultArea.textContent = 'DOWN!!'
}else{
resultArea.textContent = '정답입니다!'
gameOver=true
}
history.push(userValue)
if (chances < 1){
gameOver = true
}
if (gameOver == true){
playButton.disabled = true;
}
}
function reset(){
userInput.value = '';
pickRandomNum();
}
pickRandomNum();
- 배운 점:
-- mac에서 백틱 키 쓰는 것 어려움
-- 'document.getElementById'와 더 친해지기
-- 난수 설정하는 것: 좋은 블로그 추천
- 보완사항: css를 전혀 하지 않아서 더 사용자 친화적이게 꾸미면 좋을 것 같음(보완할 사항)
- 느낀 점: 프로젝트 자주 해서 실력 향상을 해야겠다(주 1개의 유데미 강의를 끝내는 것을 목표 + 프로젝트 틈틈이 하기)
'프로그래밍 > 프로젝트' 카테고리의 다른 글
| 구글에서 강아지상 이미지 크롤링하기(실패코드..) (1) | 2024.01.13 |
|---|---|
| 홈페이지 검색결과에 표시되는 웹사이트 파비콘 변경하기 (0) | 2024.01.04 |
| 2달간 거의 밤샌 홈페이지 개발 후기 (4) | 2023.12.15 |
| html, css 표 만들기 사이트 추천(완전 편리 그 자체) (0) | 2023.12.12 |
| 카페24 디자인에서 카카오맵 api 적용해서 지도 구현 (1) | 2023.12.11 |
댓글