初級 動き 回転

スプライトを「○度回す」動きを作ってみよう

Scratch の「○度回す」ブロックと同じイメージで、スプライトの向きを数字で回転させる関数を作ります

このページで学べること

  • • Scratch の「○度回す」ブロックの考え方
  • • JavaScript で turnSprite(角度) という関数を作る方法
  • • 角度を 0〜359 に整える normalizeAngle の仕組み

このページでやること

Scratch には「○度回す」というブロックがあります。 このブロックは、スプライトの向きを「くるっ」と回すためのものです。

このレッスンでは、JavaScript で同じ考え方の turnSprite(角度) という関数を作って、 数字を入れるだけでスプライトの向きを回せるようにします。 まだ位置は動かしません。今回は「回転」だけに集中して練習しましょう。

主人公スプライト

この黒いわくの中が「ステージ」。スプライトの向きを回してみよう。

Scratch ではどう見える？

Scratch の「動き」ブロックには「○度回す」というブロックがあります。 このブロックを使うと、スプライトが「くるっ」と向きを変えます。

Scratchの画面

クリックで拡大

このブロックの特徴：

  • ○のところに入れた数字が「回転する角度」になる
  • 「今の向きに足して回す（少しずつ回る）」という動きになる

たとえば、15 を入れると 15度ずつ回ります。 くり返し（ループ）と組み合わせると、回転アニメーションが作れます。

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

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

Scratch ブロック

「○度回す」

↓

今の向きに○度を足す

Scratch では、ブロックに数字を入れるだけで向きが回ります。

JavaScript 
// 変数で「いまの角度」を覚えておく
let spriteAngle = 0;

// 関数で角度を足して回す
turnSprite(15);  // 15度回す
turnSprite(-30); // 反対に30度回す

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

角度を 0〜359 におさめる仕組み

角度は 0〜359 の中におさめておくと分かりやすいので、 normalizeAngle() という関数で 360 をこえた分をぐるっと戻します。

1
spriteAngle

今の向き（角度）を覚えておく変数

2
normalizeAngle()

角度が360をこえたら0に戻す関数

ポイント： たとえば turnSprite(400); のような大きい数を入れても、 角度は 0〜359 の中におさまります！

完成した JavaScript コード

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

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

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

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

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

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

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

let spriteAngle = 0; // 回転角度。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) ` +

位置を動かす部分。今回は 0 のままなので中央にいます。

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

rotate(${spriteAngle}deg) がスプライトを回転させる部分です！spriteAngle の値がそのまま回転角度になります。

}

updateSpriteTransform の終わり。

 

（空行）

// --- 角度を 0〜359 に整える関数 ---

角度が 360 以上や負の数になったとき、0〜359 に直す関数です。

function normalizeAngle(deg) {

deg は「angle（角度）」の degree（度）。入れた角度を 0〜359 に直して返します。

  const r = deg % 360;

% は「あまり」を求める演算子です。360 で割ったあまりを r に入れます。

  return r < 0 ? r + 360 : r;

JavaScript の % は負の数になることがあるので、負のときは 360 を足して正の数に直します。

}

normalizeAngle の終わり。

 

（空行）

// --- 「○度回す」関数 ---

ここからがレッスン3の新しい関数です！Scratch の「○度回す」と同じ役わりです。

function turnSprite(degrees) {

Scratch の「○度回す」ブロックの ○ の部分が degrees（度数）です。数字を入れると、その分だけ回転します。

  spriteAngle = normalizeAngle(spriteAngle + degrees);

今の角度に degrees を足して、0〜359 に整えてから spriteAngle に入れます。これが「○度回す」の中身です！

  updateSpriteTransform();

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

}

turnSprite の終わり。

 

（空行）

// ページ表示時に 1 回だけ呼び出す（最初の表示）

ページが表示されたときに、スプライトの状態を反映します。

updateSpriteTransform();

最初の状態（回転なし）を画面に反映します。

// 例：turnSprite(15); で 15 度回転する

この行のコメントを外して数字を変えると、最初から回転した状態になります。

HTML・CSS の部分について

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

解説なしのコード全文を表示 
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>レッスン3：スプライトを「○度回す」</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">レッスン3：スプライトを「○度回す」</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; // 回転角度。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})`;
      }

      // --- 角度を 0〜359 に整える関数 ---
      // JavaScript の % は負数になることがあるので調整する
      function normalizeAngle(deg) {
        const r = deg % 360;
        return r < 0 ? r + 360 : r;
      }

      // --- 「○度回す」関数 ---
      // Scratch の「○度回す」ブロックのイメージ（今の角度に足す）
      function turnSprite(degrees) {
        spriteAngle = normalizeAngle(spriteAngle + degrees);
        updateSpriteTransform();
      }

      // ページ表示時に 1 回だけ呼び出す（最初の表示）
      updateSpriteTransform();
      // 例：turnSprite(15); で 15 度回転する
    </script>
  </body>
</html>

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

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

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

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

次のように数字を変えて、回転を確かめてみましょう。 

// 15度回す（右回り）
turnSprite(15);

// 45度回す
turnSprite(45);

// -30度回す（反対向きに回す）
turnSprite(-30);
+

プラスの数

右回り（時計回り）に回転します

-

マイナスの数

左回り（反時計回り）に回転します

!

大きすぎる数

0〜359 に自動で整えられます

今回の注目ポイント

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

1

spriteAngle 変数

スプライトの「今の向き（角度）」を覚えておく変数です。

2

turnSprite(degrees)

「○度回す」関数。今の角度に degrees を足して回します。

3

normalizeAngle()

角度を 0〜359 に整える関数。360 をこえた分をぐるっと戻します。

さいごに（まとめ）

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

  • • Scratch の「○度回す」ブロックのはたらき
  • • JavaScript の turnSprite(○) という関数
  • • 角度を 0〜359 に整える normalizeAngle() の仕組み

これで、「向きを数字でコントロールする」という考え方が Scratch と JavaScript の両方でつながりました。 レッスン1・2 の setSpriteX・setSpriteY と組み合わせれば、 位置だけでなく向きも自由にコントロールできるようになります！

完成版を見てみよう

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

Scratch 版を見る

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

JavaScript 版を見る

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

やってみよう（発展編）

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

回転角度を変えてみよう

turnSprite(15); の 15 を 45 や 90 に変えて、回転角度を変えてみよう。

くり返しで回転アニメーション

setInterval(() => turnSprite(5), 100); を使って、自動で回り続けるアニメーションを作ってみよう。

× 拡大画像