기존 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>assignment</title>
<script>
function randomN(min, max) {// 랜덤한 숫자를 생성하는 함수
const low = Math.ceil(min)
const high = Math.floor(max)
return Math.floor(Math.random() * (high - low) + low);
}
let Num = randomN(999, 10000) // 위의 걸 변수에 저장
console.log(Num)
function show() { // 버튼이 눌리면 랜덤한 숫자를 출력, 3초 뒤에 사라지는 함수
$('#randomnumber').text(Num)
function del() {
$('#randomnumber').empty()
}
setTimeout(del, 3000);
}
function checknumber() { // 제출 버튼 클릭 시, 답을 확인하는 함수
let kotae = $('#answer').val();
if (kotae == Num) {
$('#check').text('정답입니다.')
} else {
$('#check').text('오답입니다. 정답은 ' + Num + '입니다.')
}
}
</script>
<style>
* {
font-family: "Jua", sans-serif;
}
.box {
width: 300px;
height: 200px;
margin: 500px auto 0px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: 1px solid black;
border-radius: 5px;
box-shadow: 0px 0px 3px 0px black;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<h1>숫자 기억 게임</h1>
<h2 id="randomnumber"></h2>
<input type id="answer">
<button onclick="show()">시작</button>
<button onclick="checknumber()">제출</button>
<p id="check"></p>
</div>
</div>
</body>
</html>
기존 코드의 문제점
1. 새롭게 시작 버튼을 눌러도 새로운 난수를 생성하지 않는다. 따라서 새로운 게임을 위해서는 수동으로 새로고침 버튼을 눌러줘야만 한다.
2. 제이퀴리 기반으로 작성된 코드를 최대한 제이퀴리 없이 작성해보려고 한다.
바꿔야할 것.
function randomN(min, max) {// 랜덤한 숫자를 생성하는 함수
const low = Math.ceil(min)
const high = Math.floor(max)
return Math.floor(Math.random() * (high - low) + low);
}
let Num = randomN(999, 10000) // 위의 걸 변수에 저장
console.log(Num)
난수를 생성하는 함수.
Math.random이랑 Math.floor를 이용해보자.
전체적인 제이퀴리 문법을 자바스크립트로.
완성된 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>assignment</title>
<style>
* {
font-family: "Jua", sans-serif;
}
.box {
width: 300px;
height: 200px;
margin: 500px auto 0px auto;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
border: 1px solid black;
border-radius: 5px;
box-shadow: 0px 0px 3px 0px black;
}
</style>
</head>
<body>
<div class="box">
<div class="content">
<h1>숫자 기억 게임</h1>
<h2 id="randomnumber"></h2>
<input type="number" id="answer">
<button onclick="show()">시작</button>
<button onclick="checknumber()">제출</button>
<p id="check"></p>
</div>
</div>
<script>
let randomFourDigitNumber;
function show() { // 버튼이 눌리면 랜덤한 숫자를 출력, 1초 뒤에 사라지는 함수
randomFourDigitNumber = Math.floor(1000 + Math.random() * 9000);
document.getElementById('randomnumber').textContent = randomFourDigitNumber;
setTimeout(function() {
document.getElementById('randomnumber').style.visibility = "hidden"
}, 1000)
}
function checknumber() { // 제출 버튼 클릭 시, 답을 확인하는 함수
let kotae = document.getElementById('answer').value
if (kotae == randomFourDigitNumber) {
document.getElementById('check').textContent = '정답입니다.'
setTimeout(function() {
location.reload(true);
}, 5000)
} else {
document.getElementById('check').textContent = '오답입니다.'
setTimeout(function() {
location.reload(true);
}, 5000)
}
}
</script>
</body>
</html>
추가된 기능) 정답/오답 확인 후 5초 뒤에 '새로고침' 하는 기능을 넣어 게임을 새로 시작할 수 있게끔 만들었다.
'사전 캠프 > 달리기반 과제 모음' 카테고리의 다른 글
| 할 일 목록(To Do List) 만들기 (2) (1) | 2024.09.13 |
|---|---|
| 할 일 목록(To Do List) 만들기 (1) (0) | 2024.09.12 |
| 한식 메뉴 렌더링하기 (2) (0) | 2024.09.11 |
| 한식 메뉴 렌더링 하기 (1) (0) | 2024.09.11 |
| 숫자 기억 게임 만들기 (2) (0) | 2024.09.09 |