0

我现在完全迷路了。我上传了我的整个代码。有人可以帮助我吗，我将非常感激！如何将其更改为不使用 jQuery，只使用 javaScript？

 var CARDS_NUM = 20;    // number of cards in total
var ROW = 5;    //number of cards in rows
var cards = [];
var takenCards = [];
var availableCards= true;   //cards which are available to choose
var attemptsNumber = 0;     //number of moves
var pairs= 0;       //number of guessed pairs of cards
var cadsImages = [
'duck.PNG',
'elephant.png',
'monkey.png',
'pig.png',
'pinguin.png',
'cow.png',
'sheep.png',
'zebra.png',
'lion.png',
'horse.png'
 ];

function startGame() {
cards = [];
takenCards = [];
availableCards = true;
attemptsNumber = 0;
pairs = 0;

var board = $('.board').empty();

for (var i=0; i<CARDS_NUM; i++) {
    cards.push(Math.floor(i/2));
}

您建议我有一部分：
for (i=CARDS_NUM-1; i>0; i--) { var swap = Math.floor(Math.random()*i); var tmp = 卡片[i]; 卡[i] = 卡[交换]; 卡[交换] = tmp; }

for (var i = 0; i < CARDS_NUM; i++) {

var tile = document.createElement('card');

tile.className = 'card';
tile.setAttribute('data-cardType', cards[i]);
tile.setAttribute('data-index', i);

var current_width = tile.style.width,
    current_height = tile.style.height;

tile.style.left = 5 + (current_width + 5) * (i % ROW);
tile.style.top = 5 + (current_height + 5) * (Math.floor(i / ROW));

board.appendChild(tile);

}

document.addEventListener('click', function(event) {

var target = event.target || event.srcElement;

cardClick(target);
});

结束它。

function cardClick(element) {
if (availableCards) {
    //if none element is taken
    //or if element's index is not in taken cards
    if (!takenCards[0] || (takenCards[0].data('index') != element.data('index'))) {
        takenCards.push(element);
        element.css({'background-image' :      'url('+cadsImages[element.data('cardType')]+')'})    
    }

    if (takenCards.length == 2) {
        takenCards = false;
        if (takenCards[0].data('cardType') == takenCards[1].data('cardType')) {
            setTimeout('deleteCards()', 500);
        } else {
            setTimeout('resetCards()', 500);
        }

        attemptsNumber++;
        $('.cards').html(attemptsNumber)
    }
}
}

 function deleteCards() {
takenCards[0].fadeOut(function() {
    $(this).remove();
});
takenCards[1].fadeOut(function() {
    $(this).remove();

    pairs++;
    if (pairs >= CARDS_NUM / 2) {
        alert('gameOver!');
    }
    availableCards = true;
    takenCards = new Array();
});
}

function resetCards() {
takenCards[0].css({'background-image':'url(title.png)'})
takenCards[1].css({'background-image':'url(title.png)'})
takenCards = new Array();
availableCards = true;
}

$(document).ready(function() {

$('.start_game').click(function() {
    startGame();
});

 })
4

2 回答 2

1

要创建和附加元素，您将使用：

var tile = document.createElement("div");
tile.className = "card";
board.appendChild(tile);

如果您想使用 jQuery like .data()，您可以创建一个唯一 ID，然后将其用作 JS 对象的键，该对象用作您的存储库（这基本上是 jQuery 的做法）：

// globally accessible (perhaps in a namespace object
function getUniqueId() {
    return getUniqueId.cntr++;
}
getUniqueId.cntr = 0;

// repository for card data
var cardData = {};

function setCardData(obj, key, data) {
    if (!obj.id) {
        obj.id = getUniqueId();
    }
    if (!(obj.id in cardData)) {
        cardData[obj.id] = {};
    }
    cardData[obj.id][key] = data;
}

function getCardData(obj, key) {
    var itemData = cardData[obj.id];
    if (!itemData) {
        return undefined;
    }
    return itemData[key];
}

for (i=0; i<CARDS_NUM; i++) {
    var tile = document.createElement("div");
    tile.className = "card";
    tile.id = "id_" + getUniqueId();
    board.appendChild(tile);
    setCardData(tile, 'cardType', cards[i]);
    setCardData(tile, 'index', i);
}

由于您没有使用该.id属性，这就是我在这里使用的，但如果您希望解决方案完全通用，您也可以使用自定义属性。如果这是一个可重用的库，您还可以将部分实现隐藏在私有范围内，以便只有函数访问可用。这是为了给您一个实现的总体思路，并将这些细节留给您。

您可以使用addEventListener()来注册您的点击事件处理程序。

模拟 jQuery 的 .css、.height、.width 涉及使用getComputedStyle()读取 CSS 属性，然后在对象上设置 style.prop 值。

您可以使用.innerHTMLDOM 属性代替.html().

于 2013-11-14T18:50:44.357 回答
0

使用document.getElementsByClassName('card')然后您可以创建一个“类似数据”的对象：

var cardData = {};

然后将所有内容存储在cardData

等等。

在您的情况下，您可以执行以下操作：

var dataObjects = (function () {
     var data = {};
     return {
         get: function(id, name) {
             if(!(id in data)) {
                 data.id = {};
             }
             if(name in data.id){
                 return data.id[name];
             }
             else {
                 return false;
             }
         },
         set: function(id, name, value) {
             if(!(id in data)) {
                 data.id = {};
             }
             return data.id[name] = value;
         }
     };
})();
function createCard(index) {
   var tile= document.createElement("div");
   tile.id = "tile_" + index;
   tile.className = "card";
   return card;
}

for (i=0; i<CARDS_NUM; i++) {
    var card = createCard(i);
    dataObjects.set(card.id, 'cardType', cards[i]);
    dataObjects.set(card.id, 'index', i);
    board.appendChild(card);
    // ... 
}

然后addEventListener用于事件并.style更改 css。
并.innerHTML更改 HTML 内容

于 2013-11-14T18:38:20.840 回答