ブロックの情報を変数に保持しよう

現在、ブロックはゲーム画面の真ん中に固定して描画されているだけですね。
次回以降のレッスンでは、下の動画のように、ブロックを動かしていきたいと思います。

ブロックを動かす

そこで、今回のレッスンでは、まずブロックの情報を変数に保持しておきましょう。
ブロックを動かすということは、ブロックの座標を動かすということです。
このように、値を変化させる場合は、値を変数に保持することで実現します。

それではコードを書いていきましょう。
今回は、ブロックの X座標, Y座標, 横幅, 縦幅をすべてオブジェクトにまとめて、変数に保持します。

オブジェクトについて知りたい方は、以下の入門コースの解説をご覧ください。
オブジェクトとは - 入門コース

まずはオンライエディタの一番上の行で、変数 block を宣言してください。

let block;

次に、setup 関数内の一番下で、変数 block にオブジェクトを代入してください。

block = { x: 200, y: 200, w: 30, h: 30 };

これで、変数 block にオブジェクトを代入しました。
オブジェクトには

X座標:200 Y座標:200 横幅:30 縦幅:30

という情報を格納しています。

最後に、draw 関数でブロックを描画していたコードを次のコードに変更してください。

image(blockImage, block.x, block.y, block.w, block.h);

数値を直接指定する代わりに、変数 block に保持していた情報を取得して指定するようにしました。

コードの変更は以上になります。
無事にコードを書けたでしょうか?
よくわからなくなってしまった方は、このページ下部にコード全文を載せていますので、確認してみてください。

それではゲームを起動してみましょう。

ブロック

前回のレッスンと同様に、ゲーム画面の真ん中にブロック画像が描画されていると思います。
次回以降のレッスンでは、ブロックを動かしていきましょう。

オンライン相談

つまづいたときは

フライトゲーム
レッスン一覧

はじめに

コース一覧

ゲーム開発コース

数学コース

アートコース

入門コース

このサイトについて


© 2022 ルートアイ All rights reserved.