ページを翻訳!Translation 翻譯
簡単!無料プログラミング講座

第8回 ブロックをアニメーションする無料のプログラミングソフト

ゲームのようにブロックをアニメーションします。

第1回~第7回のプログラミング講座で、ブロックの追加や削除は勉強しましたね。今度はブロックを動かしてみましょう。

ではさっそく「Web Blocks」のページを開きましょう。

サンプルコードを表示して
コードをコピー&ペーストしながら挑戦してみてください。
サンプルコード
Web Blocksを開く

ブロックを動かすためのコードを書きます。

  1. Escキー」を押します。
  2. トグル・コードエディタ」(切り替え編集)が表示されます。
  3. SCRIPT」画面に切り替えます。
  4. まず、最初に表示するブロックの場所を指定します。
    const pos = { x: 100, y: 5, z: 100 };
  5. ブロックを動かすことは、新しくブロックを描く必要があります。
    function draw() {
  6. ブロックは動く方向の位置を取得する必要があります。
    const ppos = getPosition();
  7. ブロックがどの方向の軸にどれだけの速さで移動するかを設定します。
    pos.x = pos.x + (ppos.x – pos.x) * 0.01;
    pos.z = pos.z + (ppos.z – pos.z) * 0.01;
  8. 動かすブロックを指定します。
    setBlock(pos.x, pos.y, pos.z,Stone);
  9. 5番から8番までが動く設定ここまでをひとくくりにします。
    }
  10. 5番から8番までの動作を一定時間繰り返します。
    setInterval(draw, 100);
  11. 上記コードをまとめると以下のコードになります。
    const pos = { x: 100, y: 5, z: 100 };
    function draw() {
    const ppos = getPosition();
    pos.x = pos.x + (ppos.x – pos.x) * 0.01;
    pos.z = pos.z + (ppos.z – pos.z) * 0.01;
    setBlock(pos.x, pos.y, pos.z,Stone);
    }
    setInterval(draw, 100);
  12. 上記コードを入力してRUN」ボタンを押してコマンドを実行します。

    キッズくん
    キッズくん
    動いてるというより伸びてるよ?

    ブロックが移動してるというよりも、ブロックが伸びてる感じになりました!?
    実は、ブロックが移動してるように見せるには、動く方向にブロックを増やして、残ったブロックは消していくんです。
    そうすると、動いてるように見えるのです。

  13. では残ったブロックは消すコードを入れてみましょう。
    undo(1);
  14. 修正後のコードはこちら
    const pos = { x: 100, y: 5, z: 100 };
    function draw() {
    undo(1);
    const ppos = getPosition();
    pos.x = pos.x + (ppos.x – pos.x) * 0.01;
    pos.z = pos.z + (ppos.z – pos.z) * 0.01;
    setBlock(pos.x, pos.y, pos.z,Stone);
    }
    setInterval(draw, 100);
キッズくん
キッズくん
あ!動いてる♪
  1. どうですか?ブロックが動いてるように見えますか?
まとめ

ブロックを動かすのは、動かす方向に増やしていって、それと同時にひとつ前のブロックを消していくんだね!




あわせて読みたい