Question

我有一个棋盘游戏，当用户单击其中一个框时，它会翻转并显示字母。我想改为在用户单击时显示图像而不是字母。我有一个array，其中包含所有字母，但是当替换为imageurl时，它仅显示url而不是图像。我将在下面粘贴html,css and js。

js

var memory_array = ["./naruto.gif ", "A", "B", "B", "C", "C", "D", "D"];
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 the title is empty and array = 0  then the rest of code will perform
  if (tile.innerHTML == "" && memory_values.length < 2) {
    //the tile selected will have a white background and the val will be produced
    tile.style.background = "#FFF";
    tile.innerHTML = val;
    //if the  array equal = 0
    if (memory_values.length == 0) {
      //push the val and the title id to their respective arrays
      memory_values.push(val);
      memory_tile_ids.push(tile.id);
      //if the  array equal = 1
    } else if (memory_values.length == 1) {
      //push the val and the title id to their respective arrays
      memory_values.push(val);
      memory_tile_ids.push(tile.id);
      //if memory_values values are the same
      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 {
        // if the two flip tiles aren't of the same value
        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 = "orangered";
          tile_1.innerHTML = "";
          tile_2.style.background = "orangered";
          tile_2.innerHTML = "";
          // Clear both arrays
          memory_values = [];
          memory_tile_ids = [];
        }
        setTimeout(flip2Back, 700);
      }
    }
  }
}

html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="app.js"></script>
</head>
<body>
    <div id="memory_board"> </div>
    <script>
        newBoard();
    </script>
</body>
</html>

CSS

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

    div#memory_board>div {
        background: orangered;
        border: #000 1px solid;
        width: 71px;
        height: 71px;
        float: left;
        margin: 10px;
        padding: 20px;
        font-size: 64px;
        cursor: pointer;
        text-align: center;
    }
</style>

Answer 1

您可以创建新图像并从图像数组中设置src值。还要设置宽度和高度。

var img= new Image();
img.src = val;
img.width="50";
img.height="50";
tile.appendChild(img);

请参见下面的代码段

div#memory_board {
            background: #CCC;
            border: #999 1px solid;
            width: 800px;
            height: 540px;
            padding: 24px;
            margin: 0px auto;
        }

        div#memory_board>div {
            background: orangered;
            border: #000 1px solid;
            width: 71px;
            height: 71px;
            float: left;
            margin: 10px;
            padding: 20px;
            font-size: 64px;
            cursor: pointer;
            text-align: center;
        }

<!DOCTYPE html>
<html>

<head>
</head>

<body>
    <div id="memory_board"> </div>
    <script>
    
var memory_array = ["http://www.clker.com/cliparts/b/6/1/0/124223379411527084631_Train_(1967-1979).svg.med.png", "http://www.clker.com/cliparts/b/6/1/0/124223379411527084631_Train_(1967-1979).svg.med.png", "http://www.clker.com/cliparts/Y/y/T/n/Z/Q/number-2-md.png", "http://www.clker.com/cliparts/Y/y/T/n/Z/Q/number-2-md.png", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQo95Lf_9XG0mf3Tb_lfMDUDXiywIdpiiCb5jUSTyOi5ACJXa3C6w", "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQo95Lf_9XG0mf3Tb_lfMDUDXiywIdpiiCb5jUSTyOi5ACJXa3C6w", "http://www.clker.com/cliparts/K/w/R/r/V/Z/number-4-hi.png", "http://www.clker.com/cliparts/K/w/R/r/V/Z/number-4-hi.png"];
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 the title is empty and array = 0  then the rest of code will perform
  if (tile.innerHTML == "" && memory_values.length < 2) {
    //the tile selected will have a white background and the val will be produced
    tile.style.background = "#FFF";
    var img= new Image();
		img.src = val;
    img.width="50";
    img.height="50";
    tile.appendChild(img);
    //if the  array equal = 0
    if (memory_values.length == 0) {
      //push the val and the title id to their respective arrays
      memory_values.push(val);
      memory_tile_ids.push(tile.id);
      //if the  array equal = 1
    } else if (memory_values.length == 1) {
      //push the val and the title id to their respective arrays
      memory_values.push(val);
      memory_tile_ids.push(tile.id);
      //if memory_values values are the same
      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 {
        // if the two flip tiles aren't of the same value
        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 = "orangered";
          tile_1.innerHTML = "";
          tile_2.style.background = "orangered";
          tile_2.innerHTML = "";
          // Clear both arrays
          memory_values = [];
          memory_tile_ids = [];
        }
        setTimeout(flip2Back, 700);
      }
    }
  }
}

        newBoard();
    </script>

</body>

</html>

您也可以here对其进行测试

Answer 2

您的代码看不到表示URL的字符串和其中包含某些文本的字符串之间的区别。都是字符串。因此，为了显示图像，您需要执行以下操作之一：

创建一个<img>元素，并将该元素src的属性设置为url。
添加一些CSS，以使元素具有带有您拥有的网址的background-image，并相应地设置其样式。

编辑。让我们只做第一种方法，因为它要容易一些。以下将使用正确的来源创建图像：

var imageElement = new Image();
imageElement.src = url;

然后我们可以将其放在元素中，例如，将其放在tile中

tile.appendChild(imageElement);

编辑2 。要将网址数组转换为图片数组，只需执行以下操作即可：

 // your array of urls
 var url_array = ["./naruto.gif","fakepath/pikachu.gif"];
 // this will create a new array with the same length as url_array
 var memory_array = new Array(url_array.length);
 // loop through it to put the images in memory_array
 for(var i = 0; i < memory_array.length; ++i){
     memory_array[i] = new Image();
     memory_array[i].src = url_array[i];
 }
 // now memory_array contains the right images with source set

图片网址显示图片应在的位置

js

html

CSS

2 个答案: