jQueryAnimation
Googleでログイン
問題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を足せば終了です。
ログインして解答を見る
#忍者CODE無料問題集で活動を記録しよう
完了にする！
