ゲームを通じてプログラミングを学習するという事を
やりたいと考える人ってどのくらいいるんでしょう？
プログラミング学習が難しくて学習するのがしんどく感じている人に、楽しんで学んでほしいと考えているんですが、
普通の人はどうやら、「しんどいことはめんどくさい、めんどくさいことは自分でやるべきことではない」という思考に行き着く人が多いようです。
そんな中、しんどくてもどうしてもプログラミングを学習したいと考える人は、10％にも満たないという調査結果もあるようですが、
そもそもゲームがプログラミング学習ではなくて、ゲームとして面白くないと何の意味もないんだと思うんですよね。
でも、そのゲームのことは置いといて、プログラミング学習したい人だけに読んでもらいたいブログを書きます。
問題
HTMLとCSSで作られた「宝箱ボタン」があります。
このボタンをクリックしたときに、以下のアニメーションをCSSで実装してください。
実装条件
1. ボタンをクリックしたとき、宝箱が開くように、蓋の部分が回転する
2. 蓋の回転は 0.5秒 かけて、なめらかに回転する
3. 蓋は最初は閉じていて、クリックしたら上向きに30度回転する
4. アニメーションはCSSのみで実装し、JavaScriptは使用しない
5. 宝箱の形は div タグで表現する（以下のHTMLを使用）
ソースコード
HTML
<div class="chest">
<div class="lid"></div>
<div class="body"></div>
</div>
CSS
.chest {
position: relative;
width: 200px;
height: 100px;
margin: 50px auto;
}
.lid {
position: absolute;
width: 100%;
height: 40px;
background: brown;
top: 0;
transform-origin: left bottom;
/* トランジションをここに設定する */
}
.body {
position: absolute;
width: 100%;
height: 60px;
background: sienna;
bottom: 0;
}
/* クリック時のスタイル（ヒント） */
.chest.open .lid {
/* 回転の設定をここに */
}
解説（ヒント）
transition
トランジション（transition）は、CSSのプロパティの変化をアニメーションで表現するための機能です。
transform
transform（変形）を対象にするため、.lidに
transition: transform 0.5s ease; を追加します。
rotate
.chest.open .lid に
transform: rotate(-30deg); を指定することで、蓋が上方向に回転します。
技実クラス
.chest に .open クラスを付け外しする必要があるため、実際にはHTMLでクリックイベントを使う場合もありますが、今回は
擬似クラスで「開いている」状態を表現してください。
hover
疑似クラス
:hover を使うと、クリック代わりに「マウスホバーで開く」挙動にすることもできます。
正解例
.lid {
position: absolute;
width: 100%;
height: 40px;
background: brown;
top: 0;
transform-origin: left bottom;
transition: transform 0.5s ease;
}
.chest:hover .lid {
transform: rotate(-30deg);
}
学習ポイント
transition は「何のプロパティを、どの時間で、どのイージングでアニメーションするか」を指定する。
transform-origin は「どの位置を基準に回転するか」を決める重要な設定。
hover を使えば、クリックなしでも「インタラクション」を疑似的に体験できる。
あとがき
画像がなくて、文字だけ見て考えるのが少ししんどいと思った人もいるでしょうが、
仕事でプログラミングをやっている人は、こうした要件定義文章から、完成形をイメージして作っているんですよね。
実際に自分で手を動かして、入力をして、出力をして、表示された時に、かなりの喜びを感じるんですよね。
そんな表示エディタを作ろうと思っていたんですが、今回は問題表示のみにしてみました。
分からなければすぐに正解を見て、それを理解するというのも悪くないので、重要なのは理解できるという思考ですね。
0 件のコメント:
コメントを投稿