Q&A
早速、ご回答いただきありがとうございます！確かに２つwinが出てすごいのですが、ボックスをクリックすることでwinであるかどうが、わかるようにしたいのでもう少し考えさせていただきたいです＞＜
前提・実現したいこと
お世話になります。
10個のdivが並んでいて、クリックするとランダムに2個winを表示したいです。
それ以外は、loseを表示したいです。
また、2個は重複しないようにしたいです。
現状、1個は取得できているのですが、複数の表現に困っています。
アドバイスいただけると幸いです。よろしくお願いいたします。
該当のソースコード
javascript
1 <script> 2 'use strict';//エラーチェック 3 const num = 10; 4 const winner = Math.floor(Math.random() * num); // 0 - 9 5 6 for (let i = 0; i < num; i++) { 7 const div = document.createElement('div'); 8document.createElement() 9 div.classList.add('box'); 10 div.addEventListener('click', () => { 11 if (i === winner) {//iと比較して当たり判定 12 div.textContent = 'Win!'; 13 div.classList.add('win'); 14 } else { 15 div.textContent = 'Lose!'; 16 div.classList.add('lose'); 17 } 18 }); 19 20 document.body.appendChild(div);//divをbodyの子要素として追加 21 } 22 </script>
試したこと
このようにしてみると、２つwinが出ましたが
ランダム状態になっていますでしょうか。。。
```javascript <style> body { display: flex; flex-wrap: wrap;/*折り返し*/ } .box { width: 100px; height: 100px; background: skyblue; cursor: pointer; transition: 0.8s; margin: 0 8px 8px 0; text-align: center; line-height: 100px; } .win { background: pink; border-radius: 50%; transform: rotate(360deg); } .lose { transform: scale(0.9); } </style> </head> <body> <script> 'use strict';//エラーチェック const num = 10; const winner = Math.floor(Math.random() * num); // 0 - 9 const winner2 = Math.floor(Math.random() * num); // 0 - 9 //Math.random() * num 0以上1未満のランダムな数値をかける //Math.floor 小数点以下を切り捨て for (let i = 0; i < num; i++) { //i カウンター 1ずつ増えて １０になったら抜ける ０から const div = document.createElement('div');//定数div 要素を作るには document.createElement() div.classList.add('box'); div.addEventListener('click', () => { if (i === winner) {//iと比較して当たり判定 div.textContent = 'Win!'; div.classList.add('win'); } else if (i === winner2){ div.textContent = 'Win2!'; div.classList.add('win'); } else { div.textContent = 'Lose!'; div.classList.add('lose'); } }); document.body.appendChild(div);//divをbodyの子要素として追加 } </script> </body>
回答3件
0
ベストアンサー
次のようにしたらどうでしょう。
- 0 から 9 までの配列を作る。
- 配列をシャッフルする。
- winner に配列の先頭二つの要素を入れる。
- クリックイベントの中で winner の中に i があるかどうかを調べる。
投稿2019/10/06 22:15
総合スコア28669
0
定数を２つにして、複数のランダムな整数を取得することができました。
ありがとうございました。
<body> <script> 'use strict';//エラーチェック const num = 5; // const winner = Math.floor(Math.random() * num); // 0 - 9 const winner=Math.floor(Math.random()*num); const winner2=(winner+Math.floor(Math.random()*10)+1)%num; //Math.random() * num 0以上1未満のランダムな数値をかける //Math.floor 小数点以下を切り捨て for (let i = 0; i < num; i++) { //i カウンター 1ずつ増えて １０になったら抜ける ０から const div = document.createElement('div');//定数div 要素を作るには document.createElement() div.classList.add('box'); div.addEventListener('click', () => { if (i === winner || i === winner2) {//iと比較して当たり判定 div.textContent = 'Win!'; div.classList.add('win'); } else { div.textContent = 'Lose!'; div.classList.add('lose'); } }); document.body.appendChild(div);//divをbodyの子要素として追加 } </script> </body>
投稿2019/10/07 15:01
総合スコア15
0
こんな感じで
javascript
1<script> 2window.addEventListener('DOMContentLoaded', ()=>{ 3 const divs=document.querySelectorAll('div'); 4 document.querySelector('#btn').addEventListener('click',e=>{ 5 var win_length=2; 6 //var wl=Array(win_length).fill('win').push(...Array(divs.length - win_length).fill('lose')); 7 var w=Array(win_length).fill('win'); 8 var l=Array(divs.length - win_length).fill('lose'); 9 var wl_array=w.concat(l).map(x=>[x,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]); 10 divs.forEach((x,y)=>x.textContent=wl_array[y]); 11 }); 12}); 13</script> 14<input type="button" value="do" id="btn"> 15<div></div> 16<div></div> 17<div></div> 18<div></div> 19<div></div> 20<div></div> 21<div></div> 22<div></div> 23<div></div> 24<div></div>
投稿2019/10/07 00:37
総合スコア116661
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/10/07 13:22
2019/10/07 13:38
2019/10/07 14:59