ドイツ語の学習に役立つ単語ゲームを作成しています。ドイツ語用と英語用の 2 つの配列があります。次に、すべての単語を「言語」と「位置」のクラスを持つリンクとして HTML ページに表示します。これは、間にスペースを入れた数字です。私が望むのは、ドイツ語と英語の単語がペアになったときにフェードアウトすることです。これは私がこれまでに持っているクリックイベントです:
function setup()
{
var check = { language: undefined, position: null };
$("a").on("click", function()
{
var attributes = $(this).attr("class").split(" ");
if (attributes[0] == "german") {
if (check["language"] == "german") {
alert("German word already clicked!");
check["language"] = undefined;
check["position"] = null;
return;
}
if (check["language"] == "english") {
if (check["position"] == attributes[1]) {
$(this).fadeOut(800);
}
}
check["language"] = attributes[0];
check["position"] = attributes[1];
}
if (attributes[0] == "english") {
if (check["language"] == "english") {
alert("English word already clicked!");
check["language"] = undefined;
check["position"] = null;
return;
}
if (check["language"] == "german") {
if (check["position"] == attributes[1]) {
$(this).fadeOut(800);
}
}
check["language"] = attributes[0];
check["position"] = attributes[1];
}
});
}
編集:
function wordlist(obj)
{
for (i = 0; i < obj["wordlist"].length; i ++) {
$("#main .span12").append("<a href=\"#\" class=\"" + obj["language"] + " " + i + "\">" + obj["wordlist"][i] + "</a><br/>");
}
}
完全開示:
私は言葉遊びを終えたので、最終版を提出して他の人が使用できるようにすることで、コミュニティに恩返しをすることにしました。ゲームは、ランダム化された単語リストもサポートしており、その後一緒にマージされます。コードを改善できると思われる場合は、コメントしてください。
$(document).ready(function()
{
(function training()
{
Array.prototype.shuffle = function()
{
var i = this.length, j, temp;
if (i == 0) return this;
while (--i) {
j = Math.floor(Math.random() * (i + 1));
temp = this[i];
this[i] = this[j];
this[j] = temp;
}
return this;
}
var german =
{
language: "german",
wordlist:
[
"der Zusammenhang",
"der Wirt",
"der Kaufmann",
"das Gesetz",
"(sich) klammern (an)",
"der Lastwagen",
"die Akte",
"das Gericht",
"zahlen",
"zählen (bis, auf)"
]
},
english =
{
language: "english",
wordlist:
[
"connection",
"landlord",
"dealer",
"law",
"to attach (to)",
"truck",
"file",
"dish",
"to pay",
"to count (to, on)"
]
};
function generate(obj)
{
var array = [];
for (i = 0; i < obj["wordlist"].length; i ++) {
array.push("<a href=\"#\" class=\"" + obj["language"] + " " + i + "\">" + obj["wordlist"][i] + "</a><br/>");
}
return array;
}
var german = generate(german);
var english = generate(english);
var wordlist = german.concat(english);
wordlist.shuffle();
$("#main .span12").append(wordlist);
(function setup()
{
var check = { language: undefined, position: null };
$("a").on("click", function()
{
var attributes = $(this).attr("class").split(" ");
if (attributes[0] == "german") {
if (check["language"] == "german") {
alert(" German word clicked!\nPlease click an English word.");
check["language"] = undefined;
check["position"] = null;
return;
}
if (check["language"] == "english") {
if (check["position"] == attributes[1]) {
$("." + attributes[1]).fadeOut(800);
$("." + attributes[1]).remove();
}
}
check["language"] = attributes[0];
check["position"] = attributes[1];
}
if (attributes[0] == "english") {
if (check["language"] == "english") {
alert(" English word clicked!\nPlease click a German word.");
check["language"] = undefined;
check["position"] = null;
return;
}
if (check["language"] == "german") {
if (check["position"] == attributes[1]) {
$("." + attributes[1]).fadeOut(800);
$("." + attributes[1]).remove();
}
}
check["language"] = attributes[0];
check["position"] = attributes[1];
}
});
(function loop()
{
var timer = setTimeout(loop, 1000);
var links = $("a");
if (links.length == 0) {
clearTimeout(timer);
alert("Well done!");
return;
}
})();
})();
})();
});