プログラミング学習に必要なこと イメージする力
ゲーム画面を見てみて、必要なパーツがおもい
うかぶでしょうか？
プログラムを描くと考えた場合次のように見えています。
必要な部品を考える。
- 画面枠
- ボール
- ボールを跳ね返すボード
- ボールが当たると消えるブロック
- 部品の位置
- ゲームの動き
全体的なプログラムソースで１行ずつ何をしているか理解する
ボールを作ろう。
const ball = {
【const】を使って定数（中身が変えられない名前付け）を設定します。 『ball』と名付け
ましょう。 「｛」ここからと囲んでスタートです。
x: null,
y: null,
width: 5,
height: 5,
speed: 4,
dx: null,
dy: null,
プログラム内では 絵を描くときx座標、y座標を教えてあげる必要があります。
【x】この場合はx座標を「からっぽ」にせっていします。
【y】この場合はy座標を「からっぽ」にせっていします。
【width】横幅を5ピクセル
【height】高さを5ピクセル
【speed】速さを4ピクセル
【dx】,【dy】というのは、ボールが壁にぶつかったときの跳ね返りを設定します
最初の値は 『null』「からっぽ」を入れておきます。
ボールの動き（処理）解説
30行目から解説していきます。
update : funciton() {
}
どのような処理を行うかのスタートです。
ctx.fillRect(this.x, this.y, this.width, this.height);
ctxというキャンバス（canvas)要素で fillRect(x, y, width, height) 点を描きます。
this.x はnull this.yはnull this.width は ５ this.heightは ５と設定しました。
ctx.fill();
ctx.fill() ボールが一個動いているように、みえるのですが実はボールは移動するたびに、点を描画していて動いているように見えます。その際重なる（跳ね返った際）ボールが消えないように、この宣言をします。
if(this.x < 0 || this.x > canvas.width) this.dx *= -1;
if(this.y < 0 || this.y > canvas.height) this.dy *= -1;
図解にて説明をおこないます
まず、図の中で右方向をX、上方向をYとなっています。
動いているボールの縦をheight,幅をwidthとしています。
if→もし？ this.x が ”０”よりも小さい
||→または this.cが canvas.width より大きい 場合 this.dx に ー１をかけなさい と命令しています。
もしも、左青い線よりもボールがでる（※Ｘ座標ー１になる）とー１をかけて反転させます。
そして convasの幅に設定した数値より大きくなる（紫の線よりはみ出ると）おなじくー１をかけて反転させます。
Ｙとthis.heightも同様の処理です。
今回テスト用のためにコメントアウト
JavaScriptは//を行の先頭に書くことでプログラムと認識されず、コメントとしてプログラムの動きに入りません。
// if(this.y > canvas.height) の”//”を消すことにより、ボールがYよりも小さくなるとゲームオーバーにすることができます。
ボールの動き
this.x + = this.dx;
this.y + = this.dy;
this.x this.y 今の場所から this.dx と this.dy を足してボールを動かしていきます。
以上でボールの設定となります。
問い合わせページがありますので、お気軽にお問合せいただけますと幸いです。
コメント