Я пытаюсь рандомизировать порядок моего массива в моем проекте Angular6. Я понятия не имею, как это сделать, и в итоге попытался отсортировать массив с помощью функции Math.random()
... (не сработало XD)
Это мой код на данный момент:
HTML
<div style = "background: darkcyan; width: 600px; height: 600px; margin: auto">
<table>
<tr *ngFor = "let card of cards">
<div id = "{{card.id}}" [ngStyle] = "{'background-color': card.color}" style = " width: 100px; height: 125px; margin: 5px"></div>
</tr>
</table>
</div>
<button (click) = "shuffle()">Shuffle Cards</button>
Машинопись
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-memory-game',
templateUrl: './memory-game.component.html',
styleUrls: ['./memory-game.component.css']
})
export class MemoryGameComponent implements OnInit {
cards = [];
constructor() { }
ngOnInit() {
this.cards = [
{
'id': 1,
'color': 'red'
},
{
'id': 2,
'color': 'green'
},
{
'id': 3,
'color': 'blue'
},
{
'id': 4,
'color': 'yellow'
}
];
this.shuffle();
}
public shuffle() {
this.cards.sort(Math.random);
}
}
Я не знаю, есть ли простое решение, но я очень надеюсь, что кто-то сможет мне помочь ...
Спасибо
Думаю, проблема в том, что нужно сделать что-то вроде:
this.cards.sort((a,b) => 0.5 - Math.random());
на основе некоторых предыдущих ответов на SE
Или сделайте что-то вроде этого:
this.cards.sort(() => Math.random() - 0.5);
На основе этого SE запрос
Этот ответ не перемешивается равномерно. Чтобы узнать о лучших способах, см. stackoverflow.com/questions/2450954/…
алгоритм Фишера Йейтса был бы лучше для этого
Попробуйте эту функцию перемешивания.
function shuffle(arrParam: any[]): any[]{
let arr = arrParam.slice(),
length = arr.length,
temp,
i;
while(length){
i = Math.floor(Math.random() * length--);
temp = arr[length];
arr[length] = arr[i];
arr[i] = temp;
}
return arr;
}
Это чистая функция, которую можно использовать с любым массивом. Он создаст новый перетасованный массив, сохранив исходный.
Если вы хотите, чтобы он работал в вашем шаблоне, чтобы он сортировал this.cards
, вы можете сделать компонентный метод shuffle()
, который изменяет this.cards
:
public shuffle(): any[]{
let arr = this.cards.slice(),
length = arr.length,
temp,
i;
while(length){
i = Math.floor(Math.random() * length--);
temp = arr[length];
arr[length] = arr[i];
arr[i] = temp;
}
this.cards = arr;
}
Обновлено: Я проверил ссылку @wannadream, которую он предоставил в комментарии, и похоже, что моя функция shuffle
выше: «Фактически беспристрастный алгоритм перемешивания - это Fisher-Yates (aka Knuth) Shuffle». Я, должно быть, написал его, используя алгоритм перетасовки Фишера-Йейтса в качестве справочника.
Одно из возможных решений, которое вы могли бы принять, - это создать функцию для генерации случайного int и использовать ее в обратном вызове функции Array.prototype.sort
:
var cards = [{
'id': 1,
'color': 'red'
},
{
'id': 2,
'color': 'green'
},
{
'id': 3,
'color': 'blue'
},
{
'id': 4,
'color': 'yellow'
}
];
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
cards.sort(function(a, b) {
return getRandomInt(cards.length) - getRandomInt(cards.length);
});
console.info(cards);
Math.random
всегда возвращает положительное число, поэтому результат не будет случайным. Обратитесь к ответу @ Shan-Desai, чтобы решить проблему (путем вычитания 0.5 изMath.random
stackoverflow.com/a/53066842/1423259