[JavaScript]デジタルゲーム(反応型)

37682 ワード
テキストリンク

ガイドhttp://bootstrapk.com/getting-started/#download
ブートストラップをダウンロードしたら、js、cssファイルをこのクリップウェブappファイルに追加します.

page.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!doctype html>
<html lang="utf-8">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>Navbar Template · Bootstrap v5.1</title>
    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/navbars/">

    

<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">

    <style>
      .bd-placeholder-img {
        font-size: 1.125rem;
        text-anchor: middle;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
      }

      @media (min-width: 768px) {
        .bd-placeholder-img-lg {
          font-size: 3.5rem;
        }
      }
    </style>

    
    <!-- Custom styles for this template -->
    <link href="navbar.css" rel="stylesheet">
  </head>
  
<script type="text/javascript" src="page.js"></script>

  
  <body> 
	<main>
	  <nav class="navbar navbar-expand-lg navbar-light bg-light">
	  <div class="container-fluid">
	    <a class="navbar-brand">숫자 맞추기 게임</a>
	    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
	      <span class="navbar-toggler-icon"></span>
	    </button>
	    <div class="collapse navbar-collapse" id="navbarNav">
	    </div>
	  </div>
	</nav>

	<br>
	<div class="row">
	  <div class="col">
	    <input type="text" id="min" onkeyup='printNum()' class="form-control" placeholder="최소값" aria-label="First name">
	    <div id='result'></div>
	  </div>
	  	~
	  <div class="col">
	    <input type="text" id="max" onkeyup='printNum()' class="form-control" placeholder="최대값" aria-label="Last name">
	    <div id='result'></div>
	  </div>
	  <div class="col">
	  <button type="button" class="btn btn-primary" onClick="gameStart();">난수 발생</button>
	  </div>
	</div>
	<br>        
        
	<div class="row">
	  <div class="col">
	    <input type="number" name="num" onkeydown="enterCheck()" id="applyNum"
	    class="form-control" placeholder="숫자를 입력해주세요" aria-label="First name">
	  </div>
	  <div class="col">
	  <button type="button" class="btn btn-secondary" onclick="applyNum();">숫자입력</button>
	   </div>
	</div>
	<br>

	<div class="form-floating">
	  <textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea2" style="height: 200px"></textarea>
	  <label for="floatingTextarea2">
	    	<div class="log" id="Trace">
               
  			</div>
	  </label>
	</div>
	
	<br>	
	   <h2>Challenge log</h2>
	      <div class="table-responsive">
	        <table class="table table-striped table-sm">
	          <thead>
	            <tr>
	              <th scope="col">No.</th>
	              <th scope="col">입력한 숫자</th>
	              <th scope="col">결과</th>
	            </tr>
	          </thead>
	          <tbody>
	        
	          </tbody>
	        </table>
	      </div>

	</main>
    <script src="js/bootstrap.bundle.min.js"></script>
     
  </body>
</html>
JavaScript
page.js
var targetNum; 
var startStatus = false; 
var cnt = 0; 
var compare = ""; 
var min;
var max;
var result = false;

function printNum(){
	min =  document.getElementById('min').value;
	console.log("최소값 : ", min);
	max =  document.getElementById('max').value;
	console.log("최대값 : ", max);
}

function gameStart(){

    targetNum = Math.floor(Math.random()*(max-min+1)+min)
    console.log("맞춰야될 숫자 : ", targetNum);
}


function Trace() {
	
    this.clear = function() {
        document.querySelector('.log').innerHTML = "";  
    }
    this.log = function(msg) {
        var count = document.querySelector('.log'); 
        var p = document.createElement('p');  
		
		p.id = 'pid';
      
       	p.innerHTML = msg; 
        count.appendChild(p); 
		let node = document.getElementById('pid');
		console.log(node)
		console.log(document.querySelector('#pid'));  
    }
}
var trace = new Trace();

function applyNum(){
	
	var resultTable = document.querySelector('table');
   
	document.getElementById("Trace").value ='';
 	var userNum = document.querySelector('input[name="num"]').value;

    if(userNum == "" || userNum == undefined){
        alert('값을 입력하세요');
        Reset.focusInput();  // inputFocus도 따로 빼기
    }else{
        if(targetNum == userNum){
            compare = "정답입니다";
            Reset.endStatus();
            cnt++;
            alert( cnt + '번 만에 숫자를 맞췄습니다');

        }else{
            if(targetNum > userNum){
                compare = userNum+"보다 높아요";
            }else{
                compare =userNum+"보다낮아요";
            }
            cnt++;
        }
        log = userNum+"를 입력했어요, "+compare+"!";
        trace.log(log);
        document.querySelector('input[name="num"]').value = "";   
        console.log(cnt, '번째 도전 :' , userNum);
    }

 
	var tr = document.createElement("tr");
	var td1 = document.createElement("td");
	var td2 = document.createElement("td");
	var td3 = document.createElement("td");
	td1.innerHTML=cnt;
	td2.innerHTML=userNum;
	td3.innerHTML=compare;
	tr.append(td1);
	tr.append(td2);
	tr.append(td3);
	resultTable.append(tr);
	console.log("tr",tr);
	
}

function Reset() {
    this.clearStatus = function(){  // 초기화상태
        document.querySelector('.gameStartText').style.display = "block";
        document.querySelector('.reStart').style.display = 'none';
        document.querySelector('input[name="num"]').disabled = false;
        document.querySelector('input[name="num"]').value = "";
        trace.clear();
        cnt = 0;
    }
    this.endStatus = function(){ 
        document.querySelector('input[name="num"]').disabled = true;
    }
    this.focusInput = function(){  
        document.querySelector('input[name="num"]').focus();
    }
}

var Reset = new Reset();

function enterCheck(){
    if(event.keyCode === 13){
        applyNum();
    }
}
[ブログ]ホームページ構成ガイド
TIL60. Django:Backend通信準備