मैं जावास्क्रिप्ट में एक खानों का खेल बना रहा हूं जिसमें मैं एक यादृच्छिक संख्या उत्पन्न करता हूं जो एक div को सौंपा गया है, यह div एक मेरा होगा, लेकिन समस्या यह है कि उदाहरण के लिए (मैं 8 अलग होने के बजाय खानों की संख्या 8 पर सेट करता हूं) खदानें मुझे 8 खदानें मिलती हैं, लेकिन उनमें से 2 एक ही स्थान पर हैं, इसलिए यह मायने रखता है कि मेरे पास 6 खदानें हैं, मैं इसे कैसे ठीक कर सकता हूं? यहां कोडेम का महत्वपूर्ण हिस्सा है, मेरे कोड में सुधार करने के बारे में कोई सुझाव भी है इसकी सराहना की जाएगी क्योंकि मैं कार्यक्रम के लिए बहुत नया हूं)

let tiles = document.getElementsByClassName('tile');
let numMines = 6

for (i = 0; i < 1; i++) {
    bomb = [tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))],
    tiles[(Math.floor(Math.random ()* tiles.length))]]
    bomb.splice(numMines) 


    bomb[0].style.backgroundColor = "red"; 
    bomb[1].style.backgroundColor = "red";  
    bomb[2].style.backgroundColor = "red";
    bomb[3].style.backgroundColor = "red"; 
    bomb[4].style.backgroundColor = "red";  
    bomb[5].style.backgroundColor = "red";
    bomb[6].style.backgroundColor = "red"; 
    bomb[7].style.backgroundColor = "red";  
    bomb[8].style.backgroundColor = "red";
    bomb[9].style.backgroundColor = "red"; 
    bomb[10].style.backgroundColor = "red";  
    bomb[11].style.backgroundColor = "red";
    bomb[12].style.backgroundColor = "red";
    bomb[13].style.backgroundColor = "red"; 
    bomb[14].style.backgroundColor = "red";  
    bomb[15].style.backgroundColor = "red";
    bomb[16].style.backgroundColor = "red"; 
    bomb[17].style.backgroundColor = "red";  
    bomb[18].style.backgroundColor = "red";
    bomb[19].style.backgroundColor = "red";  
    bomb[20].style.backgroundColor = "red";
    bomb[21].style.backgroundColor = "red"; 
    bomb[22].style.backgroundColor = "red";  
    bomb[23].style.backgroundColor = "red";
    bomb[24].style.backgroundColor = "red"; 
    bomb[24].style.backgroundColor = "red";   
} ```
0
Narchy 21 नवम्बर 2021, 17:29
1
यार क्यों लूप के लिए जब आपको इसे सिर्फ एक बार करना है i < 1
 – 
decpk
21 नवम्बर 2021, 17:34
क्षमा करें, लेकिन मेरे पास आपके प्रश्न का सटीक उत्तर नहीं है, लेकिन एक तर्क जो मुझे आशा है कि आपके मामले के लिए काम करेगा। आप इस बात का रिकॉर्ड रख सकते हैं कि पहले कौन से नंबर दिखाई दिए थे, इसलिए खदान बनाते समय, उस नंबर का उपयोग करने से पहले आप यह जांच सकते हैं कि यदि यह नंबर पहले इस्तेमाल किया गया था, यदि नहीं तो आप मेरा परिनियोजन कर सकते हैं, ईएलएसई आप मेरा परिनियोजन छोड़ सकते हैं। मैं अपना खेल नहीं समझता, इसलिए अगर मैंने कुछ गलत शब्दों का इस्तेमाल किया है तो मुझे खेद है
 – 
Hackytech
21 नवम्बर 2021, 17:35

2 जवाब

संक्षिप्त व्याख्या:

यहां कुछ तर्क दिए गए हैं जो आपके सामने आने वाली समस्या को हल करते हैं, यह @Hackytech के समान ही है, लेकिन मैंने इसके बजाय टाइल की अनिश्चितताओं पर नज़र रखना चुना। आप अनिवार्य रूप से n संख्या में बम बना सकते हैं और प्रत्येक बम के लिए एक अद्वितीय टाइल का चयन कर सकते हैं। जिस तरह से आप एक अद्वितीय टाइल का चयन करते हैं वह getTileIndex फ़ंक्शन में होता है, जो अनिवार्य रूप से तब तक खुद को कॉल करता रहता है जब तक कि उसे एक ऐसा इंडेक्स नहीं मिल जाता है जिसका पहले से उपयोग नहीं किया गया है और वह इंडेक्स लौटाता है। नीचे एक उदाहरण दिया गया है जिसमें DOM शामिल नहीं है।

आपके लिए tiles अंत में document.getElementsByClassName("tile") होगा, मैंने इसे केवल कुछ प्लेसहोल्डर जानकारी प्रदान करने के लिए यादृच्छिक संख्याओं की एक सरणी बनाई है।

आपने उल्लेख किया है कि आप प्रोग्रामिंग में नए थे, इसलिए लाइन दर लाइन क्या हो रहा है, इसकी अधिक विस्तृत व्याख्या यहां दी गई है। पहली पंक्ति, मैं आकार 100 की एक खाली सरणी बना रहा हूं और इसे शून्य मानों से भर रहा हूं, इसलिए यह [null, null, null ... 100 times] हो जाता है। मैं फिर .map को कॉल करता हूं जो एक लूप की तरह है जो एक नई सरणी बनाता है, जहां सरणी में प्रत्येक आइटम कॉलबैक से लौटाया जा रहा है पर निर्भर करता है। चूंकि कॉलबैक item => Math.random() है, मैं सरणी में प्रत्येक आइटम के लिए एक यादृच्छिक संख्या लौटा रहा हूं। मैं फिर tileIndex नामक एक नई सरणी बनाता हूं, जहां मैं ट्रैक करता हूं कि कौन से टाइल इंडेक्स पहले से ही उपयोग किए जा चुके हैं ताकि हम टाइल्स को ओवरलैप न करें। getTileIndex फ़ंक्शन वास्तव में आपकी समस्या का समाधान करता है। यह एक recursive function, यह केवल तब तक खुद को कॉल करता रहता है जब तक कि उसे एक ऐसा इंडेक्स नहीं मिल जाता जो पहले से ही बॉम्ब ऐरे में जोड़ा नहीं गया है। यह फिर उस index. कोड की अंतिम पंक्ति 27 आकार की एक खाली सरणी बनाती है और इसे null से भरती है। पहले की तरह, इस सरणी को फिर मैप किया जाता है, लेकिन एक यादृच्छिक संख्या को वापस करने के बजाय हम अपने getTileIndex फ़ंक्शन को कॉल करके एक अद्वितीय अनुक्रमणिका की टाइल लौटाते हैं जो एक अद्वितीय टाइल अनुक्रमणिका देता है।

अगर आपको यहाँ कुछ समझ में नहीं आया तो बेझिझक कमेंट में पूछ सकते हैं!

const tiles = new Array(100).fill(null).map(item => Math.random());
const tileIndex = [];

function getTileIndex() {
  const i = Math.floor(Math.random() * tiles.length);
  if(tileIndex.findIndex(item => i == item) < 0) {
    tileIndex.push(i);
    return i;
  }
  
  return getTileIndex();
}

let bombs = new Array(27).fill(null).map(bomb => tiles[getTileIndex()]);

console.log(tiles)
0
Ameer 21 नवम्बर 2021, 17:53

यह सुनिश्चित करने का एक तरीका है कि आपको बिना किसी डुप्लिकेट के यादृच्छिक खानों की सही संख्या मिल जाए, अपनी सभी टाइलों के साथ एक अस्थायी सरणी बनाना है, फिर प्रत्येक टाइल को हटा दें क्योंकि यह बेतरतीब ढंग से चुनी गई है। पहली बार आप 24 में से चुन रहे हैं, फिर 23, फिर 22, आदि।

यहाँ कुछ नमूना कोड है:

const { floor, random } = Math;
const tiles = document.getElementsByClassName('tile');
const numMines = 6;
const t2 = [...tiles]; // clone of tiles, since we're going to mutate it
const b = [];
for (let i = 0; i < numMines; i++) {
  const j = floor(random() * t2.length);
  b.push(t2[j]); // add bomb tile to b array
  t2.splice(j, 1); // remove tile from t2
}

// loop through all tiles, make tile red if it's a bomb, black if not
for (const tile of tiles) {
  const isMine = b.indexOf(tile) >= 0;
  tile.style.backgroundColor = isMine ? 'red' : 'black';
}

और एक कामकाजी उदाहरण:

const { floor, random } = Math;
const tiles = document.getElementsByClassName('tile');
const numMines = 6;
const t2 = [...tiles];
const b = [];
for (let i = 0; i < numMines; i++) {
  const j = floor(random() * t2.length);
  b.push(t2[j]);
  t2.splice(j, 1);
}
const bomb = [];

for (const tile of tiles) {
  const isMine = b.indexOf(tile) >= 0;
  bomb.push(isMine);
  tile.style.backgroundColor = isMine ? 'red' : 'black';
}
.tile {
  display: inline-block;
  width: 1em;
  height: 1em;
}
<div class='row'>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
</div>
<div class='row'>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
</div>
<div class='row'>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
</div>
<div class='row'>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
</div>
<div class='row'>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
</div>
<div class='row'>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
  <span class='tile'></span>
</div>
0
David784 21 नवम्बर 2021, 17:54