ログイン
問題8

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

アイコン画像

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

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

エディターのアイコンあらかじめエディタに書くコード

                <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を足せば終了です。
ログインして解答を見る
jQueryAnimationを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる