質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

1回答

855閲覧

WEBゲームの中にじゃんけんにかったら次に進める要素を入れたい

here25

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2021/09/11 14:42

前提・実現したいこと

WEBゲームを作成中で、途中にじゃんけんゲームで勝てたら次に進めるような仕組みを作りたいです。
じゃんけんゲームは作れました。
参考にしたサイト/https://ict-skillup.com/javascript/1462/

↓html

<style> res { font-size: 3rem; text-align: center; } </style> </head> <body>
<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>
</body> </html> ///

↓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を使って作っています。
プログラミングは本当に初心者なのですが、学校のプロジェクトで必要になり、勉強をはじめました。
認識を間違えていたりできないことを言っていたらすみません。
難しいことをせずに妥協することも可能ですが、せっかくの機会なので勉強をしよりクオリティーをあげれるように試行錯誤しています。
わかることがあれば回答ぜひおねがいしたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

BeatStar

2021/09/12 02:10

とりあえず、『仕様を決めることが先』かと。 プログラミングってのは行き合ったりばったりなものではなく、ロジックでやるものです。 それに、『意味がよくわかりません』。 『次に進む』とはなんでしょうか。 たとえば、別ページに移動するのか、 一つのページで何度も行うのか、 別ウィンドウで開いていくのか とかでも違いますよ。 それに、『いつ終了するのか』もわかりません。 質問者さんがユーザーだとして、 『いつ終わるのかわからないし、セーブすらできないゲーム』をやりたいですか? しかも全部同じ内容。 閉じるボタンとかもない。 あまりにも曖昧なため、回答しづらいです。
BeatStar

2021/09/12 02:16

あと、『うまくいかない』というのはやめてください。 うまくいかないというのは『主観』です。 『どのようにうまくいかないのか』を書くべきです。
guest

回答1

0

jQuery ライブラリを活用するのがよいでしょう。

QiitaサイトのjQueryで要素の表示・非表示を切り替える方法についての記事が詳しいです。

投稿2021/09/11 15:36

seastar3

総合スコア2287

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問