良い一日;
カードファイトのデッキ構築アプリ作成に挑戦中です!! ヴァンガード
同じカードは 4 枚まで、50 枚までというルールがあります。
デッキにカードを入れるとカウンターが増え、デッキからカードを出すとカウンターが減るようにしようと思っています。ただし、このカウンターは、0 から始まり、特定の名前のカードがデッキに追加されるたびに 1 ずつ増加する個々のカードごとにする必要があります。
新しい Vanguard オブジェクトを簡単に作成できる vanguard オブジェクトとデータベース配列があります。Vanguard オブジェクト ( this.cardLimit = 0) 内に、新しいカードごとにカード制限を最初に 0 に設定する変数があります。
次に、新しいカード[addToDeck]がデッキに追加されると、データベース内のその特定のカードのカウンターがインクリメントされます:database[addToDeck].cardLimit++最大 4 に達するまで、この if ステートメントは機能しません:
if (deck.length < 51 && database[addToDeck].cardLimit < 5)
私の問題は、以下のコードでわかるように、jquery を使用してカードを削除するときに、この値を減らす方法がわからないことです。私がしていることは、div にカード名を動的に追加することです。その div のカード名をクリックすると、div からカードだけでなく、スプライシングによってデッキ配列からもカードが削除されます。
database[addToDeck].cardLimit--jQuery と「this」を使用して、クリックされている部分を具体的に参照しているため、コードで表示されるようにすることはできませんdiv。
私の質問は....これまでに提供したコードの仕様に基づいてカウンターを減らすにはどうすればよいですか? デッキの一部を削除するための Jquery (コード内の最後の jQuery インスタンス) が実行されると、削除された特定のカードのカウンターを減らす必要があります。
さらに説明が必要な場合はお知らせください... 私の問題を簡単な言葉で説明するのは簡単ではありません。読んでくれてありがとう。
JavaScript/Jquery:
function Vanguard(name,grade,skill,power,shield,critical, type, trigger, nation, clan, race, flavor, effect, imageURL){
this.name = name;
this.grade = grade;
this.skill = skill;
this.power = power;
this.shield = shield;
this.critical = critical;
this.type = type;
this.trigger = trigger;
this.nation = nation;
this.clan = clan;
this.race = race;
this.flavor = flavor;
this.effect = effect;
this.imageURL = imageURL;
this.cardLimit = 0;
};
var database = {};
database['asura kaiser'] = new Vanguard("Asura Kaiser", 3, "Twin Drive!!", 11000, "", 1, "Normal Unit", "None", "Star Gate", "Nova Grappler", "Battleroid", "The death blow! Kaiser Buster!", "<br/>[CONT](VC/RC):If you do not have another «Nova Grappler» vanguard or rear-guard, this unit gets [Power] -2000. <br/> [AUTO](VC):When this unit's drive check reveals a grade 3 «Nova Grappler», choose one of your rear-guards, and [Stand] it.", "http://images4.wikia.nocookie.net/__cb20120428001646/cardfight/images/thumb/a/a6/VGE_BT01-008EN.jpg/300px-VGE_BT01-008EN.jpg");
database['king of knights, alfred'] = new Vanguard("King of Knights, Alfred", 3, "Twin Drive!!", 10000, "", 1, "Normal Unit", "None", "United Sanctuary", "Royal Paladin", "Human", "I command you under the name of the King of Knights! Warriors, heed my call!", "<br/>[CONT](VC):Your units cannot boost this unit. <br/> [CONT](VC):During your turn, this unit gets [Power]+2000 for each of your «Royal Paladin» rear-guards. <br/> [ACT](VC/RC):[Counter Blast (3)] Search your deck for up to one grade 2 or less «Royal Paladin», call it to (RC), and shuffle your deck.", "http://images2.wikia.nocookie.net/__cb20121009013434/cardfight/images/thumb/9/95/BT01-001EN_RRR.jpg/300px-BT01-001EN_RRR.jpg");
database['dragonic overlord'] = new Vanguard("Dragonic Overlord", 3, "Twin Drive!!", 11000, "", 1, "Normal Unit", "None", "Dragon Sanctuary", "Kagerou", "Dragon", "<br/>(TD02):Reduce all to ashes, flame of the apocalypse! Eternal Flame! <br/> (BT01):Burn, flame of despair! Eternal Flame!", "<br/>[CONT](VC/RC):If you do not have another «Kagero» vanguard or rear-guard, this unit gets [Power]-2000. <br/> [ACT](VC/RC):[Counter Blast (3)] Until end of turn, this unit gets [Power]+5000, gets '[AUTO](VC/RC):When this unit's attack hits an opponent's rear-guard, [Stand] this unit', and loses 'Twin Drive!!'.", "http://images1.wikia.nocookie.net/__cb20120131161306/cardfight/images/thumb/3/33/TD02-001EN.jpg/300px-TD02-001EN.jpg");
database['ceo amaterasu'] = new Vanguard("CEO Amaterasu", 3, "Twin Drive", 10000, "", 1, "Normal Unit", "None", "United Sanctuary", "Oracle Think Tank", "Human", "<br/>(BT01):Shape my desire. Project it before me, Yata no Kagami! <br/>(EB05):Feel the flow of time. You will create the future.", "<br/>[CONT](VC):During your turn, if the number of cards in your hand is four or greater, this unit gets [Power] +4000. <br/> [AUTO](VC):At the beginning of your main phase, Soul Charge (1), look at the top card of your deck, and put that card on the top or the bottom of your deck. <br/> [AUTO](VC/RC):[Soul Blast (8) & Counter Blast (5)] When this unit's attack hits, you may pay the cost. If you do, draw up to five cards.)", "http://images2.wikia.nocookie.net/__cb20120831173054/cardfight/images/thumb/3/30/BT01-S05EN_SP.jpg/300px-BT01-S05EN_SP.jpg");
database['alfred early'] = new Vanguard("Alfred Early", 3, "Twin Drive!!", 10000, "", 1, "Normal Unit", "None", "United Sanctuary", "Royal Paladin", "Human", "To preserve the smiles of his people, the young King leads knights to battle.", "AUTO: When this unit is placed on Vanguard Circle, choose up to one card named 'Blaster Blade' from your soul, and call it to Rear-guard Circle.", "http://images1.wikia.nocookie.net/__cb20120926194218/cardfight/images/thumb/5/5e/PR-0005EN.jpg/300px-PR-0005EN.jpg");
function printVanguard(p, name){
for (var p in database[name]){
if (p !== 'imageURL'){
document.getElementById('output').innerHTML +=('<b>' + p.charAt(0).toUpperCase() + p.slice(1) + '</b>: ' + database[name][p] + '<br />');
}}
};
$(document).ready(function() {
$('#button').click(function(){
$('#output').html(""); //clear old search
$('#image').html(""); // clear old image
var userInput = $('input[name=searchItem]').val();
userInput = userInput.toLowerCase();
$('#output').append(printVanguard(userInput, userInput));
var image = $('<img>').attr('src', database[userInput].imageURL);
$('#image').append(image);
});
var deck = [];
$('#add').click(function(){
var addToDeck = $('input[name=searchItem]').val();
addToDeck = addToDeck.toLowerCase();
database[addToDeck].cardLimit++;
if (deck.length < 51 && database[addToDeck].cardLimit < 5){
deck.push(addToDeck);
$('#quantity').html("");
$('#save').prepend('<div id="quantity">' + 'Total: ' + deck.length + '</div>');
$('#save').append('<div id="cardList">' + database[deck[deck.length-1]].name + '</div>');
}
});
$(document).on('click','[id^=cardList]', function(){
$(this).remove();
deck.splice(deck[this], 1);
$('#quantity').html("");
$('#save').prepend('<div id="quantity">' + 'Total: ' + deck.length + '</div>');
});
});
HTML コード:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<script type = "text/javascript" src='script.js'>
</script>
<title></title>
</head>
<body>
<form name="searchForm">
<input type="text" id="search" placeholder="Enter Card Name" name="searchItem"/>
</form>
<div id="button">Search!</div>
<div id="add">Add to Deck</div>
<br/>
<div id="output"></div>
<div id="image"></div>
<div id="save"></div>
</body>
</html>
Fiddle: jsfiddle.net/8QR7q Malik 提供
テスト入力: "Alfred Early"、"CEO Amaterasu"、"Dragonic Overlord"、"Asura Kaiser"、または "King of Knights, Alfred"