どうも!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追記!
この記事内で、延々と回り続けるタイマーによるものと思われる「スターが押せない」などのトラブルが発生しているようです^^;
その場合、こちらをクリックしてみてください。
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^