どうも！LSSです！！
昨日の記事、
の続き、「落ちたコマが積みあがる」ようにしてみました。
それに伴い、
「落下判定で下にブロックがあれば、そこで落下停止して積む」判定、
「左右移動時にブロックがあれば移動しない」判定、
「一番上まで積みあがったらゲームオーバー」判定を追加しています。
その他、見ためや列数、コマのサイズなども調整してみました^^
こんな感じ
※「強制停止」はゲーム動作を強制的に終了します。
スターが押せないなどブログの挙動に困った場合に押してください。
コマをカラフルにするだけで
ちょっと楽しげな感じが増したような気がしますね^^
なお、いまだに「パズルとしてのルール」は決めておらず、コマを消す手段は無いのですが、カラフルなコマを見ていると思いつきそうな気がします！
コード
<style><!--
#gamen{
position:relative;
background-color: lightblue;
}
.km{
position:absolute;
border-radius:5px;
text-align:center;
border-width:3px;
border-style:outset;
}
.c1{background-color:yellowgreen;border-color: yellowgreen;}
.c2{background-color:pink;border-color: pink;}
.c3{background-color:aqua;border-color: aqua;}
.c4{background-color:khaki;border-color: khaki;}
.c5{background-color:salmon;border-color: salmon;}
.c6{background-color:wheat;border-color: wheat;}
.c7{background-color:violet;border-color: violet;}
.c8{background-color:beige;border-color: beige;}
.c9{background-color:gold;border-color: gold;}
--></style>
<div id="gamen"> </div>
<div id="g2"> </div>
<p>
<script>// <![CDATA[
wMax=7;//横マス数
hMax=11;//縦マス数
sz=40;//１マスあたりのサイズ
sy=5;//落下速度調節用</br/>
masu=[ ];
for(i=0;i<wMax;i++){
masu[i]=[ ];
for(j=0;j<hMax;j++){
masu[i][j]=0;
}
}
w=wMax*sz;//画面幅
h=hMax*sz;//画面高さ
document.getElementById("gamen").style.width=w+'px';
document.getElementById("gamen").style.height=h+'px';
mx=3;//操作中コマ横位置
my=0;//走査中コマ縦位置
mz=Math.floor(1+Math.random()*9);
gamen_i();
function tmc(){
if((my<h-sz) && (masu[mx][Math.floor(my/sz)+1]==0)){
my+=sz/sy;
kmv();
}else{
masu[mx][Math.floor(my/sz)]=mz;
if(my<sz){
clearInterval(tm);
document.getElementById("gamen").style.backgroundColor='gray';
txt='ゲームオーバー';
g2.innerHTML=txt;
}else{
mx=3;
my=0;
mz=Math.floor(1+Math.random()*9);
gamen_w();
kmv();
}
}
}
function tms(){
tm=setInterval("tmc()",200);
}
function gamen_i(){
txt='<a href="#!" onclick="tms();gamen_w();return false;">ここをクリックしてスタート！</a>';
gamen.innerHTML=txt;
}
function gamen_w(){
txt='';
for(i=0;i<wMax;i++){
for(j=0;j<hMax;j++){
if(masu[i][j]>0){
txt+='<div class="km c'+masu[i][j]+'" style="top:'+j*sz+'px;left:'+i*sz+'px;width:'+sz+'px;height:'+sz+'px;">'+masu[i][j]+'</div>';
}
}
}
txt+='<div id="koma" class="km c'+mz+'" style="top:'+my+'px;left:'+mx*sz+'px;width:'+sz+'px;height:'+sz+'px;">'+mz+'</div>';
gamen.innerHTML=txt;
txt2='';
txt2+='<a href="#!" onmousedown="mx-=(mx>0 && masu[mx-1][Math.ceil(my/sz)]==0?1:0);kmv();">←に移動</a> ';//何故かonclickだと反応が鈍い
txt2+='<a href="#!" onmousedown="mx+=(mx<wMax-1 && masu[mx+1][Math.ceil(my/sz)]==0?1:0);kmv();">→に移動</a> ';//何故かonclickだと反応が鈍い
txt2+='<a href="#!" onmousedown="clearInterval(tm);">強制停止</a> ';
g2.innerHTML=txt2;
}
function kmv(){
document.getElementById('koma').style.top=my+'px';
document.getElementById('koma').style.left=mx*sz+'px';
}
// ]]></script>
※6/30追記 はてな記法により誤って脚注になっていた部分を修正
手を加えた箇所
CSSの指定方法をスマートに
コマのデザインに関するCSSの大部分を、
「タグオプション style="" で書き出していた」
→「ほとんどCSSのclassとして指定（styleタグ内）」
としました。
二次元配列変数の追加
「積みあがったコマ」の位置を保存するのに、
masu[ ][ ]
という二次元配列変数を用意しています。
（コマの無いマスは0、コマが積まれたマスは1～9のコマ種類を表す数値を代入）
負荷軽減策
コマの落下中、
「0.1秒ごとにゲーム画面内を全て描き直し」していたのを、
「0.2秒ごとに移動中のコマだけ位置再設定・コマが積まれた時のみ画面再描画」という形に変更。
負荷軽減を期待していますｗ
（PCで見ている分にはスムーズに動作していたので、スマホで見た場合などにどうなっていることやら…。）
そのために、画面再描画用関数「gamen_w()」と別に、コマ移動用関数「kmv()」を用意しました。
function kmv(){
document.getElementById('koma').style.top=my+'px';
document.getElementById('koma').style.left=mx*sz+'px';
}
というコードで、移動中のコマの位置（style.topとstyle.left）を変数に応じて設定しています。
思いついたルール
こんな風に「あるコマの上下左右が、全て同じ種類でかつ中央と違う」という条件が成立した場合に、その上下左右＋真ん中の５つのコマが消滅するというのはどうだろう？
（花をイメージ）
消滅したコマの上に積まれていたものは落下する、とすると連鎖も狙えますね^^
それが遊べるルールかどうかは、作ってテストプレイしてみないと分かりませんが^^;「右下と左下の角に置かれたコマは永遠に消滅しない」という問題がある事だけは分かりますｗｗｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
