数字当てゲームを作成

前提・実現したいこと

ユーザーが数字を入力し、コンピューターがランダムに生成した数字と一致したら当たりになるプログラムにおいて、入力する数字を５個で作成したいと考えています。

下のコードは数字2つに対応しています。

こういった場合、数字を3つ増やすと単純に記述量が増えるとは思うのですが、なるべく少ない記述で完成させるにはどの部分にどういった工夫を凝らすのが一般的なのでしょうか？

1番増えるのはelse ifの条件部分だと思うのですが(コードでは「前後賞」ですが、数字を5つにしたら順不同で5つ一致した場合も「小当たり」にしたいです)、ここを全通り書かなくても済む考え方などがあればヒントをいただきたいです。

<form>
  <input type="text" id="number1" value="" onblur="check1()"><br>
  <input type="text" id="number2" value="" onblur="check1()"><br>
  <p id="error1"></p><br>
  <input type="button"  id="btn" value="チェック" onclick="click()"><br><br>
</form>


USER :[<span id="user1">&emsp;&emsp;&emsp;</span>] [<span id="user2">&emsp;&emsp;&emsp;</span>]

<br>
<br>
COM : [<span id="com1">&emsp;&emsp;&emsp;</span>] [<span id="com2">&emsp;&emsp;&emsp;</span>]

<p id="result"></p> 



var btn = document.getElementById('btn');
btn.disabled = true;

function check1(){
  var btn = document.getElementById("btn");
  var number1 = document.getElementById("number1").value;
  var number2 = document.getElementById("number2").value;
  if(number1.match(/^[0-9]{1}$/) && number2.match(/^[0-9]{1}$/)){
    btn.disabled = false;
    error1.innerHTML = ' '
  }else if(!number1.match(/^[0-9]{1}$/) || !number2.match(/^[0-9]{1}$/)){
    error1.innerHTML = '0から9の半角数字を2つ入力してください'
  }
}


function click(){

  var number1 = document.getElementById("number1").value;
  var number2 = document.getElementById("number2").value;

  var user1 = document.getElementById("user1");
  var user2 = document.getElementById("user2");

  var com1 = document.getElementById("com1");
  var com2 = document.getElementById("com2");

  var result = document.getElementById('result');

  var random1 = Math.floor( Math.random() * 11);
  var random2 = Math.floor( Math.random() * 11);

  user1.innerHTML = number1;
  user2.innerHTML = number2;
  com1.innerHTML = random1;
  com2.innerHTML = random2;

  if(number1 === random1 && number2 === random2){
    result.innerHTML = "当たり";}
  else if(number1 === random2 && number2 === random1) {
    result.innerHTML="前後賞";
  }else{
    result.innerHTML="はずれ";
  }
}

試したこと

配列が使えるかな、と考え色々と調べているのですが、良い考えが浮かびません。

行動規範の内容に同意します

回答1件

あえて短く。

html&js
1<!DOCTYPE html>
2<title></title>
3<meta charset="UTF-8">
4<style>
5form:not(.invalid) p { display: none;}
6form ul li:first-of-type { display: none }
7li input:invalid { box-shadow: 0 0 3px red; }
8</style>
9
10<body>
11<form>
12  <ul>
13    <li><input placeholder="0から9の半角数字を入力してください" pattern="^\d$" required>
14  </ul>
15  <p>未入力またはエラーがあります</p>
16  <button type="button">チェック</button>
17</form>
18<dl>
19  <dt>USER
20  <dd><output>
21  <dt>COM
22  <dd><output>
23</dl>
24<p id="result"></p>
25
26  
27<script>
28const
29  N = 5,
30  R = [...Array (N)];
31
32
33function check1 () {
34  let f = document.querySelectorAll ('form li input:valid').length != N;
35  document.querySelector('form').classList[f ? 'add': 'remove'] ('invalid');
36  return f;
37}
38
39
40function check2 () {
41  let
42    output = document.querySelectorAll ('output'),
43    user = [...document.querySelectorAll ('form li input:valid')].map (e=> +e.value),
44    com = R;
45
46  [user, com].forEach ((ary, i)=> output[i].value = ary.join`, `);
47  result.textContent =
48    user.every ((u, i)=> u == com[i])
49    ? '当たり'
50    : user.every (u=> com.includes(u))
51      ? '小当たり'
52      : 'はずれ';
53}
54
55
56function handler (event) {
57  let e = event.target;
58  switch (event.type) {
59  case 'input' : check1 (); break;
60  case 'click' : 
61    'BUTTON'!=e.tagName || check1 () || check2 ();
62    break;
63  }
64}
65
66
67let li = document.querySelector ('form li'), ul = li.parentNode;
68R.forEach (_=> ul.appendChild (li.cloneNode (true)));
69R.forEach ((_,i)=> R[i]=Math.random()*10|0);
70
71document.addEventListener ('click', handler);
72document.querySelector ('form').addEventListener ('input', handler);
73
74console.log(R);
75</script>
76