初級 動き Y座標

Y座標を「○」にする動きを作ってみよう

Scratch の「Y座標を ○ にする」ブロックと同じイメージで、ステージの中でスプライトのたての位置を数字でコントロールしてみます

このページで学べること

  • • Scratch の「Y座標を ○ にする」ブロックの考え方
  • • JavaScript で setSpriteY(数字) という関数を作る方法
  • • ステージからはみ出さないようにする仕組み

このページでやること

Scratch には「Y座標を ○ にする」というブロックがあります。 このブロックは、ステージの中でスプライトのたての位置を 「ここ！」と数字で指定するためのものです。

このレッスンでは、JavaScript で同じ考え方の setSpriteY(数字) という関数を作って、 ステージの中でスプライトのたての位置を決められるようにします。 まだ左右には動かしません。たての位置だけに集中して練習しましょう。

主人公スプライト

この黒いわくの中が「ステージ」。スプライトのたての位置を変えてみよう。

Scratch ではどう見える？

Scratch の「動き」ブロックをひらいてみると、 「y座標を 0 にする」「y座標を 100 にする」 といったブロックがあります。

Scratchの画面

クリックで拡大

このブロックの特徴：

  • 0 … まんなか：ステージの縦方向の中央に移動
  • プラスの数 … 上側：ステージの上側に移動
  • マイナスの数 … 下側：ステージの下側に移動

ブロックの白い四角のところ（○の場所）に入れる数字を変えるだけで、 スプライトのスタート位置をカンタンに変えられます。

JavaScript では、こんなふうに考えるよ

JavaScript では、同じことをするために変数と関数を使います。

Scratch ブロック

「Y座標を ○ にする」

↓

数字でたての位置を指定

Scratch では、ブロックに数字を入れるだけでたての位置が変わります。

JavaScript 
// 変数で「いまの Y座標」を覚えておく
let spriteY = 0;

// 関数で Y座標 を変える
setSpriteY(100); // 上に移動
setSpriteY(-100); // 下に移動

JavaScript では、spriteY という変数と setSpriteY() という関数で同じことをします。

ステージからはみ出さない仕組み

ステージからはみ出さないようにするために、最小値・最大値を設定しています。

1
MIN_Y = -140

これより下には行けない（下のはし）

2
MAX_Y = 140

これより上には行けない（上のはし）

ポイント： たとえば setSpriteY(9999); のような大きい数を入れても、 スプライトはステージの上はしで止まってくれます！

完成した JavaScript コード

このレッスンでは「Y座標の移動」に注目して見てみましょう。
HTML や CSS の詳しい説明はレッスン0で学んだので、ここでは JavaScript の移動部分だけを解説します。

lesson2.html（JavaScript 部分）
コード 解説
JavaScript コード 解説 
// --- スプライトの状態 ---

ここからが「動かすための準備」のエリアです。今回はY座標の動きに注目します。

let spriteX = 0;     // 横方向のオフセット（今回は 0 のまま）

X座標（横の位置）の変数。今回は触りませんが、レッスン1で学びました。

let spriteY = 0;     // 縦方向のオフセット。0 がステージの中央

Y座標（たての位置）を覚えておく変数です。0 はステージの真ん中。プラスで上、マイナスで下へ動きます。

let spriteAngle = 0; // 回転角度

回転の角度。今回は 0 のままですが、同じ場所で管理しています。

let spriteScale = 1; // 拡大縮小率

大きさの倍率。今回は 1（等倍）のままです。

 

（空行）

function updateSpriteTransform() {

スプライトの見た目（位置・回転・大きさ）を、変数の値から作り直す関数です。

  const sprite = document.querySelector(".sprite");

画面の中からスプライト画像（class="sprite"）を見つけます。

  if (!sprite) return;

もし見つからなかったら、何もせず終わります（エラー防止）。

 

（空行）

  sprite.style.transform =

CSS の transform に命令をまとめて入れます。ここで「実際に動いた見た目」になります。

    `translate(-50%, -50%) translate(${spriteX}px, ${spriteY}px) ` +

最初の translate(-50%, -50%) は「画像の中心を基準にする」ため。次の translate(...) が「X座標・Y座標で動かす」部分です。spriteY の値がたて方向の移動量になります。

    `rotate(${spriteAngle}deg) scale(${spriteScale})`;

回転（rotate）と拡大縮小（scale）。今回はY移動が目的なので値は変えませんが、仕組みはここで反映されます。

}

updateSpriteTransform の終わり。

 

（空行）

// --- Y座標を「○」にする関数 ---

ここからがレッスン2の新しい関数です！Scratch の「Y座標を○にする」と同じ役わりです。

function setSpriteY(targetY) {

Scratch の「Y座標を ○ にする」ブロックの ○ の部分が targetY です。数字を入れると、そのY座標に移動します。

  const MIN_Y = -140;

下に動ける限界（今回は -140）。ステージの外に出すぎないための安全ラインです。

  const MAX_Y = 140;

上に動ける限界（今回は 140）。

 

（空行）

  if (targetY < MIN_Y) {

もし targetY が小さすぎたら（下すぎたら）…

    spriteY = MIN_Y;

下はし（MIN_Y）にそろえます。

  } else if (targetY > MAX_Y) {

もし targetY が大きすぎたら（上すぎたら）…

    spriteY = MAX_Y;

上はし（MAX_Y）にそろえます。

  } else {

範囲内なら…

    spriteY = targetY;

そのまま spriteY に入れてOKです。

  }

条件分岐の終わり。

 

（空行）

  updateSpriteTransform();

Y座標を変えただけでは画面は変わりません。最後にこの関数を呼んで、見た目を更新します。

}

setSpriteY の終わり。

 

（空行）

// ページ表示時に 1 回だけ呼び出す（スタート位置）

ページが表示されたときに、最初の位置を決めます。

setSpriteY(0);

最初の位置を決めます。0 は中央。ここを 100 や -100 に変えると、スタート位置が変わります。

HTML・CSS の部分について

HTML と CSS（ステージや見た目の設定）は、レッスン0 とほぼ同じです。 詳しい説明はレッスン0を見てね。 下の「解説なしのコード全文」で、HTML・CSS を含めた全体を確認できます。

解説なしのコード全文を表示 
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>レッスン2：Y座標を「○」にする</title>
    <style>
      /* 全体のリセット＆基本スタイル */
      *, *::before, *::after {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        min-height: 100vh;
        background: #ffffff;
        font-family: system-ui, -apple-system, sans-serif;
        display: flex;
        justify-content: center;
      }

      /* コンテンツ本体 */
      .page {
        width: min(1100px, 100% - 32px);
        padding: 24px 16px 32px;
        display: flex;
        flex-direction: column;
        gap: 24px;
      }

      /* タイトル部 */
      .page-title {
        font-size: 1.4rem;
        font-weight: 700;
        margin: 0;
      }

      .page-subtitle {
        font-size: 0.95rem;
        color: #555;
        margin: 4px 0 0;
      }

      /* ステージ周り */
      .stage-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
      }

      .stage-label {
        font-size: 0.9rem;
        color: #666;
      }

      /* スプライトが動く枠（ステージ） */
      .stage {
        width: 80%;
        max-width: 960px;
        height: 432px;
        border: 4px solid #000;
        background-color: #f7f7f7;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
      }

      /* SVGスプライト */
      .sprite {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 96px;
        height: 96px;
        transform: translate(-50%, -50%);
        pointer-events: none;
      }

      /* スマホ向け調整 */
      @media (max-width: 600px) {
        .stage {
          width: 90%;
          height: 300px;
        }
        .sprite {
          width: 72px;
          height: 72px;
        }
      }
    </style>
  </head>
  <body>
    <main class="page">
      <header>
        <h1 class="page-title">レッスン2：Y座標を「○」にする</h1>
        <p class="page-subtitle">
          スプライトのたての位置を、数字で指定してみよう。
        </p>
      </header>

      <section class="stage-section">
        <div class="stage-label">スプライトが動くステージ</div>
        <div class="stage">
          <img class="sprite" src="./images/chara00.svg" alt="主人公スプライト" />
        </div>
      </section>
    </main>

    <script>
      // --- スプライトの状態 ---
      let spriteX = 0;     // 横方向のオフセット（今回は 0 のまま）
      let spriteY = 0;     // 縦方向のオフセット。0 がステージの中央
      let spriteAngle = 0; // 回転角度
      let spriteScale = 1; // 拡大縮小率

      function updateSpriteTransform() {
        const sprite = document.querySelector(".sprite");
        if (!sprite) return;

        sprite.style.transform =
          `translate(-50%, -50%) translate(${spriteX}px, ${spriteY}px) ` +
          `rotate(${spriteAngle}deg) scale(${spriteScale})`;
      }

      // --- Y座標を「○」にする関数 ---
      // Scratch の「Y座標を ○ にする」ブロックのイメージ。
      // 0 ならステージの中央、プラスで上、マイナスで下。
      function setSpriteY(targetY) {
        const MIN_Y = -140;
        const MAX_Y = 140;

        if (targetY < MIN_Y) {
          spriteY = MIN_Y;
        } else if (targetY > MAX_Y) {
          spriteY = MAX_Y;
        } else {
          spriteY = targetY;
        }

        updateSpriteTransform();
      }

      // ページ表示時に 1 回だけ呼び出す（スタート位置）
      setSpriteY(0);
    </script>
  </body>
</html>

このページのコードを使ってみよう（ざっくり手順）

  1. lesson1.html を作ったフォルダの中に、 lesson2.html に相当するファイル（またはページ）を用意します。
  2. このページにのっている lesson2 のコードを、そのファイルに反映します。
  3. ./images/chara00.svg の部分は、自分の用意したスプライト画像のファイル名に変えてもOKです。
  4. ページを開いて、ステージの中にスプライトが表示されていることを確認します。

ここまでできたら、次のステップとして setSpriteY(0); の数字を変えてみる実験をしてみましょう。

ためしてみよう（すこし遊ぶ）

次のように数字を変えて、スプライトの動きを確かめてみましょう。 

// 中央（0）
setSpriteY(0);

// 上に寄せる（プラス）
setSpriteY(100);

// 下に寄せる（マイナス）
setSpriteY(-100);

// すごく大きな数字（ステージの上はしで止まるはず）
setSpriteY(9999);
+

プラスの数

上へ移動します

-

マイナスの数

下へ移動します

!

大きすぎる数

ステージからはみ出さない！

今回の注目ポイント

このプログラムで特に押さえておきたい 3 つのポイントを紹介します。

1

spriteY 変数

ステージの中央を 0 としたときの、縦方向のずれを覚えておく変数です。

2

setSpriteY(targetY)

「Y座標を targetY にする」関数。Scratch のブロックと同じ役わりです。

3

MIN_Y / MAX_Y

ステージからはみ出さないように、範囲を -140 〜 140 に制限しています。

さいごに（まとめ）

このレッスンで学んだこと

  • • Scratch の「Y座標を ○ にする」ブロックのはたらき
  • • JavaScript の setSpriteY(○) という関数
  • • ステージからはみ出さないようにするための最小値・最大値

これで、「たての位置を数字でコントロールする」という考え方が Scratch と JavaScript の両方でつながりました。 レッスン1 の setSpriteX と組み合わせれば、 ステージ上の好きな位置にスプライトを移動できるようになります！

完成版を見てみよう

JavaScript 版の完成したプロジェクトを確認できます。

Scratch 版を見る

Scratch 公式サイトでプロジェクトを開く

JavaScript 版を見る

動作デモをブラウザで確認する

やってみよう（発展編）

学んだコードを改造して、さらに面白い見た目に挑戦してみましょう！

スタート位置を変えてみよう

setSpriteY(0); の 0 を 100 や -100 に変えて、スタート位置を変えてみよう。

範囲を変えてみよう

MIN_Y = -140 と MAX_Y = 140 の数字を変えて、動ける範囲を広げたり狭くしたりしてみよう。

× 拡大画像