独学　プログラミング　入門　JavaScript ブロック崩し　解説　第２回

プログラミング学習に必要なこと　イメージする力

必要な部品を考える。

全体的なプログラムソースで１行ずつ何をしているか理解する

ソースコードは第0回　参照

ボールを作ろう。

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;

図解にて説明をおこないます

if→もし？　this.x が　”０”よりも小さい

||→または　this.cが　canvas.width より大きい　場合　this.dx　に　ー１をかけなさい　と命令しています。

今回テスト用のためにコメントアウト

JavaScriptは//を行の先頭に書くことでプログラムと認識されず、コメントとしてプログラムの動きに入りません。

// if(this.y > canvas.height)　の”//”を消すことにより、ボールがYよりも小さくなるとゲームオーバーにすることができます。

ボールの動き

this.x + = this.dx;

this.y + = this.dy;

this.x　this.y 今の場所から　this.dx　と　this.dy を足してボールを動かしていきます。

以上でボールの設定となります。

問い合わせページがありますので、お気軽にお問合せいただけますと幸いです。