到目前为止,我这样做了吗? (使用Javascript / DOM的记忆游戏)

时间:2015-10-18 16:16:28

标签: 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 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

HTML文件:

 <!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>

到目前为止,这是我在Javascript中的内容。我想知道这一切是否正确?我创建了10个div并使用setAttribute分配了一个列类和一个数据值A,B,C等。

 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");

0 个答案:

没有答案