Как переписать код без использования jquery?

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

Есть часть, которую вы мне предложили:
для (i = CARDS_NUM-1; i> 0; i--) {var swap = Math.floor(Math.random() * i); var tmp = cards[i]; var tmp = cards [i]; cards[i] = cards[swap]; карты [i] = карты [swap]; cards[swap] = tmp; карты [swap] = 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 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
    Java не является Javascript, будьте осторожны при добавлении тегов в свой вопрос.
Теги:

2 ответа

1

Чтобы создать и добавить элемент, вы должны использовать:

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

Если вы хотите использовать jQuery, например .data(), вы можете создать уникальный идентификатор, а затем использовать его как ключ в объект 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 для объекта.


Вы можете использовать свойство .innerHTML DOM вместо .html().

  • 0
    Я бы приватизировал все данные, чтобы вы не могли просто сделать cardData[foo]
0

Используя document.getElementsByClassName('card') а затем вы можете создать объект типа "data-like":

var cardData = {};

А затем сохраните все в cardData

Etcetera.


В вашем случае вы можете сделать что-то вроде этого:

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

  • 1
    По-видимому, он создает элементы в своем коде, а не выбирает существующие по классам.
  • 0
    @GuilhermeSehn Аааа, правда.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню