JavaScript를 사용하여 숫자 추측 게임 만들기

7384 단어 beginnersprogrammingwebdevjavascript
The codewithrandom 블로그에 오신 것을 환영합니다. 이 기사에서는 javascript를 사용하여 숫자 추측 게임을 만듭니다. Number Guessing Game 프로젝트의 경우 Html, Css 및 기본 Vanilla Javascript를 사용합니다. 따라서 이러한 기술에 대한 기본적인 이해만 있으면 시작할 수 있습니다.

숫자 추측 게임용 HTML 코드

html 상용구를 작성하고 외부 Css 파일 및 Javascript 파일과 연결합니다. 이 프로젝트에서는 Google 글꼴 "Poppins"를 사용하므로 head 요소 내부에 Google 글꼴에 대한 링크 태그를 추가합니다.

<!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" />
        <link rel="preconnect" href="https://fonts.gstatic.com" />
        <link
            href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
            rel="stylesheet"
        />
    </head>
    <body>
        <div class="container">
            <h3>I am Thinking of a number Between 1-100.</h3>
            <h3>Can you Guess it</h3>
            <input type="text" placeholder="Num" id="guess" /><br />
            <button onclick="play()" id="my_btn">GUESS</button>
            <p id="message1">No. of Guesss : 0</p>
            <p id="message2">Guessed number are : none</p>
            <p id="message3"></p>
        </div>
        <script src="app.js"></script>
    </body>
</html>


숫자 추측 게임을 위해 다음 div 컨테이너를 만들고 body 태그 안에 코드를 추가합니다.

<div class="container">  
     <h3>I am Thinking of a number Between 1-100.</h3>  
     <h3>Can you Guess it </h3>  
       <input type="text" placeholder="Num" id="guess"><br>  
       <button onclick="play()" id="my_btn">GUESS</button>  
       <p id="message1">No. of Guesss : 0</p>  
       <p id="message2">Guessed number are : none</p>  
       <p id="message3"></p>  
   </div>


이 HTML 코드는 숫자 추측 게임의 기본 구조를 제공합니다.



숫자 추측 게임용 CSS 코드

다음으로 프로젝트의 스타일을 지정하고 CSS를 사용하여 표시할 수 있도록 만듭니다. 배경 및 루트 요소의 스타일을 지정하여 기본 패딩 및 여백을 0으로 만들고 테두리 상자가 관리하는 상자를 만듭니다. 웹페이지에서 컨테이너 요소를 중앙에 배치합니다.

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    height: 100vh;
    background: linear-gradient(to right, #7f53ac, #657ced);
}
.container {
    position: absolute;
    width: 50%;
    min-width: 580px;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    background: #fff;
    padding: 50px 10px;
    border-radius: 5px;
    display: grid;
    justify-items: center;
    font-family: "poppins", sans-serif;
}


다음으로 컨테이너 내부의 요소에 스타일을 지정하여 사용자 인터페이스를 더욱 매력적으로 만듭니다.

h3 {
    font-size: 30px;
    font-weight: 600;
}
input[type="text"] {
    width: 90px;
    font-weight: 600;
    padding: 20px 0;
    font-size: 28px;
    text-align: center;
    margin-top: 30px;
    border-radius: 5px;
    border: 2px solid #202020;
    color: #663399;
}
button {
    width: 160px;
    padding: 15px 0;
    border-radius: 5px;
    background-color: #663399;
    color: #fff;
    border: none;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 30px;
}
p {
    font-weight: 400;
}


다음은 숫자 추측 게임에 대한 css 이후의 업데이트된 출력입니다.

Html Css 숫자 추측 게임 출력-



다음으로 Javascript를 통해 숫자 추측 게임에 기능을 추가하고 있습니다.

자바 스크립트 코드 번호 추측 게임

var msg1 = document.getElementById("message1") var msg2 = document.getElementById("message2") var msg3 = document.getElementById("message3") var answer = Math.floor(Math.random() * 100) + 1;
var no_of_guesses = 0;
var guesses_num = [];

function play() {
    var user_guess = document.getElementById("guess").value;
    if (user_guess < 1 || user_guess > 100) {
        alert("Please Enter a number Between 1 to 100");
    } else {
        guesses_num.push(user_guess);
        no_of_guesses += 1;
        if (user_guess < answer) {
            msg1.textContent = "Your Guess is Too low"
            msg2.textContent = "No. Of Guesses : " + no_of_guesses;
            msg3.textContent = "Guessed Number Are: " + guesses_num;
        } else if (user_guess > answer) {
            msg1.textContent = "Your Guess is Too High"
            msg2.textContent = "No. Of Guesses : " + no_of_guesses;
            msg3.textContent = "Guessed Number Are: " + guesses_num;
        } else if (user_guess == answer) {
            msg1.textContent = "Yahhhh You won It!!"
            msg2.textContent = "the Number was " + answer msg3.textContent = " You guessd it in " + no_of_guesses + "Guesses";
        }
    }
}


이제 숫자 추측 게임에 대한 자바스크립트 섹션을 완료했습니다. 다음은 숫자 추측 게임에 대한 html, css 및 javascript로 업데이트된 출력입니다.

숫자맞추기 게임의 출력 영상과 프로젝트 스크린샷을 보실 수 있습니다.

         Preview - N/A
 Preview available on the website [click here](https://www.codewithrandom.com/2022/08/23/number-guessing-game-javascript-number-guess-game-javascript-game/)

결론

Javascript를 사용한 숫자 추측 게임이 마음에 드셨기를 바랍니다. 이 게시물에서는 간단한 HTML 및 CSS와 javascript를 사용하여 숫자 추측 게임을 만드는 방법을 배웠습니다. 우리가 실수를 했거나 혼란이 있다면 독자를 돕고 우리 모두가 프로세스를 쉽게 할 수 있도록 의견을 남겨주세요.

다른 블로그를 참조하고 프런트 엔드 개발에 대한 지식을 얻으십시오. 고맙습니다

작성자 – Random/Anki를 사용한 코드

일부 관련 주제 -

chat-ui-design-using-html-and-css-chatbot-ui-template-html-free

notes-app-using-html-css-javascript-

category/project

spotify-clone-html-css-javascript

flappy-bird-game-code-flappy-bird-game-using-html-css-javascript
TikTok에서 좋아요 제거 자동화
CSS배틀 | #31 같음

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage