前提・実現したいこと
WEBゲームを作成中で、途中にじゃんけんゲームで勝てたら次に進めるような仕組みを作りたいです。
じゃんけんゲームは作れました。
参考にしたサイト/https://ict-skillup.com/javascript/1462/
↓html
<style> res { font-size: 3rem; text-align: center; } </style> </head> <body></body> </html> ///<h1>じゃんけん</h1> <h2>あなたの手を選択してください</h2> <table> <tr> <td><img src="img/gu.png" onclick="janken(0)"></td> <td><img src="img/choki.png" onclick="janken(1)"></td> <td><img src="img/pa.png" onclick="janken(2)"></td> </tr> </table> <hr> <table> <tr> <th>あなたの手</th> <th>コンピュータの手</th> </tr> <tr> <td><img src="" id="userImg"></td> <td><img src="" id="pcImg"></td> </tr> <tr> <td colspan="2" id="res"> <p id="result"></p> </td> </tr> </table> <script type="text/javascript" src="janken.js"></script>
↓JavaScript
function janken(user) {
// コンピュータの手の画像ファイル名を配列に保存
let pcJankens = ['gu_rev.png', 'choki_rev.png', 'pa_rev.png'];
// ユーザの手の画像ファイル名を配列に保存 let userJankens = ['gu.png', 'choki.png', 'pa.png']; // コンピュータの手を乱数(0~2)で作成 let pc = Math.floor(Math.random() * 3); // ユーザの手の画像を表示するimgタグをDOMツリーから検索 let userImg = document.getElementById("userImg"); // 検索したimgタグのsrc属性に該当するファイル名を設定 userImg.src = "img/" + userJankens[user]; // コンピュータの手の画像を表示するimgタグをDOMツリーから検索 let pcImg = document.getElementById("pcImg"); // 検索したimgタグのsrc属性に該当するファイル名を設定 pcImg.src = "img/" + pcJankens[pc]; // ユーザから見た勝敗結果(文字列)を2次元配列に保存 let result = [['あいこ', '勝ち', '負け'], ['負け', 'あいこ', '勝ち'], ['勝ち', '負け', 'あいこ']]; // 勝敗結果を document.getElementById("result").textContent = result[user][pc];
発生している問題・エラーメッセージ
勝った時にだけ、「次へ」のような次のページを埋め込んだボタンを表示するようにしたいのですが方法がわかりません。
・https://saruwakakun.com/html-css/reference/hidden-show /表示非表示
・https://aqcg.jp/html_next-page/ /次のページのボタン
試したこと
・表示/非表示で負けた時は非表示、勝ったときは表示にし、その表示でボタンを出そうかと思いそれぞれのやり方を調べ、二次元配列の"勝ち"のところに入れてみましたが、文字じゃないとできないのかうまくいきませんでした。
補足情報(FW/ツールのバージョンなど)
atomを使って作っています。
プログラミングは本当に初心者なのですが、学校のプロジェクトで必要になり、勉強をはじめました。
認識を間違えていたりできないことを言っていたらすみません。
難しいことをせずに妥協することも可能ですが、せっかくの機会なので勉強をしよりクオリティーをあげれるように試行錯誤しています。
わかることがあれば回答ぜひおねがいしたいです。