Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【JavaScript】落ち物パズル制作 その5【コマ移動を滑らかに】

 どうも!LSSです!!

 あまり大きくは変わっていませんが、落ち物パズルにちょっと手を加えました。

 

 

こんな感じ

 
 

 

f:id:little_strange:20200705152508p:plain

↑こんな風に、「中心を、中心と異なる色で上下左右、揃った色で囲むと得点となって消滅する」落ち物パズルです^^

 

 

変更点

ゲームオーバー時に、モード選択画面に戻れるようにしました 

この変更のほうが大きい…かな?

記事編集中は「HTML編集」と「プレビュー」を切り替えるだけですが、公開記事を見ていると全部リロードしなきゃでした(お手数おかけしましたm(__)m)

 

コマの動きを滑らかにしました

わずかな変更で出来てしまいましたw

これはJavaScriptではなくてCSS部分の修正です。

 

CSS追記部分

.km{
position:absolute;
border-radius:5px;
text-align:center;
border-width:3px;
border-style:outset;
background-image:radial-gradient(circle at 70% 30%,#ffffffc0,transparent);
transition: 0.2s;
}

 

赤文字の一行を追加しただけ! 

transitionについては、

にさらっと書いていますが、このtransitionCSS指定に含んでおくだけで
CSSのプロパティに変更が生じた時に、指定した時間をかけてアニメーションする」
ようになります。

 

…この変更、のちのち災いにならなければいいけど^^;

 

 

あと、消しの演出のためにコードを見直したんですが

どうやら大幅にコードを書き換えないといけないような?そんな気がしてきました^^;

今回の変更はあまり大きいものではありませんが、消し演出実装まで公開を待つのも…と、ここでいったん公開してしまいます!

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^