JavaScript を使ってpkゲームを作ろうとしています。今はキックというボタンを押したら確率

締切済

質問者：フロッピー
質問日時：2021/07/01 10:00
回答数：2件

JavaScript を使ってpkゲームを作ろうとしています。

今はキックというボタンを押したら確率でゴールが入り、勝負が決まるようにできました。

次はプレイヤーがコースを選んで、pc側は右左中央をランダムで決めて、勝負を進めるようにしようと思ってます。

今困っていることは、
・なぜかボタンを設置してもボタンの機能を果たさない
・もっとシンプルなコードにできないのか

などです。
画像とソースコードを載せておきますので、詳しい方、是非アドバイスいただけるとありがたいです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PK Game</title>
<script type="text/javascript">

//ボタンとテーブルの参照を代入する変数
var k_btn, r_tbl;
var k_l_btn, k_c_btn, k_r_btn;

//シュートコースの参照する変数
var y_crs, p_crs;

//勝負回数カウンタを初期化
var g_cnt=0;

//対戦者の点を初期化
var y_pnt=0;
var p_pnt=0;

//ページ表示時に実行するメソッドの定義
window.onload = function(){
//ボタンとテーブルの参照を取得＆代入
k_btn=document.getElementById("kick_btn");
k_l_btn=document.getElementById("kick_left_btn");
k_c_btn=document.getElementById("kick_center_btn");
k_r_btn=document.getElementById("kick_right_btn");
r_tbl=document.getElementById("record_tbl");
//ボタンクリック時に関数 onYouKick を実行
k_btn.onclick=onYouKick;

};

//関数 onYouKick の定義
function onYouKick(){
//勝負回数カウンタに1を加算
g_cnt++;
//15％の確率で y_pnt に1を加算し「あなた」の列に ○ を表示
if(Math.random()<0.40){
y_pnt++;
r_tbl.rows[g_cnt].cells[0].innerHTML="○";
//それ以外は「あなた」の列に × を表示
}else{
r_tbl.rows[g_cnt].cells[0].innerHTML="×";
}
//ボタンを非アクティブにする
k_btn.disabled = true;
//1000ミリ秒(1秒)後に関数 onPCKick を実行
setTimeout("onPCKick()", 1000);
}

//関数 onPCKick の定義
function onPCKick(){
//15％の確率で p_pnt に1を加算し「ＰＣ」の列に ○ を表示
if(Math.random()<0.35){
p_pnt++;
r_tbl.rows[g_cnt].cells[1].innerHTML="○";
//それ以外は「ＰＣ」の列に × を表示
}else{
r_tbl.rows[g_cnt].cells[1].innerHTML="×";
}
//100ミリ秒後(0.1秒後)に関数 pkJudge を実行
setTimeout("pkJudge()", 100);
}

//関数 pkJudge の定義
function pkJudge(){
//ボタンをアクティブにする
k_btn.disabled = false;
//勝敗判定
if(g_cnt<5){
if(y_pnt>(5-g_cnt)+p_pnt){
//関数 onYouWin を実行してこの関数を終了
onYouWin();
return;
}else if((5-g_cnt)+y_pnt<p_pnt){
//関数 onPCWin を実行してこの関数を終了
onPCWin();
return;
}
}else if(g_cnt>=5){ //勝負回数が5以上になれば
if(y_pnt>p_pnt){
//関数 onYouWin を実行してこの関数を終了
onYouWin();
return;
}else if(y_pnt<p_pnt){
//関数 onPCWin を実行してこの関数を終了
onPCWin();
return;
}
//行を追加
var row=r_tbl.insertRow(-1);
row.insertCell(-1).innerHTML="";
row.insertCell(-1).innerHTML="";
}
}

//「あなた」が勝ったときの関数 onYouWin の定義
function onYouWin(){
r_tbl.rows[0].cells[0].style.backgroundColor="#F00";
alert("「あなた」の勝ちです！");
k_btn.value="リプレイ";
k_btn.onclick = function(){location.reload()};
}

//「ＰＣ」が勝ったときの関数 onPCWin の定義
function onPCWin(){
r_tbl.rows[0].cells[1].style.backgroundColor="#F00";
alert("「ＰＣ」の勝ちです！");
k_btn.value="リプレイ";
k_btn.onclick = function(){location.reload()};
}

</script>
</head>
<body>

<input type="button" id="kick_btn" value="キック">
<hr>
<div align="center">
<input type="botton" id="kick_left_btn" value="左にキック">
<input type="botton" id="kick_center_btn" value="中央にキック">
<input type="botton" id="kick_right_btn" value="右にキック">
</div>
<br>
<table id="record_tbl" border="1" width="300" align="center">
<tr>
<td width="150" style="background-color:#9ff;">あなた</td>
<td width="150" style="background-color:#9ff;">ＰＣ</td>
</tr>
<script type="text/javascript" >
for(var i=1; i<=5; i++){
document.write("<tr><td></td><td></td></tr>");
}
</script>
</table>

</body>
</html>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： Ogre7077
回答日時：2021/07/01 18:09

誤字には気を付けましょう

botton → button
ちなみに、ボタンを使うなら <button> 要素がお勧めです
https://developer.mozilla.org/ja/docs/Web/HTML/E …

JS はオブジェクト指向言語ですので、
ゲーム関連のデータは纏めてオブジェクト化すべきです
例)
var game = { total:5, round:0, score:[0,0], course:[0,0] };

オブジェクトにメソッド関数を追加することで、
データ操作処理に名前を付けることができます
例)
game.decideCourse = function(i,v){ this.course[i] = v };

getElementById() 等はよく使うので、短く書けるようにしましょう
例)
function GEI(id){ return document.getElementById(id) }
GEI('kick_btn').value = "リプレイ";

if 構文が重複する書き方はよろしくないので、条件を整理しましょう
例)
var expect = (g_cnt<5)? 5-g_cnt: 0;
var youWin = y_pnt > p_pnt + expect;
var comWin = p_pnt > y_pnt + expect;
if (youWin) { ... }
else if (comWin) { ... }

- 1
- 件

通報する

No.1

回答者： sukitaro
回答日時：2021/07/01 10:47

>・なぜかボタンを設置してもボタンの機能を果たさない

inputのtypeが、
buttonとなるべきところ、
bottonになっているからだと思います。
単純なタイプミスですね。

>・もっとシンプルなコードにできないのか

これはたぶん、いろんな意見があると思いますが、
とりあえず、最後に出てくる、
あなたが勝ったときの関数onYouWin()と、
PCが勝ったときの関数onPCWin()は、
やっていることがほぼ同じなので、引数を使って、

function onWin(winner){
if(winner === "you"){
//あなたが勝ったときの処理
}else {
//PCが勝ったときの処理
}
//両方に共通する処理
}

みたいにまとめられると思います。

呼び出すときは、
あなたが勝ったときは、onWin("you");
PCが勝ったときは、onWin("pc");
などとすれば良いです。
（文字列のyou,pcよりも、
　true , falseや、
　0 , 1の方が良いかもしれませんが）

もっときれいな方法はあると思いますが、
とりあえず、わたしが気が付いたのはそのくらいです。