Question

我正在尝试使用javascript构建记忆游戏，而且我一直面临着一些问题。我设计了HTML，CSS，现在我正在研究项目的JavaScript部分。我已经编写了一个函数，可以从我存储图片源的数组中将随机生成的图片分配给卡片。我遇到的问题是，每当我执行var arr = ['backend.PNG', 'backend_cloud.PNG', 'html.PNG', 'css.PNG', 'js.PNG', 'jquery.PNG', 'json.PNG', 'ajax.PNG']; var count = 0; function shuffleImages() { for (var i = 0; i < arr.length * 2; i++) { var rand = Math.floor(Math.random() * arr.length); $('#mypictures' + i).attr('src', arr[rand]); console.log(rand); } console.log("DONE"); }功能时，出现的图片并不总是在偶数对中，有时它会奇数，这是有问题的，因为我必须有每张图片的两个对。

问题是：如何确保我指定的图像始终是偶数对，而不是奇数？ 请注意，我是JavaScript的初学者，我现在只编写 2 周的基本代码。

提前致谢。

以下代码的HTML / CSS / JavaScript部分：

＆＃13;

.box {
    padding: 10px;
    margin-left: 10px;
    margin-bottom: 10px;
    border: solid 1px #4F5B5F;
    box-shadow: 1px 1px 1px #4F5B5F;
    border-radius: 20px 20px 20px 20px;
    text-align: center;
    font-size: 100px;
    background-color: #4F5B5F;
    width: 150px;
    height: 150px;
}
.container {
    margin-left: 25%;
    margin-top: 2%;
}
.main_body {
    background: -webkit-linear-gradient(left, blue, white);
    background: -o-linear-gradient(right, blue, white);
    background: -moz-linear-gradient(right, blue, white);
    background: linear-gradient(to right, #0BABE2, #0BD5E2, #0BABE2);
}
.game_title {
    margin-left: 27%;
    font-size: 50px;
    font-family: Arial;
    color: #D5EFF8;
    text-shadow: 2px 2px 2px #4F5B5F;
}
.game_score {
    margin-left: 3%;
    font-size: 10px;
    font-family: Arial;
    color: #D5EFF8;
    text-shadow: 2px 2px 2px #4F5B5F;
}
.score {
    margin-left: 5px;
    padding-left: 5px;
    font-size: 15px;
    color: #D5EFF8;
}
#mypictures0,
#mypictures1,
#mypictures2,
#mypictures3,
#mypictures4,
#mypictures5,
#mypictures6,
#mypictures7,
#mypictures8,
#mypictures9,
#mypictures10,
#mypictures11,
#mypictures12,
#mypictures13,
#mypictures14,
#mypictures15 {
    height: 120px;
    width: 120px;
    padding: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<body class="main_body">
    <div class="game_title"> Memory Game Project
        <span class="game_score"> NUMBER OF TRIES LEFT </span>
        <span class="score"> 0 </span>
    </div>
    <div class='container' style='display: flex'>
        <div class='row'>
            <div class='box' onclick="shuffleImages()">
                <div class='img'><img src="" id="mypictures0">
                </div>
            </div>
            <div class='box' onclick="shuffleImages()">
                <div class='img'><img src="" id="mypictures1">
                </div>
            </div>
            <div class='box' onclick="shuffleImages()">
                <div class='img'><img src="" id="mypictures2">
                </div>
            </div>
            <div class='box' onclick="shuffleImages()">
                <div class='img'><img src="" id="mypictures3">
                </div>
            </div>
        </div>
        <div class='row'>
            <div class='box' onclick="shuffleImages()">
                <div class='img'><img src="" id="mypictures4">
                </div>
            </div>
            <div class='box' onclick="shuffleImages()">
                <div class='img'><img src="" id="mypictures5">
                </div>
            </div>
            <div class='box' onclick="shuffleImages()">
                <div class='img'><img src="" id="mypictures6">
                </div>
            </div>
            <div class='box' onclick="shuffleImages()">
                <div class='img'><img src="" id="mypictures7">
                </div>
            </div>
        </div>
        <div class='row'>
            <div class='box' onclick="shuffleImages()">
                <div class='img'><img src="" id="mypictures8">
                </div>
            </div>
            <div class='box' onclick="shuffleImages()">
                <div class='img'><img src="" id="mypictures9">
                </div>
            </div>
            <div class='box' onclick="shuffleImages()">
                <div class='img'><img src="" id="mypictures10">
                </div>
            </div>
            <div class='box' onclick="shuffleImages()">
                <div class='img'><img src="" id="mypictures11">
                </div>
            </div>
        </div>
        <div class='row'>
            <div class='box' onclick="shuffleImages()">
                <div class='img'><img src="" id="mypictures12">
                </div>
            </div>
            <div class='box' onclick="shuffleImages()">
                <div class='img'><img src="" id="mypictures13">
                </div>
            </div>
            <div class='box' onclick="shuffleImages()">
                <div class='img'><img src="" id="mypictures14">
                </div>
            </div>
            <div class='box' onclick="shuffleImages()">
                <div class='img'><img src="" id="mypictures15">
                </div>
            </div>
        </div>
    </div>
</body>

＆＃13;

app1 : sequenceId = {}
     app2 : sequenceId = {}
     app3 : sequenceId = {}
             app4 : sequenceId = {}
app5 : sequenceId = {}
     app6 : sequenceId = {}
     app7 : sequenceId = {}
             app8 : sequenceId = {}

＆＃13;

Answer 1

您可以先制作一个包含每个图像两次的数组：

var tiles = [];
for (var i = 0; i < arr.length; i++)
    tiles.push(arr[i], arr[i]);

然后根据How to randomize (shuffle) a JavaScript array?

对该数组进行洗牌

JavaScript - 卡片记忆游戏，卡片洗牌功能

1 个答案: