ログイン

問題8 丸ばつゲームを作ってみよう!

jQueryAnimationの問題

jQueryAnimation

丸ばつゲームを作ってみよう!

問題

今回はデモのようにクリックしたらターンごとに丸とバツが切り替わるようにしましょう

自分の環境に書くコード

              <div class="box">
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
  <div class="content"></div>
</div>
¥HTML¥
            
              .box{
  display: flex;
  border: 1px solid black;
  width: 306px;
  height: 306px;
  flex-wrap: wrap;
}
.content{
  width: 100px;
  height: 100px;
  border: 1px solid black;
  font-size: 5em;
  line-height: 100px;
  text-align: center;
}
¥CSS¥
            

期待する画面

ログインして解答を見る
コードのアイコン

解答ソースコード

              $(function () {
  var count=1;
  $(".content").click(function () {
    if($(this).text()==""){
      if(count%2!=0){
        $(this).text("○");
      }else{
        $(this).text("×");
      }
      count ++;
    }
  });
});
¥JavaScript¥
            
答えのアイコン

解説

あらかじめ変数を用意しておいて1を代入しておきます。contentがクリックされた時にそのクリックされたcontentに何も記述がないか確かめて、その後countが奇数かどうか判別し、それによって当てはめる文字を変えています。そして最後にcountに++で1を足せば終了です。
完了にする!
LINEの友達追加でお役立ち動画をGET!!