シンプルな数当てゲーム

50以内の自然数を当てるだけ。チャンスは5回。
数値を入力すると、入力値より高いか低いかヒントが表示されます。

beGameOver
ゲームを終了する関数
rstgs
ゲームをもう一度する場合に再開する関数
推測値(guess)をリセット
ckGs
推測値(guess)が一致しているかチェックする関数

GuessNum.html





<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>数を推測</title>
    <style type="text/css">
      html{
      	font-family: sans-serif;
      }
      body{
      	width: 640px;
      	height: 320px;
      	border: #000000 3px solid;
      	padding: 30px;
      	margin: 10px;
      	margin: 0 auto;
      }
      .lr{
      	padding: 10px;
      }
    </style>
  </head>
  <body><script type="text/javascript" src="https://ad.xdomain.ne.jp/js/server-wp.js"></script>
    <h1>数当てゲーム</h1>
    <p>
      50以内の自然数が隠れています。数値を入力すると、高いか低いかヒントが表示されます。チャンスは5回
    </p>
    <div class="form">
      <label for="gf">数字</label>
      <input type="number" id="gf" max="50" min="0" class="gf" />
      <input type="submit" value="回答" class="gsm" />
      <div class="rps">
        <p class="gs"></p>
        <p class="lr"></p>
        <p class="po"></p>
      </div>
    </div>
    <script src="numGuess.js" async="async"></script>
  </body>
</html>

GuessNum.js



let rm = Math.floor(Math.random() * 50) + 1; 
const gs = document.querySelector('.gs'); 
const lr = document.querySelector('.lr');
const po = document.querySelector('.po');
const gf = document.querySelector('.gf'); 
const gsm = document.querySelector('.gsm');
let gc = 1; 
let res = 4;
let rs;
gf.focus();
function ckGs() {
  let ugs = Number(gf.value); 
  if (gc === 1){  
    gs.textContent = 'ラスト'; 
  }
  gs.textContent += ugs +' '; 
    if (ugs === rm) {
    lr.textContent = '正解';
    lr.style.backgroundColor = 'green';
    po.textContent = '';
    beGameOver(); 
  } else if (res === 0){
    lr.textContent = '残念、ゲームオーバー'
    po.textContent = '';
    beGameOver(); 
  } else if (ugs < 0 || ugs > 50){
    lr.textContent = '不正解'
    lr.style.backgroundColor = 'yellow'
    po.textContent = '範囲の数値を入力してください'+res+'のチャンス';
  } else {
    lr.textContent = '不正解';
    lr.style.backgroundColor = 'red';
    if (ugs < rm) {
      po.textContent = gf.value+'より高いかも　あと'+res+'回のチャンス';
    }else if(ugs > rm) {
      po.textContent = gf.value+'より低いかも　あと'+res+'回のチャンス';
    }    
  } 
  gc++; 
  res--;
  gf.value =''; 
  gf.focus();
}
gsm.addEventListener('click',ckGs);
function beGameOver() {
  alert('お疲れさま');
  gf.disabled = true;
  gsm.disabled = true; 
  rs = document.createElement('button');
  rs.textContent = 'もう一回';
  document.body.appendChild(rs); 
  rs.addEventListener('click', rstGs); 
}
function rstGs() {
  gc = 1;
  res = 5;
  const rstp = document.querySelectorAll('.rps p');
  for(let i = 0;i < rstp.length ; i++){
    rstp[i].textContent = '';
  } 
  rs.parentNode.removeChild(rs); 
  gf.disabled = false;
  gsm.disabled = false; 
  gf.value = '';
  gf.focus(); 
  lr.style.backgroundColor = 'transparent'; 
  rm = Math.floor(Math.random() * 50) + 1; 
}