Atlas.jsブログ

Webブラウザで動作する、教育用JavaScriptゲームエンジン、Atlas.jsに関する知識共有ブログです。

ブロック崩しを作ってみよう〜ボールを作る〜

こんにちは。moltomheadです。OGSセミナーが終わってから10日ほど経ちました。もうみなさん一流のプログラマになれていますか?まだなれていない?そんな人も大丈夫です。今回から順番にゲーム作りの解説をしていくので、これを見れば簡単にゲームが作成できます。

今回は途中だったブロック崩しのボールを作るコードについて解説していきます。クラスがよくわからないという人のためにも今回はクラスを使わずに作ってみようと思います。
まずボールを表示してみましょう。円を画面に表示するコードは確かこんなかんじでしたね。

var ball = new Shape.Circle("white",20);//円を表示する。指定しているのは円の色と半径

これに自分でボールのスピードや位置を決めていきます。位置を決める機能はAtlas.jsの中にあるのでそれを使いましょう。

ball.setPosition(230,230);//それぞれ円のx軸、y軸の位置を決める
ball.speedX = game.getRand(5,10);//ボールのx軸方向のスピード
ball.speedY = game.getRand(5,10);//ボールのy軸方向のスピード

game.getRand();とは指定した2つの間からランダムで数値をとることができます。今回はこれでボールのスピードをランダムに決めています。
最後に当たり判定を作りましょう。本来は前回説明したwhileなどのループの中に入れたりする必要がありますが、Atlas.jsではenterFrameを使うことで余分な記述を省くことができます。enterFrameと当たり判定はこのように書きます。

ball.enterFrame = function(){//ループ処理
     	ball.x = ball.x + ball.speedX;//ボールのx方向の移動
      	ball.y = ball.y + ball.speedY;//ボールのy方向の移動
      	if(ball.x < 0 || ball.x > 460){//ボールがx方向に画面外から出たら
         	ball.speedX = -ball.speedX;//ボールの方向を反転する
         }
      	if(ball.y < 0 || ball.y > 460){//ボールがy方向に画面外から出たら
         	ball.speedY = -ball.speedY;//ボールの方向を反転する
      	}    
 }

if文の中ではそれぞれボールの移動とボールが画面外に出そうになったかどうかの判定をしています。ボールの移動はループ中にボールの持つスピードをボールの座標に足しているので、ボールが動いているように見えます。当たり判定については、atlas-editorではデフォルトで画面の大きさが500×500なのでボールがその座標を超えないかを見ています。もし超えたとしたら、ボールのスピードにマイナスをつけてやることで、反転しているかのように見せています。ちなみにif文の中にある||は'または'という意味です。
最後にgame.addChild(ball); も忘れずに書きましょう。これをしないとボールが画面に現れません。
完成したコードを下に置いておきます。
ボールが跳ね返るサンプル
できましたか?これらのコードを理解できるようになればあなたも立派なプログラマです。分からない人も今後、継続的に解説を行っていきますので、それをみながらやってみてください。
今回はここまでで。ありがとうございました。


blog comments powered by Disqus

エントリーリスト

カテゴリーリスト

Facebook

Twitter

おすすめの本