Question

您好，我有这个代码，这是一个内存棋盘游戏。我想知道是否可以改变字母和放置图像。我是javaScript的新手，我正在尝试通过编辑和理解开源代码来学习..任何帮助都将不胜感激，谢谢！

这是Javscript代码：

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;
}

Answer 1

简单的方法来更改代码以执行您想要的操作 - 而不是

tile.innerHTML = val;

做的：

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

如果你在与index.html相同的位置有A.png，B.png等，它应该可以使用。

如果你想更深入地了解它，我写了一篇tutorial关于用html5框架做这件事的事情（道歉链接到我们自己的网站）

Javascript数组图像 - 内存棋盘游戏

1 个答案: