Сейчас я потерян. Я загружаю весь свой код. Кто-то может мне помочь, я буду так благодарен! Как я могу изменить его, чтобы не использовать 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();
});
})
Чтобы создать и добавить элемент, вы должны использовать:
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()
.
cardData[foo]
Используя 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