मैं नया सीखने वाला फ्रंट-एंड और जावास्क्रिप्ट हूं और मैं इसे प्राप्त करने के लिए अपने दम पर एक गेम "एबेडरी सीखने के लिए" डिजाइन कर रहा हूं।
मेरा इरादा है:
- पहला - गेमबोर्ड में बेतरतीब अक्षरों को बेतरतीब ढंग से डालें।
- दूसरा - उपयोगकर्ता पहले वाले का चयन करता है (उदाहरण के लिए ए)। कोड फर्स्ट सेलेक्टेड लेटर क्लास असाइन करता है
- तीसरा - उपयोगकर्ता जो आता है उसे चुनता है पहले चयनित के बाद (बी, इस मामले में) कोड असाइन करता है दूसरा चयनित पत्र वर्ग
- चौथा - कोड दोनों अक्षरों की तुलना करता है चयनित और और यदि दूसरा पहला चयनित अक्षर के बाद आता है यह सही की गई कक्षा को असाइन करता है।
अब, मैंने इन सभी चरणों को हासिल कर लिया है। लेकिन जब मैं खेलना जारी रखता हूं और अक्षर सी (या कोई अन्य अक्षर) का चयन करता हूं, तो कोड दूसरे और तीसरे चरण के बीच विभाजित नहीं होगा, और यह क्लिक किए गए अक्षर को दोनों वर्ग (प्रथम चयनित पत्र और दूसरा चयनित पत्र) असाइन करता है। यह उसी अक्षर की तुलना करता है और निश्चित रूप से यह गलत है और खेल समाप्त होता है।
पहली बार यह पता चला है कि अक्षर A में 1 है और अक्षर B में 2 है। यह उन दोनों की तुलना करता है और कहता है कि मैं सही हूं क्योंकि 2 = 1+1 है।
बुउट, जब मैं खेलता रहता हूं और मैं अक्षर सी चुनता हूं तो यह सिर्फ दोनों वर्गों को असाइन करता है, वही बाद वाले और बूम की तुलना करता है।
मैंने बहुत सारे संयोजनों की कोशिश की है, और बहुत सारे काम के आसपास। लेकिन मुझे पूरा यकीन है कि मुझे कुछ ऐसा याद आ रहा है जो मैंने अभी तक नहीं सीखा है। मुझे आशा है कि आप लोग मुझे यह सिखा सकते हैं और दूसरों की मदद कर सकते हैं :)
आपके संदर्भ के लिए यह पहेली है: https://jsfiddle.net/alejandroarag/qb91kean/
// First I create the array with the abecedary letters
var abecedary = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
// Second, I use this function to shuffle the letters randomly
function shuffleAbecedary() {
var result;
result = abecedary.sort(function () {
return 0.5 - Math.random();
});
return result;
}
//From this function i got on the internet i get the position on the letters on the alphabet (like 1st, 2nd...)
function alphabetPosition(text) {
var result = "";
for (var i = 0; i < text.length; i++) {
var code = text.toUpperCase().charCodeAt(i)
if (code > 64 && code < 91) result += (code - 64) + " ";
}
return result.slice(0, result.length - 1);
}
// This function prints the letter in a DIV with a class and a dataset value that I will use later on
function lettersPrint() {
var gameBoard = document.querySelector("#gameboard");
var shuffledLetters = shuffleAbecedary();
gameBoard.innerHTML = "";
shuffledLetters.forEach(function (element) {
var letter = document.createElement("div");
letter.innerHTML = "<div class='letter' data-valor= " + element + ">" +
"<div class='letter_content'>" +
element +
"</div>" +
"</div>";
//I put all of them inside the gameBoard ID
gameBoard.appendChild(letter);
});
}
function firstToSelect() {
var firstSelected = document.querySelectorAll(".firstLetterSelected:not(.correct)");
if (firstSelected.length > 0) {
return
}
this.classList.add("selected");
this.classList.add("firstLetterSelected");
document.querySelectorAll(".letter:not(.selected)").forEach(function (element) {
element.addEventListener("click", secondToSelect);
});
}
function secondToSelect() {
var firstSelected = document.querySelectorAll(".firstLetterSelected:not(.correct)");
var secondSelected = document.querySelectorAll(".secondLetterSelected:not(.correct)");
if (secondSelected.length > 0) {
return
}
this.classList.add("selected");
this.classList.add("secondLetterSelected");
var lettersToCompare = firstSelected + secondSelected;
compare(lettersToCompare);
}
function compare(lettersToCompare) {
var firstLetter = document.querySelectorAll(".firstLetterSelected:not(.correct)");
var secondLetter = document.querySelectorAll(".secondLetterSelected:not(.correct)");
var firstLetterToCompare = alphabetPosition(firstLetter[0].dataset.valor);
var secondLetterToCompare = alphabetPosition(secondLetter[0].dataset.valor);
var lettersToCompare = firstLetterToCompare + "," + secondLetterToCompare;
var theLetters = document.querySelectorAll(".selected:not(.correct)")
var letsCompare = lettersToCompare.split(",");
console.log(letsCompare[0]);
console.log(letsCompare[1]);
if (letsCompare[0] == letsCompare[1] - 1) {
console.log("You are right!");
correct(theLetters);
} else {
console.log("Opps you are not right!");
error(theLetters);
}
}
function correct(theLetters) {
theLetters.forEach(function (element) {
element.classList.add("correct");
});
}
function error(theLetters) {
// theLetters.forEach(function (element) {
// element.classList.add("error");
//
// setTimeout(
// function () {
// theLetters.forEach(function (element) {
// element.classList.remove("selected");
// element.classList.remove("error");
// });
// }, 1000);
// });
}
lettersPrint();
document.querySelectorAll(".letter").forEach(function (element) {
element.addEventListener("click", firstToSelect);
});
2 जवाब
मैंने एक नज़र डाली है और मुझे लगता है कि बड़ी समस्या यहाँ है
document.querySelectorAll(".letter:not(.selected)").forEach(function (element) {
element.addEventListener("click", secondToSelect);
});
आप एक दूसरे क्लिक श्रोता को पंजीकृत करते हैं लेकिन इससे कभी छुटकारा नहीं पाते हैं?
सबसे पहले मुझे खेल पसंद है, यह आपके लिए एक अच्छा व्यायाम है।
आपको निश्चित रूप से खेल की कुछ छिपी हुई स्थिति को स्थानांतरित करने की आवश्यकता है HTML और CSS और कोड में, आप बहुत कुछ हासिल करने में सक्षम होंगे थोड़ा सा जिम्मेदारी में फेरबदल के आसपास।
अभी राज्य सीएसएस कक्षाओं में है और आप इसे देखकर पता लगाते हैं कि कौन सा पहला है और कौन सा दूसरा है लेकिन आप इसे जटिल बना रहे हैं; यहाँ मैं क्या करूँगा।
var choices = [] // a list of letters chosen by the player
function isCorrect() {
return choices.length == 2 & choices[0] < choices[1] // this is just for two letters at a time but could be made longer
}
function clear() {
choices = []
}
function select(a) {
if (choices.length == 2) {
return
}
choices.push(a)
}
फिर 2 क्लिक श्रोता को पंजीकृत करने के बजाय मैं 1 पंजीकृत करूंगा जो विकल्पों में मूल्य जोड़ने के लिए select का उपयोग करेगा और फिर isCorrect को यह जानने के लिए कॉल करेगा कि क्या इसे UI और स्थिति को अपडेट करना चाहिए (clear को कॉल करना और बोर्ड से पत्र हटाना) या नहीं।
बोनस: आप जावास्क्रिप्ट में बहुत सारे मूल्यों की तुलना कर सकते हैं और इस मामले में आपको "a" < "b" कोशिश करनी चाहिए और देखें कि क्या होता है!
आपका कोड जो मैं समझ रहा हूं उससे आप अत्यधिक जटिल प्रतीत होते हैं जिसे आप प्राप्त करना चाहते हैं। इससे मुझे लगता है कि मैंने उद्देश्य और खेल तर्क को गलत समझा होगा। यदि ऐसा है, तो निम्नलिखित सरलीकरण उपयुक्त नहीं हो सकता है।
मूल रूप से, मुझे लगता है कि आप अधिकांश कोड में कटौती कर सकते हैं।
// first letter should always be A? If so, we can set lastSelected = (charCode 64).
var lastSelected = String.fromCharCode(64), abecedary = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
// shuffle the letters randomly
function shuffle(arr) {
var result = arr.sort(function () {
return 0.5 - Math.random();
});
return result;
}
function checkOrder(e){
var s = this.textContent;
if ((s.charCodeAt(0) - 1) != lastSelected.charCodeAt(0)){
this.classList.add("err");
} else {
this.classList.remove("err");
this.classList.add("correct");
lastSelected = s;
}
}
shuffle(abecedary);
var l, board = document.getElementById("board");
for(i=0;i<abecedary.length;i++){
l = document.createElement("div");
l.setAttribute("class","letter");
l.textContent = abecedary[i];
l.addEventListener("click",checkOrder,false);
board.appendChild(l);
}#board {
max-width:216px;
}
.letter {
display:inline-block;
width:24px;
line-height:24px;
text-align:center;
}
.err {
background:#f99;
}
.correct {
background:#9f9;
}<div id="board"></div>