Little Strange Software

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

【JavaScript】落ち物パズルの落下部分だけ作ってみた話

 どうも!LSSです!!

 

  先日、いつもお世話になっている さじさん(id:conasaji)が、こんな記事を書かれていました。

 

さじさんプログラミングデビュー!

これはめでたい!!^^

 

と、早速コメントしたのですが、
「そういえば…LSSは落ち物パズルのプログラムを書いた事なかったな」
と、気づいたのですw

 

 全部作るのは大変そうですが、ちょっとさわりだけやってみようかな?と挑戦してみました。

 

 

こんな感じです

 

 
 

とりあえず、下限まで行ったら、しれっと最初に戻る仕様。

「まずは落ちる部分だけ」と思いましたが、ちょっと寂しかったので、左右移動もできるようにしてみました。

 

 

コード

<style><!--
#gamen{
position:relative;
background-color: lightblue;
}
--></style>
<div id="gamen"> </div>
<div id="g2"> </div>
<p>
<script>// <![CDATA[
wMax=10;//横マス数
hMax=15;//縦マス数
sz=30;//1マスあたりのサイズ
sy=5;//落下速度調節用</br/>
w=wMax*sz;//画面幅
h=hMax*sz;//画面高さ

document.getElementById("gamen").style.width=w+'px';
document.getElementById("gamen").style.height=h+'px';

mx=5;//操作中コマ横位置
my=0;//走査中コマ縦位置

tm=setInterval("tmc()",100);

function tmc(){
if(my<h-sz){
my+=sz/sy;
}else{
mx=5;
my=0;
}
gamen_w();
}

function gamen_w(){
txt='';
txt+='<div style="position:absolute;top:'+my+'px;left:'+mx*sz+'px;width:'+sz+'px;height:'+sz+'px;border-radius:5px;background-color:yellowgreen;text-align:center;border:3px outset yellowgreen;">1</div>';
gamen.innerHTML=txt;

txt2='';
txt2+='<a href="#!" onmousedown="mx-=(mx>0?1:0);">←に移動</a> ';//何故かonclickだと反応が鈍い
txt2+='<a href="#!" onmousedown="mx+=(mx<wMax-1?1:0);">→に移動</a> '+mx+' '+my;//何故かonclickだと反応が鈍い
g2.innerHTML=txt2;
}
// ]]></script>

  

 

落ちるだけならそう難しくない

ざっくり概要を書くと、

tm=setInterval("tmc()",100);

で、0.1秒毎にtmc()という関数を呼び出しています。

 

tmc()では

if(my<h-sz)

というif文によって、my(移動中のコマの縦位置)が、h(画面高さ)-sz(1コマのサイズ)より小さい場合のみ、
my+=sz/sy;
を実行し、my(移動中のコマの縦位置)がちょこっと下に移動する、という処理を行っています。

 

if判定が成立しなかった場合(コマが着地した場合という事になります)は、elseの方に書いた、

mx=5;
my=0;

が実行されます。

これが「しれっと最初に戻る」処理ですw

 

 

その後に呼び出している、
function gamen_w(){
は、画面再描画処理を行う関数です。

 

左右に動かす処理

onmousedown="mx-=(mx>0?1:0);"

なぜか、onclickだと正常に動作しなかった(タイマー処理と相性が悪い?)ので、
onmousedown(マウスボタンを押し下げた時に発生するイベント)で書いています。

 

mx-=数値;

と書くと、「mxの値が数値で指定した分、減少する」のですが、その数値となる部分に
(mx>0?1:0)
というのを書いています。

 

これは二項演算子というもので、if文でやるような事をごく簡潔な書き方で実現する書き方です^^

条件?結果A:結果B

というように?:を区切りとして用い、
『条件』が成立した場合は『結果A』の値を返し、成立しなかった場合は『結果B』の値を返す

という、例えるならExcelのIIf関数によく似たモノになります。 
(例えがマニアックで、例えとして役に立ってるか不明www)

 

if文より簡潔、ただし「値を返す」事しかできない、のが「二項演算子」、という理解でOKかと思います。

 

 

落ち物パズル、プログラムの入門に向いているのかな?

「落とす」「左右に移動する」程度であれば、それほど悩まずに書く事ができました^^

 

 これが「今までに落下させたブロック」に重ならないように、って判定まで考えだすと…ちょっと面倒になりそうな気もしますが…
セガさんが「入門向け」として選択した
という事は、やってみるとそれほど大変でもないのかも?

 

 教材の内容も気になりますが、とりあえずちょっと我流で続けてみようかな^^

 

 なお、現時点で

パズルルールはまだ一切考えていませんwww

 

 

※6/29追記!
 この記事内で、延々と回り続けるタイマーによるものと思われる「スターが押せない」などのトラブルが発生しているようです^^;
 その場合、こちらをクリックしてみてください。

 

 

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

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