所以这些是第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");