Javascript/JQuery에서 선택 항목 잠금/확인

Question

Javascript 및 jQuery를 사용하여 텍스트 기반 싸우는 게임 프로그램을 만들고 있습니다. 내 jQuery 지식은 현재 기본 (약 1-2 주 가치)입니다.

싸움 게임 프로그램을 갖

• 목적 함수 HP, 캐릭터 이름을 정의하고, 공격 강도 등
• 이름, HP의 저장된 정보와 객체 어레이
• 을 플레이어와 적 (상대)
• 및

현재 HTML 버튼에 내가 할 수있는 연결 공격 기능 .html() 및 .append()를 사용하여 for 루프 내부에서 (id = "champion [i] .name")를 제공하면서 모든 내 문자 정보 (객체 배열) .attr()를 사용하여 그들의 hp, 공격력 등의 세트를 얻습니다.

for (var i = 0; i < champions.length; i++) {         // the forLoop is to get all the characters in the object array on the screen. 
    var champAvailable = $("<button>");          // this variable is equal to a button that will soon be ported to the HTML page 
     champAvailable.addClass("champ styling hoverAnimation");    // creating what the character buttons looks like 
     champAvailable.attr("id", champions[i].name);       // adding the data for names 
     champAvailable.attr("data-hp", champions[i].hitPoints);     // adding the data for hp 
     champAvailable.attr("data-attPower", champions[i].attPower);   // adding the data for attack power 
     champAvailable.attr("data-icon", champions[i].icon);     // adding the data for icons 
     champAvailable.html(champions[i].icon);         // porting the image to the html 
     $("#champAvailable").append(champAvailable);        // checking the html for the id "champBtn" and connecting my champBtn variable to it 
                       // .append() will attach each character in my array sequentially. 
}        

선택 화면에서 캐릭터를 클릭하면 플레이어 div 섹션에 복제됩니다.

$(".champ").on("click", function(event){          // adding the champ to the selected champ section 
     var champSelection = $("<div>");          // deciding that I will make the section a new Div 
     champSelection.append($(this).clone().addClass("clone").removeClass("hoverAnimation")); // "this" is equal to the champBtn, which contains the stored data of my champions 
                            // .clone makes a new icon in the champion div 
                            // .addClass lets me adjust the clone to look different from the other champion icons 
                            // removeClass removes the hover animation from the clone 
                            // without .clone() the image will delete its original position and move it to the champ selection space 



     $("#playerChamp").html(champSelection);             // this ports the cloned image to the html 

}); 

임의의 문자를 클릭 할 수 있으며 그 문자를 문자 선택 div에 복제하여 이전에 있었던 문자를 교체합니다.

이제 선택을 확인하고 싶습니다. 가장 좋은 방법은 html 문서의 "confirm-select button"입니다.

이 시점에서 나는 단지 의사 코드를 가지고 있으며이 작업을 수행하는 데 가장 좋은 방향을 확신 할 수 없습니다.

// Confirm Champ Pseudo Code: selecting the player and the opponent 

    // (var playerState = false) as default 
    // When the "confirm-selection Champion button" is clicked: 
    // (var player = champions[i]) and (var champState = true) 
    // -- I'm hoping that the data-sets carry over here and that you don't get every data-set of the champions[i]. Just the one you selected -- // 
    // when playerState is true: 
    // champions[i] in the champion select section becomes onclick: Null 
    // end player selection part. 

    // Champion selection then moves to: Opponent selection 
    // (var enemyState = false) as default 
    // when "confirm-selection Opponent button" is clicked: 
    // (var enemy = champions[i]) and (var enemyState = true) 
    // champions[i] in the champion select section becomes onclick: Null 
    // end Opponent selection part 

는 상대가 그들의 onclick을 유지할 필요가 패배하는 경우 등이 몇 가지 문제가 있습니다 : 널 (null) 상태를하지만, 새로운 상대가 포착 될 필요로 enemyState 다시 거짓이 될 것입니다. 나는 패배 클래스를 만들 수 있습니다.

필요한 정보 유형 때문에 "잠금 선택", "캐릭터 선택 화면", "캐릭터 선택", "변수 잠금"등과 같은 키워드에 대한 대답을 찾을 수 없습니다. 플래시 관련 코드와 용어 character (char)에 대한 답변.

Javascript/jQuery의 경우 "확인"선택 기능이 있습니까? I는 CSTE 연구진을 만들면

(이벤트) 인수 (} {) 기능 ("클릭")

난 (confirmChamp = 챔피언 [I]가) 그 선택을 저장하도록 설정하거나 의지 싶은 루프의 마지막 [i] 위치 만 저장 하시겠습니까?

반드시 (confirmChamp.attr ("데이터 세트")를 제공해야합니까?) 또는 champAvailable에서 이미 저장된이 데이터입니까?

마지막으로 (confirmChamp.onclick = null) 마지막으로 옵션을 나중에 다시 선택하지 않겠습니까?

필요한 경우 html 코드도 있습니다.

Answer 1

많은 연구 끝에 제안 된 질문에 대한 답변을 발견했습니다. boolean의 if 문을 작성하면됩니다.

var $champLocked = false; 

$('.champ').on('click', function(event){ // when the button champ is clicked           

    if ($champLocked === false) { // check if champLocked is false. It is, because we said it is at the top. Now go to the next step. 

     var champSelection = $('<div>'); // create your div         
     var champInfo = $(this); // give it its data           

     var data = { 
      name: champInfo.attr('id'), 
      hp: champInfo.data('hp'), 
      attack: champInfo.data('attack')  
     }; // fun data .. End of function 1 

_

$('#confirmChamp').on('click', function() { // new button to click 

    if(!champLocked) { // same as above, (if champ === false) just written shorter. 

     champLocked = true; // we then set it to true 
     $(this).prop('onclick',null).off('click'); // we set the onclick button of "this", which is, I believe #confirmChamp, to the property of an onlclick with a null value, and then attached an .off() method to the click. 
     }); 
    } // end second functin 

이제 챔피언이 공식적으로 재 선택에서 잠겨 있습니다.