LoginSignup
0
0

More than 1 year has passed since last update.

数当てゲームを改良して、正解、不正解でブラウザ上に表示する文言を変えました

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>数当てゲーム</title>
<style>
    h1 {
        color:plum;
        font-size:100px;
    }
    h2 {
        color:#4f7911;
        font-size:50px;
    }
    body {
        background-color:whitesmoke;
    }
</style>
</head>
<body id = "test">
<header>
<div class="container">
<h1>数当てゲーム</h1>
<h2>数を当ててみよう</h2>
</div><!-- /.container -->
</header>
<main>
<div class="container">
<section>

</section>
</div><!-- /.container -->
</main>
<footer>
<div class="container">
</div><!-- /.container -->
</footer>
<script>
'use strict';
let message;
let count = 1;
let flag = 0;
//乱数を発生させる。0~49まで数字がランダムに表示されるので1を足す。
const number = Math.floor(Math.random() * 50) + 1;
//数当てゲームは5回挑戦できるようにする。
while (count <=5){ 
    const answer = parseInt(window.prompt('数当てゲーム。1〜50の数字を入力してね。5回まで挑戦できます'));
    window.alert(count + "回目です。")
    //正解、数が小さい、数が大きい、1から50以外の数字が入った時の条件式
    if(answer === number) {
        message = 'あたり!';
        window.prompt(count + "回目で正解しました。おめでとうございます!");
        document.querySelector("h1").innerHTML = "<h1>数当てゲーム、正解です!</h1>";
        document.querySelector("h2").innerHTML = "<h2>おめでとうございます!</h2>";
        flag = 1;
        break;
    } else if((answer < number) && (answer >= 1)) {
        message = '残念でした!もっと大きい';
    } else if((answer > number) && (answer <=50)) {
        message = '残念でした!もっと小さい';
    } else {
        message = '1〜50の数字を入力してね。';
    }
    //入力した数字に応じてメッセージを出力する。
    window.alert(message);
    //
    count = count + 1;
}
//3回挑戦して不正解だったら正解をアラートで表示し、HTMLに表示するメッセージを変更する。
if (flag === 0){
    window.alert("正解は" + number + "です");
    document.querySelector("h1").innerHTML = "<h1>残念でした!</h1>";
    document.querySelector("h2").innerHTML = "<h2>また挑戦してください!</h2>";

}         
</script>
</body>
</html>
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0