あむちょです。

前回に続き、ブラウザー上で動くゲームを作る。

前回、HTML5でキャラクターを動かすとこまでやったので、敵キャラみたいなのを用意して判定もいれてみました。

赤色の目玉をひたすら避けるだけです、クリックでジャンプします。

Like A Star

あとは目的を用意すればゲームっぽくなるはず。

今回はほのかに香る程度にオブジェクト指向っぽく作ってみました。ソースは全部で以下の４個

main.js //主に画面と全体的な流れに関して
player.js //プレイヤーの画像と位置の管理
enemy.js //敵キャラの描画、位置と行動パターン
bullet.js //敵キャラが飛ばす弾に関して

すべてpublicな変数と、やりたい放題やってます。

mainで毎フレームおきに各キャラを更新。

<br />
function update(){</p>
<p>    player.update();</p>
<p>    enemy.update();</p>
<p>}<br />

また描画する際は、

<br />
function draw(){</p>
<p>    if(canvas.getContext){</p>
<p>    	context.clearRect(0,0,width,height);</p>
<p>    	player.draw();</p>
<p>    	enemy.draw();</p>
<p>    }</p>
<p>}<br />

プレイヤーをジャンプさせたい時は、initJumpメソッドを呼ぶだけ

<br />
player.initJump(player.imgHeight,20);<br />

引数は最大到達高さと対空時間にしてあります。フレームレートが30なら第二引数が20で2/3秒になります。

あとは別のゲームでも使い回せるようにすれば、量産が楽になります。

現状だと

長い記述を別のファイルに追いやっただけです。

　[ad]