どうも！LSSです！！
完成まで作るのかどうだか未定だった「落ち物パズル」制作ですが、どうもここまで来たら完成させたくなってきた今日この頃ですｗ
第一回
第二回
に続き、今回で３回目となります！
今回もまだ「消し」の部分作成には至っていませんが、それ以外の操作部の追加とデザインの調整を行いました！
今んとこ、こんな感じ
追加変更点
- 画面上部に「NEXT」として、「次のコマ」を予告表示しています。
- 「強制停止」をやめて「一時停止」にしました。再開可能です^^
- 操作部に「↓落とす」を追加しました。
- こないだ、シリーズ外の記事で書いた、光を入れる効果をコマと背景にかけています。
- コマの色に似たものがあったので、見分けやすいように一部の色を変更しています。
コマ色指定部分の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);
}
.c1{background-color:yellowgreen;border-color: yellowgreen;}
.c2{background-color:pink;border-color: pink;}
.c3{background-color:aqua;border-color: aqua;}
.c4{background-color:dodgerblue;border-color: dodgerblue;}
.c5{background-color:salmon;border-color: salmon;}
.c6{background-color:orange;border-color: orange;}
.c7{background-color:violet;border-color: violet;}
.c8{background-color:beige;border-color: beige;}
.c9{background-color:gold;border-color: gold;}
このようなCSSクラスを用意しています。
.c1～.c9までが９種類のコマ色（背景色と枠線色）だけを指定している部分。
その上の.kmがコマの形状などを指定している部分になります。
今回、その.kmのほうに、
background-image:radial-gradient(circle at 70% 30%,#ffffffc0,transparent);
を追記しています。
で書いた、
赤い背景色の方は別途、「background-color: red;」の方で指定しているので、このbackground-colorが何色であっても、光が当たったような演出をかける事ができます。
【CSS】半透明から透明色への円形グラデーション【小ネタ】 - Little Strange Software
の実践例ですね。
この指定だと、各色ごとのグラデを用意しなくても済みます！
落とす、の処理
while(masu[mx][Math.floor(my/sz)+1]==0){
my=Math.floor(my/sz)*sz+sz;
}
こんなコードを書いています。
while(条件){処理}
というループ構文は、
「条件が真である間、処理を繰り返し行う」
というものです。
もう少し詳しく書くと、
「まず条件が判定され、それが真であった場合には処理を実行する。そしてまた条件を判定、それが真であった場合には…」
という繰り返し方になります。
今回のコード自体は、
「『今のコマの下のマスはコマではなく空白である』という条件が成立していた場合、今のコマを１マス分下げ、また条件判定に戻る」
を繰り返すように書いているので、
「下にコマがあるところまで落ちる」
という結果になります。
謝辞
なんと！ですね！
まだ未完成のこのゲームをがっつりと遊んでいただき、さらに記事にして、ルールを考察していただきました^^
シンプルながら、絶妙な設定になっていると思いました。 爆発的に流行したテトリスと似たイメージですが、制作途中なので、今は積んだコマを消す方法はありません。これからルールを決めるとのことです。 でも、それゆえの面白さがあります。「どんなルールにすると楽しめるか？」は、解くのとは違う、創る楽しみを味わえる稀有なパズルです。「これをやらないという選択肢は無いやろ。」そんな台詞が聞こえてきそう。さっそくチャレンジしました。
ＬＳＳさんの落ち物パズルゲームで遊んでみました - tn198403s 高校時代blog
むしろ、未完成ゆえに考察を含めて楽しんでいただいたようです^^
ありがとうございます！！
というのもあり、「消しの実装」より先に他の部分を作った状態で、いったん公開させていただいたのが今回の記事となります！
（本当は、「消しの実装」が手間かかりそうだから先延ばしにしている、というのもあったりします^^;;;;;）
コード全文
そろそろコードも長くなってきたので、折り畳んでおきました^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
