javascript - 为什么我的卡不是随机放置的?

标签 javascript

我正在编写一个内存卡游戏。每次刷新页面时,卡片应该放置在随机位置,但事实证明它们保持在相同的位置。

这是代码:

var cardsArray = [{
'name': 'ball',
'img': '../img/ball.png',
},
{
'name': 'building',
'img': '../img/building.png',
},
{
'name': 'fan',
'img': '../img/fan.png',
},
{ 
'name': 'fish',
'img': '../img/fish.png',
},
{
'name': 'fishball',
'img': '../img/fishball.png',
},
{
'name': 'flower',
'img': '../img/flower.png',
},
{
'name': 'hill',
'img': '../img/hill.png',
},
{
'name': 'orange',
'img': '../img/orange.png',
},
{
'name': 'boo',
'img': '../img/boo.png',
},
{
'name': 'shoe',
'img': '../img/shoe.png',
},
];



var firstGuess = '';
var secondGuess = '';
var count = 0;
var previousTarget = null;
var delay = 1200;
var moves;
var matched;
var score;

var game = document.getElementById('game');
var grid = document.createElement('section');

const gameGrid = cardsArray
.concat(cardsArray)
.sort(function() {
0.5 - Math.random()
});


function startGame() {
grid.setAttribute('class', 'grid');
game.appendChild(grid);

moves = 0;
score = 0;
matched = 0;
document.getElementById("moves").innerHTML = moves;
document.getElementById("score").innerHTML = score;

gameGrid.forEach(function(item) {
  const {
  name,
  img
} = item;

const card = document.createElement('div');
card.classList.add('card');
card.dataset.name = name;

const front = document.createElement('div');
front.classList.add('front');

const back = document.createElement('div');
back.classList.add('back');
back.style.backgroundImage = `url(${img})`;

grid.appendChild(card);
card.appendChild(front);
card.appendChild(back);
});

}

抱歉,我知道它可能有点长,但我想问题可能出在这里:

const gameGrid = cardsArray
.concat(cardsArray)
.sort(function() {
0.5 - Math.random()
});

我在这里做错了什么吗?我该如何修复它?

最佳答案

您实际上并没有返回要排序的随机值。

const gameGrid = cardsArray
.concat(cardsArray)
.sort(function() {
  return 0.5 - Math.random()
});

关于javascript - 为什么我的卡不是随机放置的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50056301/

相关文章:

javascript - 使用 jQuery-Chosen 时,Fancybox 的内容大小错误?

javascript - JS-财富轮

javascript - 使用 JSLink Sharepoint 过滤数据

javascript - 如何将任何给定表列的值拆分为分隔符处的新行

javascript - 如何检测用户何时离开您的网站(不包括重新加载)

javascript - 滚动和显示时如何为元素设置动画

javascript - 一旦我使图像全宽,宽度就不正确

javascript - 图像处理后更新制服或从片段着色器获取数据

javascript - 更改 Fabric JS 中事件对象的边框颜色和样式

javascript - 仅在 IE 中 onload 时带有 appendChild 的 InvalidCharacterError