在 Javascript/JQuery 中锁定/确认选择

Question

我正在使用 Javascript 和 jQuery 创建一个基于文本的格斗游戏程序。我的 jQuery 知识目前是基本的（大约需要 1-2 周）。

格斗游戏程序将有：

• 定义角色名称、生命值和攻击强度的对象函数
• 一个对象数组，其中存储了名称、hp 等信息。
• 一个玩家和一个敌人（对手）
• 和一个连接到 html 按钮的攻击函数

目前，我可以在 for 循环内使用 .html() 和 .append() 将我的所有字符信息（对象数组）移植到 html 文档中，同时给它们一个 (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 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 会再次变为 false，因为需要选择新的对手。我可能会创建一个失败的班级。

由于我需要的信息类型，我无法找到有关“锁定选择”、“字符选择屏幕”、“选择字符”、“锁定变量”等关键字的答案而没有得到答案Flash 相关代码和有关术语字符（char）的答案。

对于 Javascript/jQuery 是否有“确认”选择功能？

如果我创建一个带有（事件）参数的 .on("click", function(){})：

我是设置 (confirmChamp = Champions[i]) 来存储该选择还是只存储循环中的最后一个 [i] 位置？

我必须提供 (confirmChamp.attr("data-sets")) 还是这些数据已经从 champAvailable 存储？

最后，设置 (confirmChamp.onclick = null) 是否会阻止选项在以后被重新选择？

如果有必要，我也有 html 代码。

Answer 1

经过大量研究，我找到了所提出问题的答案。您需要的是创建一个布尔值的 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

现在你的英雄已被正式锁定，无法重新选择。