JavaScriptでランダムに管理

値を繰り返さずにarray



からランダムにフェッチするための「アルゴリズム」。 具体的には、JSトレーニングの一環として、クラスと名前を繰り返すことなく、古典的なRPGのキャラクターグループ（野b人、魔術師、泥棒、騎士、司祭）を生成するために使用しました。







原則は非常に単純ですが、JSと同じ初心者にとっては、私と同じように役立ちます。 RPGへのバインドはもっぱらシンボリックです-現在、私は積極的に自分のプロファイルをマーケティングからITに変更しようとしています（魂があることに気づきました）。ゲーム形式で練習することはもっと面白いです。

1.テンプレートを作成する

文字のグループを生成する前に、それらの生成用のテンプレートを指定する必要があります。 実際、ここに：

 function GamePlayer(n, r, l, p) { this.nick = n; this.role = r; this.level = l; this.portrait = p; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、この関数は呼び出される変数から文字を作成します。 例：

 var player1 = new GamePlayer("Power Ranger","barbarian","64","img/barbarian.jpg")
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

現在、 player1



は特定のポートレートでレベル64のパワーレンジャーplayer1



保存しています。 player1.nick



、 player1.level



などを使用して、ページの本文にパラメーターを表示できます。



GamePlayer



からの値(n, r, l, p)



は、関数へのデータの受信と受信の順序を担当します。 この例でn



とr



を入れ替えると、 player1



強力なplayer1



人レンジャーplayer1



保持しますが、これはタスクにまったく対応していません。

2.配列を設定します

自分で文字を作成するのではなく、（ヘッダーで約束されているように）ほぼランダムに文字を生成するには、これらの同じ文字のパラメーターを取得する配列が必要です。 すでに上で説明したように、4つのパラメーターのみがあります：



、



、



、および



。





名前の配列：

 var playerNames = ['Rabbit Helpless', 'Warm Dreaded Foal', 'Desire Kit', 'Angel Dusty', 'Sweety Frozen', 'Silver Heavy Wombat', 'Lost Puma', 'Vital Panda', 'Rolling Sun', 'Steel Runny', 'Young Fox', 'Needless Ruthless Volunteer', 'Chipmunk Cult', 'Indigo Puppy'];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

さらに進んで、2〜3個のコンポーネントから名前を生成することもできますが、そのような改善のためのアルゴリズムには新しいもの（同じランダム性）が含まれておらず、学習プロセスが単純に複雑になります。





クラスの配列：

 var playerRoles = ['barbarian', 'mage', 'rogue', 'knight', 'priest'];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

すべてが同じように明白です。 いくつかのstring



から、ページに表示する値を選択します。





レベルの配列：



具体的な例では、グループのすべてのメンバーがレベル60から70になるようにしたかった。 ただし、条件は変更される可能性があるため、0〜80レベルの配列を作成し、そこから目的の値を選択する必要がありました。 ループによって作成された：

 var playerLevels = []; for (i = 0;i <= 80;i++) { console.log(i); playerLevels[i] = i; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

結果はplayerLevels



配列で、各セルには独自の番号を持つint



が含まれます。





ポートレート用の配列：

 var playerPortraits = ['img/barbarian.jpg', 'img/mage.jpg', 'img/rogue.jpg', img/knight.jpg', 'img/priest.jpg'];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

同じ原則ですが、テキストの代わりに写真へのリンクを使用します。 さらに、目的のdiv



のbackground-image



パラメーター（または、より便利な目的の画像のsrc



パラメーター）でそれらを置き換えることができます。



playerPortraits



配列内の画像の順序がplayerPortraits



配列内のクラスの順序と同じであることが重要です。その後、同じrandom



変数を使用してそれらを生成できます（画像がクラスに一致するように）。

3.キャラクターを生成します

先ほど言ったように、グループには5文字が必要です。 したがって、サイクルを作成します。

 for (i = 0;i<=4;i++) { }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ループの前に、将来の文字の配列を宣言することが重要です。

 var players = [ ];
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

名前生成



次に、名前をランダムに取得するためのランダム変数を作成します。

 var namerand = Math.floor(Math.random() * playerNames.length)
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

• Marh.random()
  
  
  
  、乱数を生成するために使用されます。
• playerNames.length
  
  
  
  （ playerNames
  
  
  
  配列の長さ）による乗算-配列内の名前のランダムな数を制限します。
• Math.floor
  
  
  
  結果の数値を整数に変換します。

ニュアンスは、 Math.floor



られることMath.floor



が、配列の番号付けは0からMath.floor



ため、これは私たちに適しています。





クラス生成



原理と実装は同じです：

 var rolerand = Math.floor(Math.random() * (playerRoles.length));
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

唯一の違いは、クラスではplayerRoles



配列を使用することです。





レベル生成

 var levelrand = Math.floor(Math.random() * (70 - 60 + 1) + 60);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

特定の間隔でのランダムの計算は、数式Math.random() * (max - min) + min



に従って行われます。



この例では、0から10までのランダムな値を取得し、それに60を追加して、60 + 0から60 + 10までの間隔を取得します（これが必要です）。 Math.floor



使用するため、ユニットを追加する必要があります（上記参照）。





キャラクター生成



最後のステップ。 文字を形成するには、最初の例のように、すべてのパラメーターを1つの変数に結合する必要があります。 次のようになります。

 players[i] = new GamePlayer(playerNames[namerand], playerRoles[rolerand], playerLevels[levelrand], playerPortraits[rolerand]);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、各キャラクターは、独自のシリアル番号を持つplayers



配列の要素になります。 そのパラメーターは次のとおりです。

• playerNames[namerand]
  
  
  
  -名前、名前のランダムな選択（ namerand
  
  
  
  番号の下のセル）;
• playerRoles[rolerand]
  
  
  
  -クラス、クラスからのランダム選択。
• playerLevels[levelrand]
  
  
  
  -クラス、60〜70の範囲のランダムレベル選択。
• playerPortraits[rolerand]
  
  
  
  -ポートレート、ポートレートからのランダム選択。

上で述べたように、ポートレートとクラスの配列は、「画像が一致する」ように同一でなければなりません。 したがって、両方のケースで同じrandom



を使用できます。





ランダムに管理



フィナーレ。 そのままにしておくと機能します。 ただし、同じ名前の異なるクラス（たとえば、3人の魔術師と2人の泥棒）の文字のグループを取得します。 これを回避するには、いくつかの簡単な手順で十分です。

 players[i] = new GamePlayer(playerNames[namerand], playerRoles[rolerand], playerLevels[levelrand], playerPortraits[rolerand]); playerNames.splice(namerand,1); playerRoles.splice(rolerand,1); playerPortraits.splice(rolerand,1);
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

文字にパラメーターを割り当てた直後に、対応する配列からセルを削除します。



具体的には、 playerNames.splice(namerand,1)



は、 splice



操作を使用して、 playerNames



配列からnamerand



番号のセルを削除します。 小数点以下の単位は、指定されたセルから削除する必要があるセルの数を示します。 指定したセル自体を1つだけ削除する必要があります。



さらに、サイクルが再び繰り返され、配列の最後のセルにつまずいた場合はundefined



を返すことができました（1減らしました）。 ただし、 Math.random



はplayerNames.length



などを使用するplayerNames.length



、配列の長さに直接依存し、重複しない新しい値のみを生成します。

4.結論

さらに、このスクリプトとページとの相互作用を説明することもできます。キャラクターの「カード」の表示、ポートレートのロードなどがありますが、これはJSの主な機能に関連するかなり明白なプロセスです。 さらに、簡単なマニュアルをもう少しきつく締めました。 そのため、この例ではプロセスの視覚化を見ることができます。



実装のデモ （同様の、わずかに異なるクラス）



この資料が誰かにとって有用であり、興味深い問題の解決に役立つことを願っています。 JSで頑張ってください！