>  >  > 

jQueryでブロックを拾って蛇のように繋げていくゲーム『ドラゴン&ボール』を作ってみた

jQueryでブロックを拾って蛇のように繋げていくゲーム『ドラゴン&ボール』を作ってみた

こんにちは稲垣です。

タイトル見てなんのゲームかわかる方いるのでしょうか・・?

小学生の頃ガチャガチャで当てたテトリスの小さい携帯ゲーム機に入っていたものなのですが、今回ブログを書くにあたり調べて初めてゲーム名を知りました。

ちなみに『ドラゴン&ボール』で検索しても某有名マンガの事しか出てきませんでした。

目次

デモ

まずは完成イメージです。

ブロックをキーボードの矢印キーで操作して、もう1つのブロックを拾っていきます。

グレーの枠からはみ出たり、繋がった自身の体に当たるとゲームオーバーになります。

html、CSS

html

グレー枠である#stageと最初に操作するブロックとなるdivを置きます。

繋がったブロックの数を表示させるpタグは無くても大丈夫です。

CSS

ほぼステージとブロックの大きさの設定となります。

ステージのサイズはdivのサイズの倍数にするようにしましょう。

動きの実装

それでは動きの部分になります。

矢印キーでブロックを操作する

まずは配置されたブロックをキーボードで操作できるところまで作成します。

必要な変数を用意します。

次にspeedに入っている時間毎に実行される移動用の関数を作成します。

topとleftの取得時には余分な文字列”px”が入っているのでparseInt()で数値に変換してから変数に格納しましょう。

現在yyには60、xxは0が入っているので、上のidou()関数を実行するとdivが60px下へ移動します。

これをsetIntervalで0.2秒毎に繰り返しで実行させます。

このままだとブロックがただ下へ移動するだけなので、矢印キーで移動方向を変更するようにしてみます。

キーボードにはそれぞれkeyCodeという番号が割り当てられているので、keyupイベントで押されたキーの番号を取得して移動方向を設定します。

directionは現在移動している方向を判定するためにキーコードを入れています。

反対方向への移動は無効にさせたいのでifの条件に組み込みました。

キーボードで移動方向を変えられるブロックが出来ました!

続けてこのブロックがグレーの枠からはみ出した時の処理をつけていきます。

ゲームオーバー時の処理をgameover()にまとめておきます。

衝突判定の関数を作成し、ステージからはみ出した時にgameover()関数が実行されるようにしましょう。

このhitcheck()関数がブロック移動毎に実行されるようにしたいので、前に作成していたsetIntervalの中に加えます。

ここまでのコードで動かすと下記デモのようになります。

矢印キーで移動方向を変えられ、ステージからはみ出すとゲームオーバーになる状態です。

ランダムに出現するブロックを習得して繋げていく

次の段階はランダムに出現したブロックに当たると、それを取り込んでどんどん長くなっていく、という部分を作っていこうと思います。

新しく必要になる変数と配列を用意します。

コメント部分に使っている各名称の説明としては、先頭ブロック=初めから配置されているdiv、追加ブロック=ランダムな位置でステージに追加されるdiv、追従ブロック=先頭ブロックと衝突したあと後ろに繋がっているブロック、となります。

それではまずステージ上のランダムな位置に新しいブロックを配置する関数を作成していきます。

乱数の取得は最後に60を掛けて、ブロックのサイズの倍数になるようにしてください。

getPosition()で取得した位置情報を基に、#stageの一番後ろにdivを追加します。

ブロックが繋がっていくとhtmlソースは下記のようになっていきます。

このaddBlock()関数を実行するとステージ上に新しいブロックが追加されます。

先頭のブロックと追加ブロックが衝突した時の処理を先程のhitcheck()関数に加え、そこからaddBlock()関数が実行されるように設定しましょう。

次に衝突した後の追従ブロックの動きを作ります。

追従ブロックは先頭ブロックと同じ位置を辿っていくので、まずは先頭ブロックの位置を記録していく必要があります。

idou()関数を実行する際に、先頭ブロックの位置情報を配列に格納していく処理を加えましょう。

また、この時tateとyokoに入るものは先頭のdivのもののみになるので、先頭のdivから取得するように.eq(0)を追記しておきます。

配列posiの中身は下記のようになります。

配列の先頭に新しく追加されるものが先頭ブロックの位置となり、追従する2番目のブロックの位置は配列の2番目から、3番目のブロックは配列の3番目から…というふうに位置情報を取り出し、各divの位置を変更していきます。

このfollowing()関数もsetIntervalに加え、読み込み時にaddBlock()関数が実行されるようにします。

ここまでのコードで動かすと下記デモのようになります。

ランダムに出現するブロックに当たると連結し、どんどん長くなっていくブロックができました。

繋がったブロックに衝突した時の処理

ここまでできたらほぼ完成ですが、あとは先頭ブロックと繋がっているブロックが衝突した時ゲームオーバーになるように処理を加えます。

hitcheck()関数に下記の処理を加えます。

追従ブロックの数量分、配列posiから位置情報を取り出して先頭ブロックの位置と合致するか比較していきます。

合致していたらgameover()関数を実行させます。

まとめ

以上で完成になりますので、最後にコードをまとめて載せます。

今のままだとただ延々繋げていくだけなので、ブロックの数に応じてステージを設けたりゴールを設定しないとゲーム性が薄いなと思いました。

同じカテゴリー(WEB制作・デザイン)の記事

マグネッツとは?
福岡でWEB制作や中小企業様の集客支援などを行っている会社です。
新着情報配信中!
商用利用OK&無料!総合素材サイト|ソザイング