質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

3回答

1760閲覧

抽選機ゲームで結果が出せない

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2018/09/28 22:26

編集2018/09/29 01:54

jsでゲーム作成をしているのですが、わからない部分があったので質問させて頂きます。
userにnumに1から43までの数字を入力させます。
クリックボタンを押すとcpuにランダムに6つの数字とラッキーナンバーが表示されます。
わからない部分は当選結果の部分です。
userとcpuの数字が
1等:数字全て一致
2等:数字5個+ラッキーナンバー一致
3等:数字5個一致
4等:数字4個一致
5等:数字3個一致
その他:残念
並び順は気にせず、一致している数値の数のみで判断してください。

com 1,2,3
user 2,3,1→OK
user 1,2,4→NG
ソースコードも書いていただけると助かります。
よろしくお願いします。

コード <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>練習</title> </head> <body> <form name="form1"> <br> <span id="user">num:</span> <input type="text" value="" name="user" id="user1"> <input type="text" value="" name="user" id="user2"> <input type="text" value="" name="user" id="user3"> <input type="text" value="" name="user" id="user4"> <input type="text" value="" name="user" id="user5"> <input type="text" value="" name="user" id="user6"> <br> <input type="button" value="クリック!" name="win" id="win" onclick="check7()" ><br> <span id="cpu">cpu:</span> <input type="text" value="" name="com" id="cpu1"> <input type="text" value="" name="com" id="cpu2"> <input type="text" value="" name="com" id="cpu3"> <input type="text" value="" name="com" id="cpu4"> <input type="text" value="" name="com" id="cpu5"> <input type="text" value="" name="com" id="cpu6"> <br> <span id="bonus">ラッキーナンバー</span> <input type="text" value="" name="com" id="cpu7"> <br> <br> <span id="res">当選結果</span> </form> <script> function check7(){ var cpu=[]; var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43]; for (var i = 0; i < 7; i++) { cpu[i]= nums.splice(Math.floor(Math.random() * nums.length),1); document.getElementById('cpu'+(i+1)).value=cpu[i]; } if(""){ res.innerHTML="当選結果:1等"; }else if(""){ res.innerHTML="当選結果:2等"; }else if(""){ res.innerHTML="当選結果:3等"; }else if(""){ res.innerHTML="当選結果:4等"; }else if(""){ res.innerHTML="当選結果:5等"; }else{ res.innerHTML="当選結果:ハズレ"; } } </script> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/09/28 23:41

タイトルには質問内容にそった要件を書いてください。またソースコードはマークダウンのcode機能を利用してください。
m.ts10806

2018/09/28 23:55

難しければコード部分を選択状態にしてcodeボタンを押すと確実です。
m.ts10806

2018/09/28 23:56

PCであればリアルタイムプレビューが編集画面の横に表示されているはずなので投稿前に確認して調整してください。
guest

回答3

0

こんにちは。

ある配列をランダムに並べ替えたり、2つの配列の重複した要素を取得するために、

lodash

を使った回答を示します。HTMLのほうも若干、classを追加したりなど修正しています。

html

1 <form name="form1"> 2 <br> 3 <span id="user">num:</span> 4 <input type="text" value="" name="user" id="user1" class="user"> 5 <input type="text" value="" name="user" id="user2" class="user"> 6 <input type="text" value="" name="user" id="user3" class="user"> 7 <input type="text" value="" name="user" id="user4" class="user"> 8 <input type="text" value="" name="user" id="user5" class="user"> 9 <input type="text" value="" name="user" id="user6" class="user"> 10 <br> 11 <input type="button" value="クリック!" name="win" id="win"><br> 12 <span id="cpu">cpu:</span> 13 <input type="text" value="" name="com" id="cpu1" readonly class="cpu"> 14 <input type="text" value="" name="com" id="cpu2" readonly class="cpu"> 15 <input type="text" value="" name="com" id="cpu3" readonly class="cpu"> 16 <input type="text" value="" name="com" id="cpu4" readonly class="cpu"> 17 <input type="text" value="" name="com" id="cpu5" readonly class="cpu"> 18 <input type="text" value="" name="com" id="cpu6" readonly class="cpu"> 19 <br> 20 <span id="bonus">ラッキーナンバー</span> 21 <input type="text" value="" name="com" id="cpu7" readonly class="cpu"> 22 <br> 23 <br> 24 <span id="res">当選結果</span> 25 </form> 26 <hr /> 27 <div> 28 <ul> 29 <li>cpu1からcpu6までと、ユーザー入力とで共通しているナンバー: <span id="json-matchedNumbers"/> 30 </ul> 31 </div>

javascript

1function check7() { 2 3 // 生成するナンバーの最大値 4 const MAX_NUMBER = 43; 5 6 // 1からMAX_NUMBER までを含む配列を生成 7 const nums = [...Array(MAX_NUMBER)].map((_,i) => i+1); 8 9 // cpu を表示する input を取得 10 const cpuInputs = document.getElementsByClassName('cpu'); 11 12 // nums をランダムにシャッフルして先頭のcpu個数分の配列を作成 13 const cpu = _.shuffle(nums).slice(0, cpuInputs.length); 14 15 // cpu を画面に表示 16 for (let i = 0; i < cpuInputs.length; i ++) { 17 cpuInputs[i].value = cpu[i]; 18 } 19 20 // ユーザーから入力されたナンバーの配列を作成 21 const users = document.getElementsByClassName('user'); 22 const userInputNumbers = Array.prototype.map.call(users, (user) => Number(user.value)).filter(x => x); 23 24 // cpu1からcpu6までと、userInputNumbers とで共通しているナンバーの配列を取得 25 const matchedNumbers = _.intersection(cpu.slice(0, userInputNumbers.length), userInputNumbers); 26 27 // 結果を判定して表示 28 const res = document.getElementById('res'); 29 const luckyNumber = parseInt(document.getElementById('cpu7').value); 30 31 switch(matchedNumbers.length) { 32 case 6: // 6個一致 33 res.innerHTML="当選結果:1等"; 34 break; 35 case 5: // 5個一致 36 res.innerHTML=`当選結果:${userInputNumbers.includes(luckyNumber) ? 2 : 3 }`; 37 break; 38 case 4: // 4個一致 39 res.innerHTML="当選結果:4等"; 40 break; 41 case 3: // 3個一致 42 res.innerHTML="当選結果:5等"; 43 break; 44 default: // それ以外 45 res.innerHTML="当選結果:ハズレ"; 46 break; 47 } 48 49 // 確認用の表示 50 document.getElementById('json-matchedNumbers').innerText = JSON.stringify(matchedNumbers); 51};

動作確認用のサンプル: https://jsfiddle.net/jun68ykt/vqbxg219/3/

投稿2018/09/29 04:20

編集2018/09/29 05:29
jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

やりたいことはこんな感じでしょうか。
ユーザー入力が空のときや不正な値が入力された際の挙動などは実装していませんので注意してください。

JavaScript

1function check7(){ 2 3 var cpu=[]; 4 var nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 5 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 6 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43]; 7 var users = []; 8 for (var i = 0; i < 7; i++) { 9 cpu[i]= nums.splice(Math.floor(Math.random() * nums.length),1); 10 document.getElementById('cpu'+(i+1)).value=cpu[i]; 11 } 12 13 // ユーザ入力を受け取るusers配列を作成 14 for (var i = 0; i < 6; i++){ 15 users[i] = Number(document.getElementById('user'+(i+1)).value); 16 } 17 18 function judge(cpu, users){ 19 // 当選結果を判定する 20 var matched = 0; // 一致した数 21 var is_lucky = false; // ラッキーナンバーが一致したかどうか 22 for(var i = 0; i < 6; i++){ 23 if(users[i] === cpu[i]){ 24 matched ++; 25 } 26 if(users[i] === cpu[6]){ 27 is_lucky = true; 28 } 29 } 30 31 if(matched === 6){ 32 return "1st"; 33 } 34 else if(matched === 5 && is_lucky){ 35 return "2nd"; 36 } 37 else if(matched === 5){ 38 return "3rd"; 39 } 40 else if(matched === 4){ 41 return "4th"; 42 } 43 else if(matched === 3){ 44 return "5th"; 45 } 46 else{ 47 return "else"; 48 } 49 } 50 51 var result = judge(cpu, users); 52 53 if(result === "1st"){ 54 res.innerHTML="当選結果:1等"; 55 }else if(result === "2nd"){ 56 res.innerHTML="当選結果:2等"; 57 }else if(result === "3rd"){ 58 res.innerHTML="当選結果:3等"; 59 }else if(result === "4th"){ 60 res.innerHTML="当選結果:4等"; 61 }else if(result === "5th"){ 62 res.innerHTML="当選結果:5等"; 63 }else{ 64 res.innerHTML="当選結果:ハズレ"; 65 } 66 67} 68

【追記】
並び順を気にしない場合、cpuの各要素と、usersの各要素をそれぞれ単純に比較すれば良いと思います。
おそらくユーザー入力で同じ数字を複数入力されていると期待する結果が得られないので、そこは工夫をする必要があると思います。例えば、「ユーザー入力の重複する数字を事前に削除しておく」などです。

必要な修正箇所だけ以下に抜粋します。

ユーザー入力の重複する数字を事前に削除する処理

JavaScript

1 // ユーザ入力を受け取るusers配列を作成 2 for (var i = 0; i < 6; i++){ 3 users[i] = Number(document.getElementById('user'+(i+1)).value); 4 } 5 // ユーザー入力の重複した数字を削除しておく 6 // users = [1,1,1,1,1,1]のとき、cpuの中に1が一つでもあれば一等賞になってしまうのを防ぐ 7 // users = [1,1,1,1,1,1] --> [1] 8 users = users.filter(function(x, i, self){ 9 return self.indexOf(x) === i; 10 });

当選結果を判定する箇所

JavaScript

1 // 当選結果を判定する 2 var matched = 0; // 一致した数 3 var is_lucky = false; // ラッキーナンバーが一致したかどうか 4 for(var i = 0; i < 6; i++){ 5 if(users[i] === cpu[6]){ 6 is_lucky = true; 7 } 8 } 9 10 for(var i = 0; i < 6; i++){ 11 for(var j = 0; j < users.length; j++){ 12 if(cpu[i] === users[j]){ 13 matched ++; 14 break; 15 } 16 } 17 }

投稿2018/09/29 01:04

編集2018/09/29 02:06
takey

総合スコア312

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/09/29 01:38

回答ありがとうございます。 ほぼ完成まで行くことができました! user[i]===cpu[i]は並び順も等しくないとダメですよね・・・? 並び順は気にせず、一致した数値の数だけで判断したいです。
退会済みユーザー

退会済みユーザー

2018/09/29 03:28

ありがとうございます。 解決しました!
guest

0

いまひとつ現在できているところとできていないところ、わかっているところいないところ、現在の問題がわかりづらいですが、Document.getElementById()で対象のIDのエレメントを取得して、そこからinnerHTMLで出来るかと。

投稿2018/09/28 23:58

m.ts10806

総合スコア80731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/09/29 01:35

回答ありがとうございます。 自分でももっと考えてみます。
m.ts10806

2018/09/29 01:51 編集

回答にヒントも入れているのでそちらを参考にしてください。 動くコードをもらって終わってしまうと「わかったつもり」になって成長にはつながりませんので。 デバッグは必ずしてください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問