操作はジャンプのみに変更
カーソルキーによる移動方法を覚えましたが、これをやめます。
ジャンプで弾を避けるゲームを作るために
上キーを押すとジャンプするようにします。
<script>
Crafty.init(500,400, document.getElementById('game'));
Crafty.background('#bbbbbb');
Crafty.e('2D, Canvas, Color, Jumper, Gravity')
.attr({x: 50, y: 0, w: 100, h: 100})
.color('#F00')
.jumper(400, ['UP_ARROW', 'W'])
.gravity('Floor');
// 床
Crafty.e('Floor, 2D, Canvas, Color')
.attr({x: 0, y: 350, w: 250, h: 10})
.color('blue');
</script>
実行してみましょう。
上キー、または、wキーでジャンプだけになります。
左右の移動ができなくなったことも確認しましょう。
２箇所変更しました。
Gravity と同様に、機能の登録とパラメータのセット、この２箇所です。
パラメーターの 400 はジャンプの強さで、
その次はジャンプで使うキーを設定してます。
wキーのように普通のキーも使えます。
画像を表示する
四角い絵だけではモチベーションが上がらないので絵を入れます。
「はじめに」のページで alien.png を用意してあるなら
プログラムを変更するだけです。
<script>
Crafty.init(500,400, document.getElementById('game'));
Crafty.background('#bbbbbb');
// エイリアン
Crafty.sprite(69,85,"alien.png",{alien:[0,0]});
Crafty.e('2D, Canvas, alien, Jumper, Gravity')
.attr({x: 50, y: 0, w: 100, h: 100})
.jumper(400, ['UP_ARROW', 'W'])
.gravity('Floor');
// 床
Crafty.e('Floor, 2D, Canvas, Color')
.attr({x: 0, y: 350, w: 250, h: 10})
.color('blue');
</script>
絵が入ると、こんな感じになります。
まずは、画像をスプライトとして登録します。
このとき alien というスプライト名を付けました。
画像ファイルと同じ名前になってますが、別名でも大丈夫です。
そして、これまで赤い色を付けていた四角をスプライト名に変えます。
色のパラメータは必要なくなるので削除します。
Crafty.sprite のパラメーターは、次のようになってます。
画像の幅と高さ、画像のファイル名、スプライト名と絵の基準点です。
表示したいものしかない一枚の絵なら、基準点は 0,0 になります。
色々なものが描かれた絵から、部分的に使いたいときに
使いたい部分の基準点を指定します。
このことについては、別の題材で詳しく説明します。
弾を表示する
次は弾を作ります。
絵はシンプルに「赤くて細長い四角」にします。
下のプログラムから、弾の部分を入力しましょう。
<script>
Crafty.init(500,400, document.getElementById('game'));
Crafty.background('#bbbbbb');
// エイリアン
Crafty.sprite(69,85,"alien.png",{alien:[0,0]});
Crafty.e('2D, Canvas, alien, Jumper, Gravity')
.attr({x: 50, y: 0, w: 100, h: 100})
.jumper(400, ['UP_ARROW', 'W'])
.gravity('Floor');
// 床
Crafty.e('Floor, 2D, Canvas, Color')
.attr({x: 0, y: 350, w: 250, h: 10})
.color('blue');
// 弾
Crafty.e('2D, Canvas, Color')
.attr({x: 200, y: 300, w: 50, h: 10})
.color('red')
.bind('EnterFrame', function() {
this.x -= 5;
if (this.x < -50) this.x = 500;
});
</script>今回は、表示と移動の処理を組み込みました。
実行したとき、赤い四角が右から左へ飛んでいれば成功です。
弾の移動の仕組み
幅 50、高さ 10 の四角に赤い色を付ける、ここまでは大丈夫ですよね。
新しいのは移動させる仕組みです。
this.x -= 5;
これが実行される度、左へ5移動します。
if (this.x < -50) this.x = 500;
これは四角が画面の左側へ消えた時、右側から出るようにしています。
-50 としているのは、四角には 50 の幅があるからです。
(this.x < 0) とすると画面外へ出る前に消えてしまいます。
500 は描画エリアの幅です。
.bind(‘EnterFrame’, function() {
bind はイベント機能を追加するときに使います。
今回は EnterFrame というイベントを追加しました。
EnterFrame は毎フレーム処理させたいときに使います。
処理したいものは function でまとめます。
かっこも含めて、この書き方を覚えてください。