今queryの習得の一環でRPG風の戦闘画面を作ろうとしていたのですが、何故かスタートのボタンを押しても反応しなくなってしまいました。
見ずらくて申し訳ありませんがどなたかわかる方がいたら助けてください。
<!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>
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");
}
}
}
醜いコードですいません
startclickを呼び出せるように関数を定義してください。function startclick() {
// ...
}
// もしくは
var startclick = function () {
// ...
};
window.onload = startclick;
jQueryObject.click()の引数には関数を入れてください。- $("#start").click(startclick());
// ()をつけると関数がその場で実行されて返値が入ります
+ $("#start").click(startclick);