jQuery RPG游戏中未定义的变量

Question

这里我的逻辑中显然有很多错误，我对jQuery相当陌生，所以任何帮助将不胜感激。

但是，从现在的我的立即错误开始，这里$（“＃char1”）。character [chosenChampion] = true;是未定义的，我尝试使用“ this”关键字尝试了多种不同方式 到目前为止，这是我的HTML，JavaScript（使用jQuery）和CSS

$(document).ready(function () {
    //globals
    var chosenEnemy = false;
    var chosenChampion = false;
    var attack = 0;
    var health = 0;
    var counterAttack = 0;

    // run when chosing and attacking champions
    var fightStats = {
        getAttributes: function (char1, char2) {
            char1.attack = char1.attack + 10;
            char1.health = char1.health;

            char2.health = char2.health;
            char2.counterAttack = char2.getCounterAttack + 10;
        },
        levelUp: function (char1, char2) {
                char.attack += 10;
                char.health += 100;
        },
    };

    // game characters and starting attributes
    var characters = {
        obiWan: {
            health: 150,
            attack: 20,
            counterAttack: 15,
            chosenChampion: false,
            chosenEnemy: false,
        },// best in game
        lukeSkywalker: {
            health: 100,
            attack: 30,
            counterAttack: 20,
            chosenChampion: false,
            chosenEnemy: false,
        },
        darthVader: {
            health: 100,
            attack: 25,
            counterAttack: 20,
            chosenChampion: false,
            chosenEnemy: false,
        },
        emporerPalpatine: {
            health: 90,
            attack: 25,
            counterAttack: 20,
            chosenChampion: false,
            chosenEnemy: false,
        }, // worst in game
    };

    // run on battle button
    function battle(char1, char2) {
        char1.health -= char2.counterAttack
        char2.health -= char1.attack
    };

    // $("#char1").attr(character.obiWan); not sure if i can use something like this
    // for the data-type attribute i added to the img tag or if something like this would work better.


    // character selection and movement between sections
    if (chosenChampion === false) {
        $("#char1").on("click", function () {
            $("#char2").appendTo($("#enemies-sect1"));
            $("#char3").appendTo($("#enemies-sect2"));
            $("#char4").appendTo($("#enemies-sect3"));
            $("#char1").data('chosenChampion', true);
        });
        $("#char2").on("click", function () {
            $("#char1").appendTo($("#enemies-sect1"));
            $("#char3").appendTo($("#enemies-sect2"));
            $("#char4").appendTo($("#enemies-sect3"));
            $("#char2").data('chosenChampion', true);
        });
        $("#char3").on("click", function () {
            $("#char1").appendTo($("#enemies-sect1"));
            $("#char2").appendTo($("#enemies-sect2"));
            $("#char4").appendTo($("#enemies-sect3"));
            $("#char3").data('chosenChampion', true);
        });
        $("#char4").on("click", function () {
            $("#char1").appendTo($("#enemies-sect1"));
            $("#char2").appendTo($("#enemies-sect2"));
            $("#char3").appendTo($("#enemies-sect3"));
            $("#char4").data('chosenChampion', true);
        });
    };

    if (chosenEnemy === false && chosenChampion === false) {
        $("#ememies-sect1").on("click", function () {
            $("#enemies-sect1").appendTo($("#defender-obj"));
            $("#defender-obj").data("chosenEnemy", true);
        });
        $("#ememies-sect2").on("click", function () {
            $("#enemies-sect2").appendTo($("#defender-obj"));
            $("#defender-obj").data("chosenEnemy", true);
        });
        $("#ememies-sect3").on("click", function () {
            $("#enemies-sect3").appendTo($("#defender-obj"));
            $("#defender-obj").data("chosenEnemy", true);
        });
    };

    function Game(char1, char2) {
        fightStats.getAttributes(char1, char2);
        battle(char1, char2);
        if (char2.health < 0) {
            fightStats.levelUp(char1, char2);
        };

    };

    $("#fight-button").on("click", function () {
        game($("#yourchar"), $("#defenderobj"))
    });


});

/* typeography */
h1 {
    color: teal;
}

/* display settings */
.row {
    display: block;
}

.fight-button {
    padding: 5px 30px;
}

/* image styling */
img {
    margin: 0 20px;
}

.row-enemies div {
    display: inline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
    <!-- metas for phones -->
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Star Wars Game</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="assets/css/main.css" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>

<body>

    <div class="row">
        <h1>Star Wars RPG!</h1>
    </div>

    <div class="row" id="your-char">
        <img id="char1" src="assets/Images/obi-wan-kenobi.png" data-name="obiWan">
        <img id="char2" src="assets/Images/luke-skywalker.jpg" data-name="lukeSkywalker">
        <img id="char3" src="assets/Images/darth-vader.jpg" data-name="darthVader">
        <img id="char4" src="assets/Images/palpatine.jpg" data-name="emporerPalpatine">
        <h3>Your Character</h3>
    </div>

    <div class="row-enemies">
        <div id="enemies-sect1"></div>
        <div id="enemies-sect2"></div>
        <div id="enemies-sect3"></div>
    </div>

    <div class="row">
        <h3>Enemies Available to Attack</h3>
        <h3>Fight Section</h3>
        <button class="fight-button" txt-content="Fight Section">Fight!</button>
        <h3>Defender</h3>
    </div>

    <div class="row">
        <div id="defender-obj"></div>
        <h2 class="battle-log"></h2>
    </div>

    <!-- link JavaScript file -->
    <script src="assets/JavaScript/main.js"></script>
</body>

</html>