到目前为止我做得还好吗？（使用Javascript/DOM的内存游戏）_Javascript_Dom

到目前为止我做得还好吗？（使用Javascript/DOM的内存游戏）

javascript dom

到目前为止我做得还好吗？（使用Javascript/DOM的内存游戏）,javascript,dom,Javascript,Dom,以下是第2部分的说明： You will need: Data an array of ten tiles your ten 'tiles' will represent the letter values that will be displayed on each DOM tile. eg. ['A', 'A', 'B', 'B', etc.] Functions start() - shuffle the tiles array - then call m

以下是第2部分的说明：

 You will need:

 Data

  an array of ten tiles
  your ten 'tiles' will represent the letter values that will be displayed on each DOM tile. eg. ['A', 'A', 'B', 'B', etc.]

Functions

 start()
   - shuffle the tiles array
   - then call makeAndDisplayTiles to build and display the gameboard

 makeAndDisplayTiles()

  - this function should empty the container that will hold the gameboard tiles
  - it should clear the text in the info div
  - it should create 10 new game tiles
        -give them the class 'column'
        -give them a 'data-value' attribute from each element of your tiles array. The output for an 'A' tile will look like <div class="column" data-value="A"></div>
        -add the game tiles to the board

  then call a function that will add click events to each tile

如果在数组中正确使用for循环，makeAndDisplayTiles的javascript代码可以从30行减少到三行。此外，还应该创建第二个数组来保存创建的div

 <!DOCTYPE html>
 <html lang="en">
 <head>
<meta charset="UTF-8">
<title>Memory</title>
<link rel="stylesheet" href="style.css">
 </head>
 <body>
  <div id="content">
    <div id="header">
        <div id="title">Memory</div>
    </div>
    <button>Start Game</button>
    <div id="game">
        <!-- append your cards here -->
    </div>
    <div id="info">...</div>
</div>
<script type="text/javascript" src="app.js"></script>
 </body>
 </html>

 window.onload = function() {
 console.log('loaded'); 

 var tenTiles = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];

function shuffle(o) {
for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
  };


var makeAndDisplayTiles = function()

var tileOne = document.createElement("div");
var titleTwo = document.createElement("div");
var titleThree = document.createElement("div");
var titleFour = document.createElement("div");
var titleFive = document.createElement("div");
var titleSix = document.createElement("div");
var titleSeven = document.createElement("div");
var titleEight = document.createElement("div");
var titleNine = document.createElement("div");
var titleTen = document.createElement("div");

titleOne.setAttribute("class", "column");
titleTwo.setAttribute("class", "column");
titleThree.setAttribute("class", "column");
titleFour.setAttribute("class", "column");
titleFive.setAttribute("class", "column");
titleSix.setAttribute("class", "column");
titleSeven.setAttribute("class", "column");
titleEight.setAttribute("class", "column");
titleNine.setAttribute("class", "column");
titleTen.setAttribute("class", "column");

titleOne.setAttribute("data-value", "A");
titleTwo.setAttribute("data-value", "B");
titleThree.setAttribute("data-value", "C");
titleFour.setAttribute("data-value", "D");
titleFive.setAttribute("data-value", "E");
titleSix.setAttribute("data-value", "F");
titleSeven.setAttribute("data-value", "G");
titleEight.setAttribute("data-value", "H");
titleNine.setAttribute("data-value", "I");
titleTen.setAttribute("data-value", "J");