[javascript]queryでRPG風の戦闘画面を作ろうとしたらボタンが反応しない
解決したいこと
今queryの習得の一環でRPG風の戦闘画面を作ろうとしていたのですが、何故かスタートのボタンを押しても反応しなくなってしまいました。
見ずらくて申し訳ありませんがどなたかわかる方がいたら助けてください。
該当するソースコード
html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>DHA</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style>
#start {
text-decoration: none;
color: #FFF;
background: #03A9F4;/*色*/
border: solid 1px #0f9ada;/*線色*/
border-radius: 30px;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
text-shadow: 0 1px 0 rgba(0,0,0,0.2);
width: 200px;
height: 100px;
font-size: 50px;
margin-top: 30px;
margin-left: 400px;
display: block;
}
#text {
display: none;
color: white;
font-size: 30px;
margin-top: 30px;
margin-left: 450px;
}
#command1 {
display: none;
width: 100px;
height: 50px;
border: solid 1px #fd2600;
background: #f85f44;
border-radius: 5px;
font-size: 30px;
color: white;
margin-left: 400px;
}
#command2 {
display: none;
width: 100px;
height: 50px;
border: solid 1px #fd2600;
background: #f85f44;
border-radius: 5px;
font-size: 30px;
color: white;
margin-left: 10px;
}
#command3 {
display: none;
width: 100px;
height: 50px;
border: solid 1px #fd2600;
background: #f85f44;
border-radius: 5px;
font-size: 30px;
color: white;
margin-left: 10px;
}
#name {
display: inline-block;
color: black;
font-size: 20px;
margin-left: 370px;
margin-top: 100px;
margin-bottom: 0;
}
#namebox {
display: inline-block;
}
.hp {
color: white;
font-size: 20px;
margin-left: 300px;
}
#gameover {
display: none;
font-size: 100px;
color: green;
margin-left: 200px;
margin-top: 0;
padding-top: 0;
}
</style>
</head>
<body>
<p id="name">名前:</p>
<input id="namebox" type="text" value="">
<button id="start">START</button>
<p id="hpp" class="hp"></p>
<p id="hpe" class="hp"></p>
<p id="text"></p>
<button id="command1">攻撃</button>
<button id="command2">特技</button>
<button id="command3">守り</button>
<script src="rpg.js"></script>
</body>
</html>
javascript
let HPP = 1000;
let HPE = 1000;
let attack_player = 100;
let attack_enemy = 100;
let hearl_player = 100;
let hearl_enemy = 100;
let Player_name = "Player";
let enemy_name = "敵";
let tarn = 0;
let text_count = 1;
let text_val = $("#text").val();
text_val = enemy_name+"が現れた!";
function startclick(){
$("#start").css("display","none");
$("#name").css("display","none");
$("#namebox").css("display","none");
$("#command1").css("display","inline-block");
$("#command2").css("display","inline-block");
$("#command3").css("display","inline-block");
batle();
}
$("#start").click(startclick());
function batle(){
$("body").css("background-color","black");
$("p").css("display","block");
$("#text").html(text_val);
while (HPP > 0 && HPE > 0){
$("#hpp").html(Player_name+"残りHP"+HPP);
$("#hpe").html(enemy_name+"残りHP"+HPE);
setTimeout(function(){
$("#text").html("コマンドを選んでください")
},1000);
//攻撃
$("#command1").click(function(){
if(tarn == 0){
tarn = 1;
$("#text").html(Player_name+"は攻撃した!");
setTimeout(function(){
$("#text").html(attack_player+"のダメージ!");
},1000);
HPE -= attack_player;
}
});
//特技
$("#command2").click(function(){
if(tarn == 0){
if(HPP < 100){
tarn = 1;
$("#text").html(Player_name+"は特技を使った!");
setTimeout(function(){
$("#text").html(hearl_player+"回復した!");
},1000);
HPP += hearl_player;
}
else{
$("#text").html("体力が満タンです!");
continue;
}
}
});
if(tarn == 1){
if(HPE > 200){
$("#text").html(enemy_name+"が攻撃してきた!");
$("text").html(attack_enemy+"のダメージ!");
HPP -= attack_enemy;
tarn = 0;
}
else if(HPE <= 200){
$("#text").html(enemy_name+"は回復した!");
HPE += hearl_enemy;
tarn = 0;
}
}
//終了判定
if(HPP <= 0){
$("#gameover").html("GAMEOVER");
$("#gameover").css("display","block");
}
else if (HPE <= 0){
$("#gameover").html("YOUR WIN");
$("#gameover").css("display","block");
}
}
}
醜いコードですいません
0
