JavaScript图片数组－记忆棋盘游戏

Question

JavaScript图片数组－记忆棋盘游戏

3

你好，我有一个记忆棋盘游戏的代码。我想知道是否可以更改字母并使用图片代替。我完全不懂JavaScript，正在尝试通过编辑和理解开源代码来学习。任何帮助都将不胜感激！谢谢！

以下是JavaScript代码：

var memory_array = ['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 tiles_flipped = 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(){
    tiles_flipped = 0;
    var output = '';
    memory_array.memory_tile_shuffle();
    for(var i = 0; i < memory_array.length; i++){
        output += '<div id="tile_'+i+'" onclick="memoryFlipTile(this,\''+memory_array[i]+'\')"></div>';
    }
    document.getElementById('memory_board').innerHTML = output;
}

function memoryFlipTile(tile,val){
    if(tile.innerHTML == "" && memory_values.length < 2){
        tile.style.background = '#FFF';
        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]){
                tiles_flipped += 2;
                // Clear both arrays
                memory_values = [];
                memory_tile_ids = [];
                // Check to see if the whole board is cleared
                if(tiles_flipped == memory_array.length){
                    alert("Board cleared... generating new board");
                    document.getElementById('memory_board').innerHTML = "";
                    newBoard();
                }
            } else {
                function flip2Back(){
                    // Flip the 2 tiles back over
                    var tile_1 = document.getElementById(memory_tile_ids[0]);
                    var tile_2 = document.getElementById(memory_tile_ids[1]);
                    tile_1.style.background = 'url(images/logo.jpg) no-repeat';
                    tile_1.innerHTML = "";
                    tile_2.style.background = 'url(images/logo.jpg) no-repeat';
                    tile_2.innerHTML = "";
                    // Clear both arrays
                    memory_values = [];
                    memory_tile_ids = [];
                }
                setTimeout(flip2Back, 700);
            }
        }
    }
}

这是HTML代码。

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>The HTML5 Herald</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="script.js"></script>




</head>

<body>

<div id="memory_board"> </div>
<script> newBoard(); </script>

</body>
</html>

最后，这是CSS代码

div#memory_board{
    background: #CCC;
    border: #999 1px solid;
    width: 800px;
    height: 540px;
    padding: 24px;
    margin: 0px auto;
}

div#memory_board > div{
    background: url(images/logo.jpg) no-repeat;
    border: #000 1px solid;
    width: 71px;
    height: 71px;
    float: left;
    margin: 10px;
    padding: 20px;
    font-size: 64px;
    cursor: pointer;
    text-align:center;
}

- user3740112

你昨天不是创建了一个账户，问如何在页面加载后而无需调用onload来加载脚本吗？ - Muqito

不，我没有。这段代码可以在网上找到，所以可能是任何人。 - user3740112

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gio · Accepted Answer

简单的方法来改变你的代码，让它按照你的意愿去运行 - 而不是

tile.innerHTML = val;

做：

tile.innerHTML = '<img src="' + val + '.png"/>';

如果您在与index.html相同的位置有A.png，B.png等文件，则应该可以正常工作。

如果您想更深入地了解它，我曾经写过一个关于使用html5框架完成此操作的教程（抱歉链接到我们自己的网站）。