jquery - jquery rpg游戏中未定义的变量
问题描述
我的逻辑显然有很多错误,我对 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>
解决方案
推荐阅读
- angular - 表单提交后使用错误消息作为标签
- c# - (检查(k.ToString() == 1))
- amazon-web-services - 节点未加入 aws eks
- excel - 将行复制到不同的工作表,如果单元格值匹配到另一个工作表
- javascript - 可以在 React Web 应用程序中使用 Vanilla HTML 吗?
- tfs - TFS - 不能并行运行多个版本
- javascript - 带有多个复选框的数据表数据过滤(服务器端)
- regex - 状态消除 DFA 到正则表达式
- excel - 如何用 VBA 中的公式填充动态范围
- c# - 为什么动态调用调度更喜欢双重转换而不是调用对象重载?