Question

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

格斗游戏程序将具有：

定义角色名称，hp和攻击强度的对象函数
包含名称，hp等信息的对象数组
玩家和敌人（对手）
和连接到html按钮的攻击函数

目前我可以在for循环中使用.html（）和.append（）将我的所有字符信息（对象数组）移植到html文档，同时给它们一个（id =＆＃34;冠军[i] ] .name＆＃34;），以及使用.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，替换之前的字符。

现在我要确认选择。我认为最好的方法是＆＃34;确认 - 选择按钮＆＃34;在html doc。

此时我只有伪代码，并且不确定最佳方向。

    // 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状态，但是敌人状态将再次变为假，因为需要挑选新的对手。我可能会创建一个失败的班级。

由于我需要的信息类型，我无法找到有关关键字的答案，例如＆＃34;锁定选择＆＃34;，＆＃34;字符选择屏幕＆＃34;，＆＃34;选择字符＆＃34;，＆＃34;锁定变量＆＃34;等，而不获得与Flash相关的代码和有关术语字符（字符）的答案的答案。

对于Javascript / jQuery，有一个＆＃34;确认＆＃34;选择功能？

如果我使用（event）参数创建.on（＆＃34; click＆＃34;，function（）{}）：

我会设置（confirmChamp = champions [i]）来存储该选择还是仅存储循环中的最后[i]位置？

我必须给（confirmChamp.attr（＆＃34;数据集＆＃34;））或者这些数据是否已经从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

现在你的冠军被正式锁定而不被重新选择。

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

1 个答案: