Question

我有问题，我需要把newBoard（）;在我的JavaScript文件中。我把它放在哪里，我怎么称呼它？还有一个问题：有人可以在这段代码中写一个对象吗？

非常感谢你的帮助！

这是HTML文件。

<html>
<head>
    <link href="memory.css" rel="stylesheet">
    <script src="memory.js"></script>
</head>
    <body>
        <h1>Koen's Heineken Memory Game:</h1>
        <div id="memory_board"></div>
        <script>newBoard();</script>
    </body>
</html>

这是.js文件。

var memory_content = ['A','A','B','B','C','C','D','D','E','E','F','F','G','G','H','H','I','I','J','J','K','K','L','L'];
var memory_values = [];
var memory_tile_ids = [];
var cards_turned = 0;

Array.prototype.memory_tile_shuffle = function(){
    var i = this.length, j, temp;
    while(--i > 0){
        j = Math.floor(Math.random() * (i+1));
        temp = this[j];
        this[j] = this[i];
        this[i] = temp;
    }
}

function newBoard(){
    cards_turned = 0;
    var output = '';
    // De array wordt geschud.
    memory_content.memory_tile_shuffle();

    for(var i = 0; i < memory_content.length; i++){
        output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_content[i]+'\')"></div>';
    }

    document.getElementById('memory_board').innerHTML = output;
}

function memoryFlipTile(tile,val){
    // Kijkt of de kaart nog niet is omgedraaid.
    if(tile.innerHTML == "" && memory_values.length < 2){
        // De achtergrond van de kaart.
        tile.style.background = 'white';
        tile.innerHTML = val;

        if(memory_values.length == 0){
            memory_values.push(val);
            memory_tile_ids.push(tile.id);
        } else if(memory_values.length == 1){
            memory_values.push(val);
            memory_tile_ids.push(tile.id);
            if(memory_values[0] == memory_values[1]){
                cards_turned += 2;

                memory_values = [];
                memory_tile_ids = [];

                if(cards_turned == memory_content.length){
                    alert("Goed gedaan! Ik zet een nieuw spel voor je klaar.");
                    document.getElementById('memory_board').innerHTML = "";
                    newBoard();
                }
            } else {
                function flip2Back(){

                    var tile_1 = document.getElementById(memory_tile_ids[0]);
                    var tile_2 = document.getElementById(memory_tile_ids[1]);
                    tile_1.style.background = 'url(heineken.jpg) no-repeat';
                    tile_1.style.backgroundSize = '111px 111px';
                    tile_1.innerHTML = "";
                    tile_2.style.background = 'url(heineken.jpg) no-repeat';
                    tile_2.style.backgroundSize = '111px 111px';
                    tile_2.innerHTML = "";

                    memory_values = [];
                    memory_tile_ids = [];
                }
(flip2Back, 750);
            }
        }
    }
}

Answer 1

您可以在加载时调用该函数： -

<body onload="newBoard()">
    <h1>Koen's Heineken Memory Game:</h1>
    <div id="memory_board"></div>
 </body>

Answer 2

这样做，

改变你的记忆。像这样，

(function(){
      // add all your methods and declaration here

      newBoard();
})();

并改变你的html，

<html>
<head>
    <link href="memory.css" rel="stylesheet">
</head>
<body>
    <h1>Koen's Heineken Memory Game:</h1>
    <div id="memory_board"></div>
    <script src="memory.js"></script>
</body>
</html>

我在哪里放置<script> newBoard（）; </script>？

2 个答案: