【初心者向け】Javascript/jQueryで問題を作成してみた(Part2)

※本サイトはアフィリエイトリンクを掲載しています。
javascript
2023.07.24

こんにちは。Web系エンジニアのカズです。

今回は初心者の方に向けて、Javascript/jQueryで問題を作成してみました。

皆さんがロジックを考える練習にもなりますし、簡単なポートフォリオを作成する参考にもなるかもしれません。

 

本記事の内容

・Javascript/jQueryで問題を出題

・参考ソース

・ポイント

・簡単なポートフォリオを作成するための活用方法

 

Javascript/jQueryで問題を出題

問題：添付画像のような簡単なゲームを作成してください。
スタートボタンを押したらボタンが出現。
仕様
・はずれをクリックしたら、ゲームオーバーのアラートを出してゲームをスタート前に戻す。
・はずれ以外をクリックしたら、セーフのアラートを出す。

 

参考ソース


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <title>Game</title>
</head>
<body>
  <p>どれか1つの番号が、はずれです。はずれをクリックしたらゲームオーバー！</p>
  <div class="btnWrap" id="btnWrap"></div>
  <br/>
  <div class="start"><button id="start" class="startBtn">スタート</button></div>
</body>
<style>
  .btnWrap {
    display : flex;
    width : 700px;
    margin : auto;
}
  .btn {
    justify-content : space-between;
    margin-top : 10px;
    margin-left : 10px;
    text-align : center;
    width : 10%;
    color: #fff;
    background-color: #eb6100;
    border-radius: 100vh;
    cursor : pointer;
    display:block;
    margin :auto;
  }
  .btn:hover {
    color: #fff;
    background: #f56500;
  }
  .start {
    width : 700px;
    margin :auto;
  }
  .startBtn {
    display:block;
    margin :auto;
  }
  p {
    text-align : center;
  }
</style>
<script>
  $(function() {
    $("#start").click(function() {
      $(this).prop("disabled", true);
      let btnLength = 5;
      //1～5のランダム整数を生成する。
      let randomNumber = Math.floor( Math.random() * btnLength ) + 1;
      for (let i=1; i<=btnLength; i++) {
        $("#btnWrap").append("<button class='btn' id=btn_"+i+">"+i+"</button>");
        $("#btn_"+i).click(function() {
          let selectNumber = Number($(this).attr('id').replace("btn_", ""));
          if (randomNumber === selectNumber) {
            let result = window.confirm('アウト！！\nゲームオーバーです。リセットします。');
            if (result) {
              location.reload(true);
            }
          } else {
            $(this).css("background-color",'gray').prop("disabled", true);
            alert('セーフ!!');
          }
      });
    }
  });
});
</script>
</html>

 

動作イメージ

どれか1つの番号が、はずれです。はずれをクリックしたらゲームオーバー！

 

 

 

ポイント

・生成したランダム整数とクリックした番号が一致するかどうかを条件とする

・一度押したボタンは押せないようにする

 

簡単なポートフォリオを作成するための活用方法

例えば上記のロジックを使えば、○髭危機一髪みたいなゲームも作成できます。
見た目はCSSで頑張る必要はありますが。
今回は当たりだった場合とはずれだった場合はアラートを出す形にしていますが、もっとCSSやjQueryのアニメーションを改良すればゲームっぽくできると思います。
〇髭の画像に代わるものを用意して、はずれだったらjQueryのアニメーションを使用して〇髭の画像をスライドさせて飛んだように見せることも可能です。

独学が難しい場合

現場レベルで通用するエンジニアを目指していて、プログラミングスクールを検討している方はRUNTEQがオススメです。

コメント