--------

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2011-11-02

最低限文化的なゲームができました。

一応ゲームの目的となるルールを作り、
最低限文化的なゲームになりました。
ルールは↓のReadMeにも書いてありますが、
赤いボールをタッチしたままスライドして四角いオブジェクトにあてるとクリアとなります。

ボール飛ばし 2011-11-02 - jsdo.it - share JavaScript, HTML5 and CSS




ある程度いろいろ触っていて標準で実装されている機能の限界にぶつかりました。
まず標準で実装されているSpriteクラスSurfaceクラスでは、
画像のアラインをセンターセンターにできません、言い方を変えるとオブジェクトの座標が画像の中心になるような
設定が存在しません。
ですので、オブジェクトの座標が画像の左上になりますが、
これが今回のようなボールのような球状のものの当たり判定を行う上では都合が悪いです。

ボールの中心からの向きの計算や、衝突の判定の際に毎回中心を求める必要があるため
無駄に計算が複雑になってしまい、可読性がガンガン失われてしまいます。

このゲームでは、途中でこの事態に気づいたので、座標の算出方法を変えることで対処しました。
まず、ボールの当たりの計算の際は、ほかのボールも画像の左上がオブジェクトの位置になっているので
そのまま計算を行います。
ゲームのソースでいうと、uBallクラスmPosXmPosYがオブジェクトの中心の座標であるとして計算を行います。

その後にuBall::update()mPosXmPosYの位置が画像の中心になるように
画像の表示位置をずらすような方法にしてこの問題を回避しました。

ほかにもイベントリスナという、イベントが発生したときに
コールバックされる関数を登録しておくシステムがありますが、
コールバックされる際に渡される引数eのデータが間違った値になっているのか苦しめられました。

引数eはEventクラスのオブジェクトになっていて、フィールドとして
x,y:イベントが発生した座標
localX,localY:イベントが発生したオブジェクトの中心からの相対位置

といったパラメータを持っています。
赤いボールを飛ばすための処理として、
ボールの'touchstart'イベントや'touchmove'イベントをイベントリスナに登録して
画像の位置とlocalX,localYの位置が一定以上離れたらボールを飛ばそうとしましたが
ボールをタッチして'touchstart'が呼ばれた時点で
ボール3~4個分の距離が離れていることになるくらい異様なlocalX,localYの値が入っていました。

おかげさまで危うくタッチした瞬間想定外の方向に飛んでいく運ゲーができてしまうところでした。

次はソースを整理しつつ、もうちょっとゲーム性を持たせます。

スポンサーサイト

theme : JavaScript
genre : コンピュータ

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。