Question

比方说，我正在制作一款狂野的西部游戏，玩家需要捕获非法物品。我有一个菜单，上面有12张随机排列的通缉海报。

这是我的文件的目录：

img / poster-01.png，poster-02.png，...
js / random-grid.js
css / wild-west.css
outlaw-game.html

这是outlaw-game.html中的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Outlaws & Crooks</title>
    <!-- Bootstrap core CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
    <!--
    <link rel="stylesheet" href="../css/code-red.css">
    -->
    <link rel="stylesheet" href="css/wild-west.css">
    <!--JAVASCRIPT-->
    <script src="js/random-grid.js"></script>
</head>

<body onload="posterMenu()">
    <header>
        <div class="overlay"></div>
        <div class="container h-100">
            <div class="d-flex h-100 text-center align-items-center">
                <div class="w-100 text-white">
                    <h1 class="display-3">Outlaws & Crooks</h1>
                    <div class="lead mb-0">
                        Pick an Outlaw...
                    </div>
                </div>
            </div>
        </div>
    </header>

    <section id="search">
        <div class="container-fluid p-0">
            <div class="row no-gutter">
                <div class="braedo-img">
                    <img class="img-fluid black-bg" id="pic-00" alt="Outlaw" />
                </div>
                <div class="braedo-img">
                    <img class="img-fluid black-bg" id="pic-01" alt="Outlaw" />
                </div>
                <div class="braedo-img">
                    <img class="img-fluid black-bg" id="pic-02" alt="Outlaw" />
                </div>
                <div class="braedo-img">
                    <img class="img-fluid black-bg" id="pic-03" alt="Outlaw" />
                </div>
                <div class="braedo-img">
                    <img class="img-fluid black-bg" id="pic-04" alt="Outlaw" />
                </div>
                <div class="braedo-img">
                    <img class="img-fluid black-bg" id="pic-05" alt="Outlaw" />
                </div>
                <div class="braedo-img">
                    <img class="img-fluid black-bg" id="pic-06" alt="Outlaw" />
                </div>
                <div class="braedo-img">
                    <img class="img-fluid black-bg" id="pic-07" alt="Outlaw" />
                </div>
                <div class="braedo-img">
                    <img class="img-fluid black-bg" id="pic-08" alt="Outlaw" />
                </div>
                <div class="braedo-img">
                    <img class="img-fluid black-bg" id="pic-09" alt="Outlaw" />
                </div>
                <div class="braedo-img">
                    <img class="img-fluid black-bg" id="pic-10" alt="Outlaw" />
                </div>
                <div class="braedo-img">
                    <img class="img-fluid black-bg" id="pic-11" alt="Outlaw" />
                </div>
            </div>
        </div>
    </section>

    <!--
        =====================
        External Resources
        =====================
    -->
    <!-- Custom scripts for this template -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>
</body>

</html>

这是来自random-grid.js的代码：

var denomNum = 12;
var fileArray = [];//gets randomized (e.g., 03, 07, 10, etc.).
var idArray = [];// gets formatted to read 00, 01...11
var a;
var i;
var j;
var x;
var text = "";
//loads numbers in order
function loadNumbers(denomNum) {
    for (i = 0; i < denomNum; i++) {
        fileArray[i] = i;
        idArray[i] = i;
    }
}
//triggers function
loadNumbers(maxNum);
//randomizes numbers
function shuffle(a) {
    /*
    CREDIT: Jeff on StackOverflow -- https://stackoverflow.com/users/353278/jeff
    */
    var j, x, i
    for (i = a.length - 1; i > 0; i--) {
        j = Math.floor(Math.random() * (i + 1));
        x = a[i];
        a[i] = a[j];
        //if numbers < 10
        a[j] = x;
    }
    return a;
}
//triggers function
shuffle(fileArray);

//adds 0 in front of numbers less than 10
function formatNumbers(jVal) {
    //format number
    if (jVal < 10) {
        jVal = "0" + jVal;
    } else {
        jVal = jVal;
    }
    return jVal;
}

//has numbers formatted
function readNumbers(newArray, idArray) {
    //alert("[#1] readNumbers(): newArray = " + newArray);
    for (i = 0; i < newArray.length; i++) {
        idArray[i] = formatNumbers(idArray[i]);
        //randomly assorted images
        newArray[i] = formatNumbers(newArray[i]);
    }
    //alert("[#2] readNumbers(): newArray = " + newArray);
}
readNumbers(fileArray);

//newArray is taken from fileArray
function posterMenu(newArray) {
    for (i = 0; i < newArray.length; i++) {
        //eg: idArray[0] = 00 => id="pic-00"
        document.getElementById("pic-" + idArray[i] + "").src = 'img/poster-' + newArray[i] + '.png';
    }
}
posterMenu(fileArray);

我的大多数代码都在工作。但是，我无法根据字符串输入更改文件路径。我该怎么做才能解决此问题？

Answer 1

您可以使用JQuery库并输入如下代码。

var posterImages = $('.poster-img > img');

for(let x = 0; x < posterImages.length; ++x) {
    let fileName = 'img/poster-' + x + '.png';

    posterImages.eq(x).attr('src', fileName);
}

但是，如果要创建游戏，请尝试使用canvas，JQuery和AngularJS而不是图像元素。希望有帮助。

如何在文件路径中使用字符串？

1 个答案: