Scratch アクションゲーム

横スクロールアクションゲームを作ろう!

★★☆(ちゅうきゅう)

まずは遊んでみよう!

完成したゲームがこちら。旗を押してスタート!矢印キーで操作するよ。

これから、このゲームを一歩ずつ作っていくよ。

1

男の子を配置しよう

スプライトライブラリから 「Ben」 を選んで追加しよう。名前を 「男の子」 に変えよう。

Scratch エディタ画面(右下)
スプライト追加
ここをクリック →

スプライト一覧の右下にあるボタンから 「Ben」 を探して追加し、名前を「男の子」に変えよう。

男の子
男の子
男の子のプログラムを作るよ
@greenFlag が押されたとき
[重力 v] を [0] にする
大きさを (50) %にする
x座標を (-180) 、y座標を (0) にする
回転方法を [left-right v] にする
      
旗を押してみよう。男の子が左側に小さく表示されたかな?
Scratch では「スプライト」が画面で動くキャラクターだよ。ライブラリから好きなキャラを選ぼう!
2

ステージを描こう

新しいスプライトを「描く」で追加しよう。

Scratch エディタ画面(右下)
男の子 男の子
スプライト追加
🖌
← 「描く」を選ぼう
ここをクリック →

「描く」を選んで、コスチュームエディタで地面や足場を描こう。名前を 「ステージ」 に変えよう。コスチュームの名前は 「ステージ1」 にしよう。

ステージ1のイメージ

四角形ツールで 地面足場 を描こう。色は好きな色でOK!

🟫
ステージ
ステージのプログラムを作るよ
@greenFlag が押されたとき
x座標を (0) 、y座標を (0) にする
コスチュームを [ステージ1 v] にする
      
ステージはペイントエディタで自由に描けるよ。四角形ツールで地面や足場を作ろう!
3

左右に動かそう

ゲーム画面イメージ
男の子
→ 10
← -10
男の子
男の子
男の子のプログラムに追加するよ

「ずっと」のループの中に、矢印キーで左右に動くプログラムを追加しよう。

男の子の完成プログラム(この時点):

@greenFlag が押されたとき
[重力 v] を [0] にする
大きさを (50) %にする
x座標を (-180) 、y座標を (0) にする
回転方法を [left-right v] にする
ずっと
  もし <[right arrow v] キーが押された> なら
    (90) 度に向ける
    x座標を (10) ずつ変える
  end
  もし <[left arrow v] キーが押された> なら
    (-90) 度に向ける
    x座標を (-10) ずつ変える
  end
end
      
旗を押して、左右の矢印キーで動かしてみよう!
「90度に向ける」は右向き、「-90度に向ける」は左向きだよ。回転方法を「左右のみ」にしてあるから、キャラが逆さまにならないんだ。
4

壁にめりこまないようにしよう

いまのプログラムだと、ステージの地面や壁にめりこんでしまう。「もしステージに触れたなら、元に戻す」を追加しよう。

男の子
男の子
男の子のプログラムを変えるよ

追加したのはこの部分(右移動と左移動のそれぞれに追加するよ):

  もし <[ステージ v] に触れた> なら
    x座標を (-10) ずつ変える
  end
      
  もし <[ステージ v] に触れた> なら
    x座標を (10) ずつ変える
  end
      

男の子の完成プログラム(この時点):

@greenFlag が押されたとき
[重力 v] を [0] にする
大きさを (50) %にする
x座標を (-180) 、y座標を (0) にする
回転方法を [left-right v] にする
ずっと
  もし <[right arrow v] キーが押された> なら
    (90) 度に向ける
    x座標を (10) ずつ変える
    もし <[ステージ v] に触れた> なら
      x座標を (-10) ずつ変える
    end
  end
  もし <[left arrow v] キーが押された> なら
    (-90) 度に向ける
    x座標を (-10) ずつ変える
    もし <[ステージ v] に触れた> なら
      x座標を (10) ずつ変える
    end
  end
end
      
旗を押して、壁に向かって歩いてみよう。めりこまなくなったかな?
「もし〜に触れたなら」で当たり判定ができるよ。移動した後に触れていたら、元に戻すのがコツ!
5

重力をつけよう

変数 「重力」 を使って、キャラクターが自然に落下するようにしよう。

ゲーム画面イメージ
男の子
↓ 重力
男の子
男の子
男の子のプログラムに追加するよ

「ずっと」の中に、重力のプログラムを追加しよう(移動のプログラムの後に入れるよ)。

追加したのはこの部分:

  [重力 v] を (-1) ずつ変える
  y座標を (重力) ずつ変える
  もし <[ステージ v] に触れた> なら
    y座標を (((重力) * (-1))) ずつ変える
    [重力 v] を [0] にする
  end
      

男の子の完成プログラム(この時点):

@greenFlag が押されたとき
[重力 v] を [0] にする
大きさを (50) %にする
x座標を (-180) 、y座標を (0) にする
回転方法を [left-right v] にする
ずっと
  もし <[right arrow v] キーが押された> なら
    (90) 度に向ける
    x座標を (10) ずつ変える
    もし <[ステージ v] に触れた> なら
      x座標を (-10) ずつ変える
    end
  end
  もし <[left arrow v] キーが押された> なら
    (-90) 度に向ける
    x座標を (-10) ずつ変える
    もし <[ステージ v] に触れた> なら
      x座標を (10) ずつ変える
    end
  end
  [重力 v] を (-1) ずつ変える
  y座標を (重力) ずつ変える
  もし <[ステージ v] に触れた> なら
    y座標を (((重力) * (-1))) ずつ変える
    [重力 v] を [0] にする
  end
end
      
旗を押してみよう。男の子が地面に着地するかな?足場から落ちてみよう!
重力は「少しずつ速くなる落下」を作るよ。変数を使って速度を管理するんだ!「重力」が毎回 -1 されるから、だんだん速く落ちるよ。
6

ジャンプしよう

地面に立っているときに上矢印キーを押すと、ジャンプできるようにしよう。

ゲーム画面イメージ
男の子
↑ ジャンプ!
男の子
男の子
男の子のプログラムに追加するよ

重力の後に、ジャンプの仕組みを追加しよう。y座標を -1 して地面チェックし、上矢印で重力を 15 にする!

追加したのはこの部分:

  y座標を (-1) ずつ変える
  もし <[ステージ v] に触れた> なら
    もし <[up arrow v] キーが押された> なら
      [Jump v] の音を鳴らす
      [重力 v] を [15] にする
    end
  end
  y座標を (1) ずつ変える
      

男の子の完成プログラム(この時点):

@greenFlag が押されたとき
[重力 v] を [0] にする
大きさを (50) %にする
x座標を (-180) 、y座標を (0) にする
回転方法を [left-right v] にする
ずっと
  もし <[right arrow v] キーが押された> なら
    (90) 度に向ける
    x座標を (10) ずつ変える
    もし <[ステージ v] に触れた> なら
      x座標を (-10) ずつ変える
    end
  end
  もし <[left arrow v] キーが押された> なら
    (-90) 度に向ける
    x座標を (-10) ずつ変える
    もし <[ステージ v] に触れた> なら
      x座標を (10) ずつ変える
    end
  end
  [重力 v] を (-1) ずつ変える
  y座標を (重力) ずつ変える
  もし <[ステージ v] に触れた> なら
    y座標を (((重力) * (-1))) ずつ変える
    [重力 v] を [0] にする
  end
  y座標を (-1) ずつ変える
  もし <[ステージ v] に触れた> なら
    もし <[up arrow v] キーが押された> なら
      [Jump v] の音を鳴らす
      [重力 v] を [15] にする
    end
  end
  y座標を (1) ずつ変える
end
      
旗を押して、上矢印キーでジャンプしてみよう!
ジャンプの仕組み:上矢印キーを押すと重力が「15」になって上に飛ぶよ。重力が毎回 -1 されるから、自然に落ちてくるんだ!
7

定義ブロックを使おう

プログラムが長くなってきたね。「定義ブロック」を使って、「移動」と「重力」に分けて整理しよう。

男の子
男の子
男の子のプログラムを整理するよ

「ブロック定義」から 「ブロックを作る」 を選んで、「移動」「重力」 の2つの定義ブロックを作ろう。

メインのスクリプト(シンプルになった!):

@greenFlag が押されたとき
[重力 v] を [0] にする
大きさを (50) %にする
x座標を (-180) 、y座標を (0) にする
回転方法を [left-right v] にする
ずっと
  移動 :: custom
  重力 :: custom
end
      

定義「移動」:

定義 移動
もし <[right arrow v] キーが押された> なら
  (90) 度に向ける
  x座標を (10) ずつ変える
  もし <[ステージ v] に触れた> なら
    x座標を (-10) ずつ変える
  end
end
もし <[left arrow v] キーが押された> なら
  (-90) 度に向ける
  x座標を (-10) ずつ変える
  もし <[ステージ v] に触れた> なら
    x座標を (10) ずつ変える
  end
end
      

定義「重力」:

定義 重力
[重力 v] を (-1) ずつ変える
y座標を (重力) ずつ変える
もし <[ステージ v] に触れた> なら
  y座標を (((重力) * (-1))) ずつ変える
  [重力 v] を [0] にする
end
y座標を (-1) ずつ変える
もし <[ステージ v] に触れた> なら
  もし <[up arrow v] キーが押された> なら
    [Jump v] の音を鳴らす
    [重力 v] を [15] にする
  end
end
y座標を (1) ずつ変える
      
旗を押して動きが変わっていないか確認しよう。見た目は同じだけど、プログラムがきれいになったよ!
「定義ブロック」を使うと、プログラムをきれいに整理できるよ。「移動」と「重力」に分けると見やすい!
8

次のステージに進もう

画面の右端まで歩いたら、次のステージに進むようにしよう。変数 「ステージ」 を作ろう。

ゲーム画面イメージ
ステージ 1
男の子
→ 次のステージへ!
男の子
男の子
男の子に新しいスクリプトを追加するよ

もうひとつ 「旗が押されたとき」 のスクリプトを作ろう。右端(x座標 > 220)に着いたら次のステージに進むよ。

@greenFlag が押されたとき
[ステージ v] を [1] にする
ずっと
  もし <(220) < [(x座標)]> なら
    x座標を (-230) 、y座標を (0) にする
    [ステージ v] を (1) ずつ変える
  end
end
      

ステージのスクリプトも変えよう:

🟫
ステージ
ステージのプログラムを変えるよ
@greenFlag が押されたとき
x座標を (0) 、y座標を (0) にする
コスチュームを [ステージ1 v] にする
ずっと
  もし <(ステージ) = [1]> なら
    コスチュームを [ステージ v] にする
  end
  もし <(ステージ) = [2]> なら
    コスチュームを [ステージ v] にする
  end
  もし <(ステージ) = [3]> なら
    コスチュームを [ステージ v] にする
  end
end
      
旗を押して、画面の右端まで歩いてみよう!次のステージに進むかな?
9

ステージ2・3を描こう

ステージのスプライトに、新しいコスチュームを追加して、ステージ2とステージ3を描こう。

🟫
ステージ
コスチュームを追加するよ

コスチュームタブを開いて、左下の「描く」ボタンから新しいコスチュームを2つ追加しよう。

コスチューム名を 「ステージ2」「ステージ3」 にして、それぞれ違う地形を描こう。

ステージ2のイメージ
ステージ3のイメージ
足場の位置や大きさを変えて、ステージごとに違うコースを作ろう!高い場所にジャンプで行けるように工夫してね。
10

ご案内を表示しよう

ステージ1〜3で、操作方法などのチュートリアル(ご案内)を表示しよう。

Scratch エディタ画面(右下)
男の子 男の子
🟫 ステージ
スプライト追加
🖌
← 「描く」を選ぼう
ここをクリック →

「描く」で新しいスプライトを作って、名前を 「ご案内」 にしよう。コスチュームを3つ作り(ステージ1、ステージ2、ステージ3)、それぞれ操作方法を書こう。

📋
ご案内
ご案内のプログラムを作るよ
@greenFlag が押されたとき
x座標を (0) 、y座標を (0) にする
コスチュームを [ステージ1 v] にする
ずっと
  もし <(ステージ) = [1]> なら
    表示する
    コスチュームを [ステージ v] にする
  でなければ
    もし <(ステージ) = [2]> なら
      コスチュームを [ステージ v] にする
    でなければ
      もし <(ステージ) = [3]> なら
        コスチュームを [ステージ v] にする
      でなければ
        隠す
      end
    end
  end
end
      
チュートリアルを表示して、プレイヤーに操作方法を教えよう!ステージ4以降では自動的に隠れるよ。
11

カニをつくろう(左右に動く敵)

ステージ3に、左右に往復する カニ の敵を作ろう!

ゲーム画面イメージ
ステージ 3
男の子
カニ
← →

スプライトライブラリから 「Crab」 を探して追加し、名前を 「カニ」 にしよう。

カニ
カニ
カニのプログラムを作るよ

スクリプト1(表示/非表示):

@greenFlag が押されたとき
大きさを (45) %にする
x座標を (180) 、y座標を (-125) にする
隠す
ずっと
  もし <(ステージ) = [3]> なら
    表示する
  でなければ
    隠す
  end
end
      

スクリプト2(左右移動):

@greenFlag が押されたとき
ずっと
  もし <(ステージ) = [3]> なら
    x座標を (180) 、y座標を (-125) にする
    (45) 回繰り返す
      x座標を (-3) ずつ変える
    end
    (45) 回繰り返す
      x座標を (3) ずつ変える
    end
  end
end
      
「〇回繰り返す」ブロックで、カニを左右に往復させよう。回数と移動量で動きの幅が変わるよ!
12

敵に当たったらスタートに戻ろう

カニに触れたら、「Pew」の音を鳴らしてスタート位置に戻るようにしよう。

男の子
男の子
男の子のスクリプトに追加するよ

ステージ進行のスクリプト(旗が押されたとき その2)に、カニとの当たり判定を追加しよう。

追加したのはこの部分:

  もし <[カニ v] に触れた> なら
    [Pew v] の音を鳴らす
    x座標を (-230) 、y座標を (0) にする
  end
      

男の子のスクリプト2 の完成プログラム(この時点):

@greenFlag が押されたとき
[ステージ v] を [1] にする
ずっと
  もし <(220) < [(x座標)]> なら
    x座標を (-230) 、y座標を (0) にする
    [ステージ v] を (1) ずつ変える
  end
  もし <[カニ v] に触れた> なら
    [Pew v] の音を鳴らす
    x座標を (-230) 、y座標を (0) にする
  end
end
      
旗を押して、カニに当たるとどうなるか試してみよう!
13

ロケットをつくろう(下から飛ぶ敵)

ステージ4に、下から上に飛んでくるロケットの敵を作ろう!

ゲーム画面イメージ
ステージ 4
男の子
ロケット
↑ 10

スプライトライブラリから 「Rocketship」 を探して追加し、名前を 「ロケット」 にしよう。

ロケット
ロケット
ロケットのプログラムを作るよ

スクリプト1(表示/非表示):

@greenFlag が押されたとき
大きさを (45) %にする
x座標を (0) 、y座標を (-180) にする
隠す
ずっと
  もし <(ステージ) = [4]> なら
    表示する
  でなければ
    隠す
  end
end
      

スクリプト2(上に飛ぶ動き):

@greenFlag が押されたとき
ずっと
  もし <(ステージ) = [4]> なら
    x座標を (0) 、y座標を (-180) にする
    <(170) < [(y座標)]> まで繰り返す
      y座標を (10) ずつ変える
    end
  end
end
      

男の子のスクリプト2 にロケットの当たり判定も追加しよう:

男の子
男の子
男の子のスクリプトに追加するよ

追加したのはこの部分:

  もし <[ロケット v] に触れた> なら
    [Pew v] の音を鳴らす
    x座標を (-230) 、y座標を (0) にする
  end
      
「〜まで繰り返す」ブロックは、条件を満たすまで動き続けるよ!ロケットは画面上まで飛んだら、また下からやり直すんだ。
14

コウモリをつくろう(ランダムに飛ぶ敵)

ステージ5に、右から左にランダムな高さで飛んでくるコウモリを作ろう!

ゲーム画面イメージ
ステージ 5
男の子
コウモリ
← -10

スプライトライブラリから 「Bat」 を探して追加し、名前を 「コウモリ」 にしよう。

コウモリ
コウモリ
コウモリのプログラムを作るよ

スクリプト1(表示/非表示):

@greenFlag が押されたとき
大きさを (45) %にする
x座標を (240) 、y座標を (-180) にする
隠す
ずっと
  もし <(ステージ) = [5]> なら
    表示する
  でなければ
    隠す
  end
end
      

スクリプト2(右から左に飛ぶ動き):

@greenFlag が押されたとき
ずっと
  もし <(ステージ) = [5]> なら
    x座標を (240) 、y座標を (((-100) から (50) までの乱数)) にする
    <((x座標)) < [-220]> まで繰り返す
      x座標を (-10) ずつ変える
    end
  end
end
      

男の子のスクリプト2 にコウモリの当たり判定も追加しよう:

男の子
男の子
男の子のスクリプトに追加するよ

追加したのはこの部分:

  もし <[コウモリ v] に触れた> なら
    [Pew v] の音を鳴らす
    x座標を (-230) 、y座標を (0) にする
  end
      
「乱数」を使うと毎回違う高さから飛んでくるよ。予測できない動きでゲームが難しくなる!
15

トゲをつくろう(動かない障害物)

ステージ6に、触れるとスタートに戻されるトゲを作ろう!

ゲーム画面イメージ
ステージ 6
男の子
▲▲▲

「描く」で新しいスプライトを作って、名前を 「トゲ」 にしよう。三角形やギザギザを描いてトゲっぽくしよう。

トゲ
トゲのプログラムを作るよ
@greenFlag が押されたとき
x座標を (0) 、y座標を (0) にする
隠す
ずっと
  もし <(ステージ) = [6]> なら
    表示する
  でなければ
    隠す
  end
end
      

男の子のスクリプト2 にトゲの当たり判定も追加しよう:

男の子
男の子
男の子のスクリプトに追加するよ

追加したのはこの部分:

  もし <[トゲ v] に触れた> なら
    [Pew v] の音を鳴らす
    x座標を (-230) 、y座標を (0) にする
  end
      
動かない障害物でも「もし触れたなら」で当たり判定ができるよ!トゲをよけてジャンプで進もう。

男の子のスクリプト2 の完成プログラム(この時点):

@greenFlag が押されたとき
[ステージ v] を [1] にする
ずっと
  もし <(220) < [(x座標)]> なら
    x座標を (-230) 、y座標を (0) にする
    [ステージ v] を (1) ずつ変える
  end
  もし <[カニ v] に触れた> なら
    [Pew v] の音を鳴らす
    x座標を (-230) 、y座標を (0) にする
  end
  もし <[ロケット v] に触れた> なら
    [Pew v] の音を鳴らす
    x座標を (-230) 、y座標を (0) にする
  end
  もし <[コウモリ v] に触れた> なら
    [Pew v] の音を鳴らす
    x座標を (-230) 、y座標を (0) にする
  end
  もし <[トゲ v] に触れた> なら
    [Pew v] の音を鳴らす
    x座標を (-230) 、y座標を (0) にする
  end
end
      
16

ステージ4〜6を描こう

ステージのスプライトに、コスチュームを3つ追加して、ステージ4・5・6を描こう。

🟫
ステージ
コスチュームを追加するよ

コスチュームタブで「描く」から新しいコスチュームを追加し、名前を 「ステージ4」「ステージ5」「ステージ6」 にしよう。

それぞれの敵や障害物に合わせた地形を工夫して描こう。

ステージ4のイメージ(ロケットステージ)
ロケット

ステージのスクリプトに、ステージ4〜6の分も追加しよう。

追加したのはこの部分(ずっとの中に追加):

  もし <(ステージ) = [4]> なら
    コスチュームを [ステージ v] にする
  end
  もし <(ステージ) = [5]> なら
    コスチュームを [ステージ v] にする
  end
  もし <(ステージ) = [6]> なら
    コスチュームを [ステージ v] にする
  end
      
敵の位置に合わせた地形を描こう!ロケットが飛ぶ場所は足場を離しておくと、よけるのが楽しくなるよ。
17

コインをつくろう

ステージ7に、触れると取れるコインを作ろう!

ゲーム画面イメージ
ステージ 7
男の子
🪙

「描く」で新しいスプライトを作って、名前を 「コイン」 にしよう。丸い黄色のコインを描こう。

🪙
コイン
コインのプログラムを作るよ
@greenFlag が押されたとき
x座標を (0) 、y座標を (0) にする
隠す
ずっと
  もし <(ステージ) = [7]> なら
    表示する
    もし <[男の子 v] に触れた> なら
      [Coin v] の音を鳴らす
      隠す
      <(ステージ) = [8]> まで待つ
    end
  でなければ
    隠す
  end
end
      
コインに触れたら音を鳴らして消えるようにしよう!「隠す」ブロックで消せるよ。次のステージに進むまで待ってから、また表示されるようにしているんだ。
18

スイッチをつくろう

ステージ8に、触れるとオンになるスイッチを作ろう!スイッチを押すと道が開く仕組みだよ。

ゲーム画面イメージ
ステージ 8
スイッチ オフ
男の子
🔑

スプライトライブラリから 「Key」 を探して追加し、名前を 「スイッチ」 にしよう。変数 「スイッチ」 も作ろう。

🔑
スイッチ
スイッチのプログラムを作るよ
@greenFlag が押されたとき
[スイッチ v] を [オフ] にする
x座標を (-195) 、y座標を (120) にする
大きさを (80) %にする
隠す
ずっと
  もし <(ステージ) = [8]> なら
    もし <(スイッチ) = [オフ]> なら
      表示する
      もし <[男の子 v] に触れた> なら
        [Connect v] の音を鳴らす
        [スイッチ v] を [オン] にする
        [ステージ v] を (1) ずつ変える
        隠す
      end
    end
  でなければ
    [スイッチ v] を [オフ] にする
    隠す
  end
end
      

ステージのスクリプトもステージ8用に変えよう:

🟫
ステージ
ステージのプログラムに追加するよ

ステージ8では、スイッチがオンになるまで待って、コスチュームを切り替えるよ。

  もし <(ステージ) = [7]> なら
    コスチュームを [ステージ v] にする
  end
  もし <(ステージ) = [8]> なら
    コスチュームを [ステージ8 v] にする
    <(スイッチ) = [オン]> まで待つ
    コスチュームを [ステージ9 v] にする
  end
      
変数「スイッチ」を使って、ギミックのオン/オフを管理しよう!スイッチがオンになると道が開く仕掛けだよ。
19

クリア画面とステージ7〜9をつくろう

ステージのスプライトに、ステージ7〜9とクリア画面のコスチュームを追加しよう。

🟫
ステージ
コスチュームを追加するよ

コスチュームタブで「描く」から新しいコスチュームを追加しよう。

ステージのスクリプトに、クリアの処理を追加しよう。

追加したのはこの部分(ずっとの中に追加):

  もし <(ステージ) = [10]> なら
    コスチュームを [クリア v] にする
    [Win v] の音を鳴らして終わるまで待つ
    このスクリプトを止める
  end
      

ステージの完成プログラム:

@greenFlag が押されたとき
x座標を (0) 、y座標を (0) にする
コスチュームを [ステージ1 v] にする
ずっと
  もし <(ステージ) = [1]> なら
    コスチュームを [ステージ v] にする
  end
  もし <(ステージ) = [2]> なら
    コスチュームを [ステージ v] にする
  end
  もし <(ステージ) = [3]> なら
    コスチュームを [ステージ v] にする
  end
  もし <(ステージ) = [4]> なら
    コスチュームを [ステージ v] にする
  end
  もし <(ステージ) = [5]> なら
    コスチュームを [ステージ v] にする
  end
  もし <(ステージ) = [6]> なら
    コスチュームを [ステージ v] にする
  end
  もし <(ステージ) = [7]> なら
    コスチュームを [ステージ v] にする
  end
  もし <(ステージ) = [8]> なら
    コスチュームを [ステージ8 v] にする
    <(スイッチ) = [オン]> まで待つ
    コスチュームを [ステージ9 v] にする
  end
  もし <(ステージ) = [10]> なら
    コスチュームを [クリア v] にする
    [Win v] の音を鳴らして終わるまで待つ
    このスクリプトを止める
  end
end
      
全ステージクリアを目指そう!旗を押してゲームをプレイしてみよう!

改造してみよう!

アクションゲームをもっとパワーアップさせよう!

Lv.1
新しい敵キャラを追加してみよう!
Lv.2
スコアをつけてみよう!
Lv.3
制限時間をつけてみよう!
Lv.4
ステージをもっと増やしてみよう!
Lv.5
ボスキャラを作ってバトルステージを追加しよう!
完成したゲーム