テキストコーディング入門教材の決定版!

あなたの教室でも「テクノロジア魔法学校」を始めてみませんか?!

プログラミング教室・学習塾・学童保育のみなさまへ ディズニーだから夢中になれる!

PCの画面

「テクノロジア魔法学校」とは?

  • 3領域×4言語の
    「クロスカテゴリー学習」

    Scratchの次のステップに最適な教材。Webデザインゲーム制作メディアアートの3つの領域で全228レッスンを収録。テキストコーディングの基礎が身につきます。

  • 難解さを徹底して取り除いた
    学習システム「MOZER®︎」

    1画面に詰め込む情報量を適切にコントロール。長く複雑なプログラムも細かいステップでレッスン化することで、着実に理解しながら学習を進めることができます。

  • 必要なのはパソコンと
    インターネット環境だけ

    ソフトウェアのインストールやセットアップは必要ありません。お手元のパソコンとインターネット環境さえ整えばすぐに教室でご利用いただけます。

多くの教室で「テクノロジア魔法学校」を使って学習しています

導入スクールの例

「テクノロジア魔法学校」が選ばれる理由

子どもから大人まで夢中になれる
ディズニーのコンテンツ
がいっぱい!

レッスンの成果物では『アラジン』や『白雪姫』などのクラシックなものから『美女と野獣』『ベイマックス』のような話題の映画まで14の名作を用いています。大好きなディズニーの名場面を夢中になって作り上げていくことができます。また、パソコン初心の方にはオリジナルのタイピング練習コンテンツもご用意。幅広く、長期間で継続して学習が楽しめるようになっています。

レッスンでつくり上げる成果物

  • 2

    人探しサイト

    「ズートピア」で行方不明になった動物たちを探すためのWebサイトをつくろう

  • 2

    フライングカーペット

    横スクロールゲームをつくって、アラジンを洞窟から脱出させよう

  • 2

    スカイランタン

    「塔の上のラプンツェル」のランタン打ち上げをメディアアートで再現しよう

  • 3

    魔法の鏡

    さまざまなエフェクトで世界を映す魔法の鏡をつくろう

  • 3

    ダンジョンエスケープ

    ダンジョン脱出ゲームをつくって、「シュガー・ラッシュ」のラルフを救い出そう

  • 4

    スクールオブフィッシュ

    マウスを追いかける動きをつくって、魚たちのダンスをアリエルに披露しよう

  • 4

    フォトギャラリー

    本格的なフォトギャラリー付きWebサイトをつくろう

  • 4

    クイーンズカード

    「不思議の国のアリス」の神経衰弱ゲームをつくって、女王と勝負しよう

  • 5

    ハニーハント

    風船に乗ったプーさんを動かしてハチミツを集めるゲームをつくろう

  • 5

    KAWARA割り

    ベイマックスを強化するために瓦割りゲームをつくろう

  • 6

    宝石パズル

    7人のこびとたちが掘りだした宝石を使って落ち物パズルをつくろう

  • 6

    シュガー・ラッシュ

    「シュガー・ラッシュ」のレースゲームをつくろう

  • 7

    スノウマジック

    「アナと雪の女王」の氷の魔法をプログラミングで再現しよう

  • 7

    ドラゴン&ソード

    格闘ゲームをつくって、「眠れる森の美女」のドラゴンを倒そう

  • 応用編1

    花火

    「塔の上のラプンツェル」の花火のシーンをメディアアートで再現しよう

  • 応用編1

    クイーンズカード

    基礎編の「不思議の国のアリス」の神経衰弱ゲーム細かなルールが加わえよう

  • 応用編1

    フライングカーペット

    基礎編の横スクロールゲームにキャラクターの動きや新しい操作が加わえよう

  • 応用編1

    ミーミルの課外授業
    (外部環境レッスン)

    ご自身のパソコンで、Webデザイン作品をつくるためのセットアップを学ぼう

  • 応用編1

    ミーミルの課外授業
    (外部環境レッスン)

    ご自身のパソコンで、メディアアート作品をつくるためのセットアップを学ぼう

  • 応用編1

    ミーミルの課外授業
    (外部環境レッスン)

    ご自身のパソコンで、ゲーム作品を作るための、セットアップを学ぼう

  • 応用編2

    スクールオブフィッシュ

    基礎編の作品に、水中のゆらぎをシェーダーで加えることで、より幻想的な表現に挑戦しよう

  • 応用編2

    フォトギャラリー

    基礎編で作ったフォトギャラリーにスライドアニメーションを加えよう

  • 応用編2

    ハニーハント

    基礎編の作品に障害物を置いたり、残り時間を追加して、何度も遊びたくなるようなゲームに挑戦しよう

  • 応用編3

    シュガーラッシュ

    スピードアップ機能などの加わったよりスリリングなゲームデザインに挑戦しよう

  • 応用編3

    魔法の鏡

    基礎編の作品にシェーダーによるエフェクトを追加しよう

  • 応用編3

    人探しサイト

    基礎編のWebサイトにインタビューと、ズートピアのエリアガイドを掲載しよう

  • 応用編4

    KAWARA割り

    カワラが補充される機能と、パワーを貯めて複数のカワラを壊す機能を追加しよう

  • 応用編4

    宝石パズル

    隣り合った宝石を消してスコアを増やし、高得点を目指すルールを加えよう

  • 応用編4

    ドラゴン&ソード

    基礎編のゲームに王子の動きや、攻撃力のちがいで難易度を調整する方法も学ぼう

  • 応用編4

    ダンジョンエスケープ

    左右と上下に 移動するブロックを追加し、スリルのあるゲームに作り変えよう

  • 応用編4

    雪の結晶

    再帰関数・座標変換、色のブレンドなどを使って雪の結晶を作ろう

レッスン目次 人探しサイト

53ステップ

  1. タイトルを書こう
  2. 見出しを作ろう
  3. 画像を表示しよう
  4. 文字の見た目を変えよう
  5. 箱を作ろう
  6. 背景画像を表示しよう
  7. 高さを指定しよう
  8. divの上がわに空間を作ろう
  9. 真ん中にそろえよう
  10. <header>タグを作ろう
  11. セレクターを書きかえよう
  12. 文字を打ち込もう
  13. 2つ目の見出しを作ろう
  14. セクションを作ろう
  15. 文章をかこもう
  16. 改行をいれよう
  17. 画像を表示させよう
  18. セクションのセレクタを作ろう
  19. セクションに背景をいれよう
  20. 文字の見た目を変えよう
  21. 文字の下に空間を作ろう
  22. 画像と文章を横にならべようセレクタを書こう
  23. セクションに高さをいれよう
  24. セクションの内がわに空間を作ろう
  25. 見出しを作ろう
  26. セクションを作ろう
  27. セクションの背景を変えよう
  28. セクションのCSSを消そう
  29. セレクターを作ろう
  30. クラス名をつけよう1
  31. 高さを変えよう
  32. クラス名をつけよう2
  33. 一人目の見出しを作ろう
  34. 一人目の画像をいれよう
  35. 一人目の文章をかこもう
  36. 箱を作ろう
  37. 二人目の名前と画像に書きかえよう
  38. セレクターをふやそう
  39. 横幅(よこはば)を変えよう
  40. 横ならびにしよう
  41. 空間を作ろう
  42. 三人目の名前と画像に書きかえよう
  43. 高さを変えよう
  44. 名前の背景に色をつけよう
  45. 名前を真ん中にそろえよう
  46. 名前のまわりに空間を作ろう
  47. 文字の大きさを変えよう
  48. 文章にクラスをつけよう
  49. 文字の大きさを変えよう
  50. 文章にクラスをつけよう
  51. 文章の背景を白にしよう
  52. 文章に空間をつけよう
  53. フッターを作ろう
「ズートピア」で行方不明になった動物たちを探すためのWebサイトをつくろう!

レッスン目次 フライングカーペット

87ステップ

  1. キー入力で上に動かそう
  2. キー入力で下に動かそう
  3. ステージを変えよう
  4. gameSetup関数を作ろう
  5. createAladdin関数を作ろう
  6. アラジンのスプライトを作ろう
  7. アラジンのアニメーションを追加しよう
  8. createWall関数を作ろう
  9. 洞窟の壁のスプライトを作ろう
  10. createMagma関数を作ろう
  11. マグマのスプライトを作ろう
  12. アラジンを移動させよう
  13. カメラを移動させよう
  14. for文で壁をくり返し作成しよう
  15. 壁の位置をずらして作ろう
  16. for文でマグマをくり返し作成しよう
  17. マグマの位置をずらして作ろう
  18. ステージを作る関数を作ろう
  19. 岩の変数を作ろう
  20. 岩のスプライトを作ろう
  21. 岩を置く位置の変数を作ろう
  22. スプライトの横の位置を書きかえよう
  23. 岩のスプライトに画像を追加しよう
  24. for文で岩をくり返し作ろう
  25. 岩を作る位置をずらそう
  26. ステージのレイアウトを作ろう
  27. for文を書こう
  28. ステージのレイアウト配列を2行にする準備をしよう
  29. stageLayout.lengthを修正しよう
  30. 上の段と下の段の岩を区別する準備をしよう
  31. imageIndexを作ろう壁を右に移動させよう
  32. マグマを左に移動させよう
  33. スプライトの動きを止めておこう
  34. テキストを表示しよう
  35. テキストを大きくしよう
  36. テキストを中央にそろえよう
  37. 文字のフォントを変えよう
  38. マウスがクリックされたら呼ばれる関数を作ろう
  39. クリックされたらスプライトを動かそう
  40. テキストを表示する時にカメラをオフにしよう
  41. ゲームを管理する変数を作ろう
  42. ゲームモードを初期化しよう
  43. ゲームスタート時にだけテキストを表示しよう
  44. マウスがクリックされたらゲームモードを「プレイ中」に変更しよう
  45. 岩のスプライトのグループを作ろう
  46. ゲームオーバーの関数を作ろう
  47. アラジンをコントロールする関数を作ろう
  48. アラジンコントローラー関数を呼び出そう
  49. アラジンが岩と重なったらゲームオーバーになるようにしよう
  50. ゲームモードを変更しよう
  51. ゲームオーバーのテキストを表示しよう
  52. アラジンとカメラを制限しよう
  53. ゲームオーバー時に曲を再生しよう
  54. 「クリックしてスタート」のテキストを表示しよう
  55. ゲームスタートの設定をしよう
  56. ゲームをセットアップしなおそう
  57. ゲームオーバーの設定をしよう
  58. 上矢印キーを押した時にアラジンを上昇させよう
  59. 下向きの矢印キーを押した時にアラジンが下に動くようにしよう
  60. アラジンのあたり判定の形状(コライダー)を調整しよう
  61. 操作方法のテキストを追加しよう
  62. 画面の上にあたったらゲームオーバーになるようにしよう
  63. 画面の下にあたったらゲームオーバーになるようにしよう
  64. ゴール直前に出てくる岩をなくそう
  65. ゴールを作る関数を作ろう
  66. createGoal関数を呼び出そう
  67. ゴールのスプライトを作ろう
  68. ゴールの画像を追加しよう
  69. ゴールのコライダーを表示してサイズを変更しよう
  70. 出口に着いた時に呼ばれる関数を作ろう
  71. ゲームモードをフィニッシュにしよう
  72. ゲームが終わった時に曲を流そう
  73. ゴールした時にテキストを表示しよう
  74. ゴールした後マウスをクリックしたらもう一度プレイできるようにしよう
  75. ゴールのコライダーの表示を消しておこう
  76. アラジンの移動のコントロールをpositionからvelocityに変えよう
  77. アラジンを進行方向に向かって回転させよう
  78. コインのスプライトを作ろう
  79. コインのグループを作ろう
  80. コインを拾う時に呼ばれる関数を作ろう
  81. コインと重なったら拾うようにしよう
  82. コインのコライダーを見えるようにしよう
  83. コインのコライダーを調整しよう
  84. コインの位置にエフェクトを作ろう
  85. スコアの初期値を設定しよう
  86. 画面の右上にスコアを表示しよう
  87. コインを拾った時にスコアの値を増やそう
横スクロールゲームをつくって、アラジンを洞窟から脱出させよう

※応用編1の内容を含む

レッスン目次 スカイランタン

8ステップ

  1. キャンバスをつくろう
  2. お城の画像を表示しよう
  3. ランタンを表示しよう
  4.     ランタンを増やそう
  5. for文でランタンをくり返し表示しよう
  6. ランタンを下から上に動かそう
  7. ランタンの上昇速度を書きかえよう
  8. ランタンの数をさらに増やそう
「塔の上のラプンツェル」のランタン打ち上げをメディアアートで再現しよう

レッスン目次 魔法の鏡

34ステップ

  1. ピクセルのRGBを取り出そう
  2. ピクセルにRGBAを入れよう
  3. 赤の成分を反転させよう
  4. 緑の成分を反転させよう
  5. 青の成分を反転させよう
  6. グレースケールフィルターの関数を呼び出そう
  7. ピクセルのRGB成分を取り出そう
  8. グレースケールを計算しよう
  9. ピクセルの色をグレースケールに変えよう
  10. セピア調フィルターを作ろう
  11. 白黒フィルターの関数を呼び出そう
  12. ピクセルから赤の成分を取り出そう
  13. 赤の成分を分けるif文を書こう
  14. if文で判定されたピクセルを白く塗りつぶそう
  15. elseを使って残りのピクセルを判定しよう
  16. 白以外の色を黒く塗りつぶそう
  17. mosaic関数を呼び出そう
  18. stepSize変数を用意しよう
  19. y方向にくり返しの魔法を使おう
  20. x方向にくり返しの魔法を使おう
  21. インデックス計算をしよう
  22. ピクセルのRGB成分を取り出そう
  23. 色を指定しよう
  24. モザイクの四角を描こう
  25. マウスで四角の大きさを変えよう
  26. gray関数を呼び出そう
  27. sepia関数を呼び出そう
  28. blackAndWhite関数を呼び出そう
  29. mosaic関数を呼び出そう
  30. フィルターの変数を作ろう
  31. フィルターの変数を初期化しよう
  32. フィルター変数を変えて判定しよう
  33. マウスクリック関数でfilter関数を変化させよう
  34. filter変数の数字の上限を作ろう
さまざまなエフェクトで世界を映す魔法の鏡をつくろう

レッスン目次 ダンジョンエスケープ

41ステップ

  1. 右に歩けるようにしよう
  2. 左に歩けるようにしよう
  3. キーが押されていない時は動かさないようにしよう
  4. ラルフが右向きという情報を代入しよう
  5. ラルフが左向きという情報を代入しよう
  6. ラルフが右を向いている判定をして右向きのアニメーションに切りかえよう
  7. ラルフが左を向いている判定をして左向きのアニメーションに切りかえよう
  8. 接地している時の縦の速度をゼロにしよう
  9. 重力をかけよう
  10. 上キーを押した時にジャンプしよう
  11. 上キーが押されていない時だけ縦の速度をゼロにしよう
  12. ラルフが落下中の時だけジャンプできるようにしよう
  13. ジャンプ音を鳴らそう
  14. ラルフとカギが重なったらpickup関数を呼ぼう
  15. カギを消そう
  16. カギを拾った時の音を鳴らそう
  17. ステージの形を変えて大きな穴を渡ろう
  18. ステージの形を変えてカギを取れるようにしよう
  19. パンチのアニメーションを出そう
  20. 右向きの条件をつけよう
  21. 左向きのパンチアニメーションを入れよう
  22. パンチモードに切りかえよう
  23. 移動モードに切りかえよう
  24. パンチ中は横移動しないようにしよう
  25. パンチの音を鳴らそう
  26. パンチの変数を作ろう
  27. 右パンチのスプライトを作ろう
  28. 左パンチのスプライトも作ろう
  29. パンチとブロックが重なったらcrash関数を呼ぼう
  30. ブロックが壊れた時の音を鳴らそう
  31. 判定が終わったらパンチを消そう
  32. ブロックの位置に破片のスプライトを作ろう
  33. 破片のブロックにアニメーションを作ろう
  34. ブロックを消そう
  35. トゲのタイミングを変更しよう
  36. カギの数をカウントしよう
  37. ドアの画像を変えよう
  38. ドアが開く音を鳴らそう
  39. ドアが開いているかどうかを確認しよう
  40. 開いたドアに重なったらescape関数を呼ぼう
  41. ダンジョンから脱出しよう
ダンジョン脱出ゲームをつくって、「シュガー・ラッシュ」のラルフを救い出そう

レッスン目次 スクールオブフィッシュ

36ステップ

  1. 背景の画像を表示しよう
  2. 魚のクラスを作ろう
  3. 魚を入れる配列を用意しよう
  4. 魚のクラスから、新しい魚を作ろう
  5. 魚を一匹表示しよう
  6. 魚の座標をランダムに初期化しよう
  7. this.positionを使おう
  8. 魚の数の変数を作ろう
  9. 魚のクラスを使ってたくさんの新しい魚を作ろう
  10. 魚の数だけクラスを処理しよう
  11. move関数を使って魚を移動させよう
  12. 魚の速度をゼロで初期化しよう
  13. 魚が向かう先となる目標座標を作って初期化しよう
  14. 魚が泳ぐ時の力の向きを計算しよう
  15. 力の向きを整えよう
  16. directionに力の大きさを掛けて加速度にしよう
  17. 加速度を使って速度を変化させよう
  18. 速度を使って位置を変化させよう
  19. 速度で左右の向きを判定しよう
  20. 速度にリミッターを入れよう
  21. 最高速度をランダムで初期化しよう
  22. リミッターに最高速度を読みこもう
  23. 泳ぎの力をランダムで初期化しよう
  24. 力の向きにランダムな力を読みこもう
  25. 魚がマウスカーソルについてくるようにしよう
  26. 魚の数を増やしてみよう
  27. 泡のクラスを作ろう
  28. 泡の座標を初期化しよう
  29. 泡を1つ表示しよう
  30. 泡の配列と泡の数を用意しよう
  31. 泡のクラスを元に新しい泡をたくさん作ろう
  32. 泡の表示をしよう
  33. 泡の縦の移動速度を初期化しよう
  34. 泡1つを移動させる関数を作ろう
  35. 全ての泡を移動させよう
  36. 泡の大きさをランダムで初期化しよう
マウスを追いかける動きをつくって、魚たちのダンスをアリエルに披露しよう

レッスン目次 フォトギャラリー

40ステップ

  1. 写真を表示しよう
  2. divタグで囲もう
  3. 背景色を指定しよう
  4. divの高さを指定しよう
  5. 背景画像を表示しよう
  6. 画像を真ん中にそろえよう
  7. 上にだけ余白をつけよう
  8. クラスをつけよう
  9. 枠線をつけよう
  10. 写真に影をつけよう
  11. photo変数をつくろう
  12. 写真を切りかえる関数を作ろう
  13. クリックで関数を呼び出そう
  14. ボタンの画像を表示しよう
  15. 画像がクリックされたら写真を変えよう
  16. ボタンの下方向に余白をつけよう
  17. 写真の順番を変える変数を作ろう
  18. 写真の順番を1増やそう
  19. 写真の順番によって写真を変えよう
  20. 2枚目の写真の条件を追加しよう
  21. 写真の番号が3以上になったら0に戻そう
  22. 写真の番号が0の時の画像を追加しよう
  23. クラスを使って画像を表示させよう
  24. 呼び出す関数の名前を変えよう
  25. 写真を戻す関数を作ろう
  26. アラートを表示しよう
  27. クリックで関数を呼び出そう
  28. alertを消そう
  29. next関数の中身をコピペしよう
  30. photoNumberをへらそう
  31. photoNumberの変数をリセットしよう
  32. setPhoto関数を作ろう
  33. setPhotoを呼び出そう
  34. 表示する写真の枚数を増やそう
  35. nextPhoto関数の条件を直そう
  36. backPhoto関数の条件を直そう
  37. 4枚目の画像を追加しよう
  38. 写真をくり返す条件を直そう
  39. 画像にホバーした時にサイズを大きくしよう
  40. だんだん大きくなるようにしよう
本格的なフォトギャラリー付きWebサイトをつくろう

レッスン目次 クイーンズカード

48ステップ

  1. 背景を表示しよう
  2. スプライトを作ろう
  3. スプライトにオモテの絵を追加しよう
  4. カードの絵を変えてみよう
  5. 絵をヨコに並べる準備をしよう
  6. 変数xを変えてみよう
  7. for文を使ってくり返そう
  8. 絵をタテに並べる準備をしよう
  9. 変数yを変えてみよう
  10. for文を使ってカードをタテに並べよう
  11. カードの絵を変えてみよう
  12. 12枚のカードのタイプを配列で表そう
  13. カードのタイプを配列から持ってこよう
  14. 配列の数字を変えてみよう
  15. 変数を使って並べよう
  16. カードがクリックされた時に呼ばれる関数を作ろう
  17. スプライトがクリックされた時に呼び出される関数をセットしよう
  18. スプライトの絵をオモテ面に変えよう
  19. カードをめくった時の音を再生しよう
  20. クリックされた時にカードのオモテとウラを入れかえよう
  21. ウラ面を追加しているコードをコメントアウトしよう
  22. カードをシャッフル関数を作ろう
  23. カードをシャッフルする関数を呼び出そう
  24. カードをシャッフルする処理を書こう
  25. コメントアウトを戻そう
  26. スコア数を入れる変数を作ろう
  27. スコアをテキストで表示しよう
  28. テキストの設定をしよう
  29. スコアにゲットした宝石の数を足そう
  30. ゲーム終了の処理を行う関数を作ろう
  31. 100点を超えたらゲームを終了させよう
  32. クリックしたカードがオモテだった時に何もしないようにしよう
  33. else文を削除しようめくられたカードの枚数を数えよう
  34. カードが2枚めくられたときを判定しよう
  35. めくられたカードを保存する変数を作ろう
  36. 1回目にめくったカードを変数に保存しよう
  37. 2回目にめくったカードを変数に保存しよう
  38. 2枚目をめくった時にペアがそろった時のを鳴らしてflippedCountもゼロにしよう
  39. カウントダウンタイマーを作ろう
  40. カードをウラ面に戻そう
  41. ウラ面に戻すときに音楽を再生して、めくった枚数をリセットしよう
  42. カードのタイプをカードの中に保存しよう
  43. 1枚目と2枚目のカードが一緒だった時の条件を書こう
  44. else文を追加しよう
  45. 変数pairCountを作ろう
  46. ペアの数を数えよう
  47. ペアが全てそろった時に音楽を鳴らそう
  48. ゲーム終了時の画像を表示しよう
「不思議の国のアリス」の神経衰弱ゲームをつくって、女王と勝負しよう

レッスン目次 ハニーハント

47ステップ

  1. キャンバスを作ろう
  2. 背景の色を指定しよう
  3. 木のスプライトを作ろう
  4. スプライトを表示しよう
  5. 木の画像を追加しよう
  6. プーさんのスプライトを作ろう
  7. 風船のスプライトを作ろう
  8. 風船の位置を調整しよう
  9. BGMを流そう
  10. gamePlaying関数を作ろう
  11. プーさんを上に移動させよう
  12. 風船をプーさんの位置に合わせよう
  13. カメラを移動させよう
  14. for文で木をくり返し作成しよう
  15. 木の位置をずらして作ろう
  16. プーさんをマウスで移動できるようにしよう
  17. 風船をプーさんの位置に合わせよう
  18. プーさんの速さを調節しよう
  19. プーさんが画面の左端を越えないようにしよう
  20. プーさんが画面の右端を越えないようにしよう
  21. ハチミツのスプライトを作ろう
  22. ハチミツをたくさん作ろう
  23. ハチミツのスプライトのグループを作ろう
  24. ハチミツのグループを追加しよう
  25. ハチミツのスプライトを消そう
  26. プーさんとハチミツの当たり判定をしよう
  27. ハチミツを拾った時に曲を再生しよう
  28. ハチミツの数を表示する背景画像を表示しよう
  29. カウンターはカメラに影響されないようにしよう
  30. ハチミツを拾った数を入れる変数を作ろう
  31. ハチミツの数を初期化しよう
  32. ハチミツの数をテキストで表示しよう
  33. 文字の大きさや位置を調整しよう
  34. ハチミツの数に1を足そう
  35. 文字の色を変えてみよう
  36. フォントを変えてみよう
  37. フォントを太字にしよう
  38. gameMode変数を作ろう
  39. ゲームモードを初期化しよう
  40. gameCompleted関数を作ろう
  41. if文でゲームモードをgamePlayingに切り替えよう
  42. ゲームモードにgameCompletedを追加しよう
  43. ハチミツを5つ集めたらゲームを完了させよう
  44. ゲームをコンプリートしたら音楽を鳴らそう
  45. ゲームをコンプリートしたら文字を表示しよう
  46. 文字を大きくして、真ん中に寄せよう
  47. ゲームモードの切り替えをswitch-case文に書き換えよう
風船に乗ったプーさんを動かしてハチミツを集めるゲームをつくろう

レッスン目次 KAWARA割り

47ステップ

  1. 背景画像を表示しよう
  2. 曲を再生しよう
  3. ベイマックスのスプライトを作ろう
  4. スプライトを全て表示しよう
  5. ベイマックスのスプライトに手を上げている画像を追加しよう
  6. ベイマックスのスプライトに手を下げている画像を追加しよう
  7. 手を下げている画像に変えてみよう
  8. マウスが押されたら画像を変えよう
  9. マウスが放されたら画像を変えよう
  10. 破壊音を再生しよう
  11. 瓦のスプライトを作ろう
  12. createKawaras関数を呼び出そう
  13. kawaraImagesの配列から画像を追加しよう
  14. 変数iの数字を変えてみよう
  15. for文を使ってaddImageをくり返そう
  16. 瓦の画像を切り替えよう
  17. 瓦の枚数をランダムで決めよう
  18. 瓦の枚数によって画像を変えよう
  19. マウスを放した時に瓦の画像を切り替えよう
  20. 瓦の枚数を1枚ずつ減らそう
  21. 瓦の画像を枚数に合わせて変えよう
  22. 新しくfor文を作ってみよう
  23. 瓦のスプライトを作るコードに変数jを組み合わせよう
  24. mousePressed関数をbaymaxMove関数に書き換えよう
  25. mouseReleased関数をbaymaxChop関数に書き換えよう
  26. 瓦の上でマウスが押された時に関数を呼び出そう
  27. ベイマックスのX座標を変えよう
  28. 瓦の上でマウスを放した時に関数を呼び出そう
  29. gamePlaying関数を作り、文字を表示するコードを書こう
  30. gamePlaying関数を呼び出そう
  31. 文字をスタイリングしよう
  32. タイマー表示の準備をしよう
  33. スコアとタイマー表示に必要な変数を作ろう
  34. 変数を初期化しよう
  35. スコアとタイマーをテキスト表示しよう
  36. スコアが1ずつ増えるようにしよう
  37. タイマーを表示しよう
  38. if文でタイマーを減らす条件を作ろう
  39. タイマーがゼロになったら何もしない処理を書こう
  40. ゲームモードの変数を追加しよう
  41. ゲームモードを初期化しよう
  42. switch-case文でゲームモードを管理しよう
  43. gameFinished関数を作ろう
  44. switch-case文にゲーム終了の条件を追加しよう
  45. タイマーが0になったらゲーム終了にしよう
  46. ゲームが終了したらスコアを大きく表示しよう
  47. ゲームが終了したら音を鳴らそう
ベイマックスを強化するために瓦割りゲームをつくろう

レッスン目次 宝石パズル

89ステップ

  1. キャンバスを作ろう
  2. 背景に画像を表示しよう
  3. スコアボードの画像を表示しよう
  4. BGMをループ再生させよう
  5. ボードを作る関数を作ろう
  6. 宝石のスプライトを作ろう
  7. スプライトを表示しよう
  8. 宝石の画像を追加しよう
  9. 宝石をくり返し作成しよう
  10. 宝石の画像をくり返し追加しよう
  11. 宝石の色をランダムに設定しよう
  12. 5色の宝石を表示しよう
  13. 宝石の位置情報を保存しよう
  14. セルの位置を計算する関数を作ろう
  15. セルの位置を計算する関数を使おう
  16. 宝石のスプライトを配列に保存してみよう
  17. 宝石をクリックしたときに呼ばれる関数を作ろう
  18. 宝石の大きさを変えよう
  19. 宝石の情報を設定する関数を作ろう
  20. クリックした時表示される宝石の種類を変えよう
  21. ゲーム管理の変数を作ろう
  22. 条件判定しよう
  23. ゲームモードを変更しよう
  24. コードを消してみよう
  25. 宝石の色を入れる変数を作ろう
  26. 宝石を入れ替えよう
  27. ゲームモードの関数を作ろう
  28. それぞれのモードをコントロールしよう
  29. 宝石が移動している時間を数える変数を作ろう
  30. タイマーに時間をセットしよう
  31. 宝石がクリックされたらゲームモードを切り替えるようにしよう
  32. タイマーをカウントダウンしよう
  33. タイマーがゼロになったらゲームモードを変更しよう
  34. 宝石のスプライトに色の情報を保存しよう
  35. 関数の引数を増やそう
  36. 宝石のスプライトに速度を指定しよう
  37. 宝石の座標を書き換えよう
  38. 宝石の動きをストップさせる関数を作ろう
  39. 宝石の動きを止める関数を呼び出そう
  40. 2重for文を作ろう
  41. 宝石のスプライトの速度をゼロにセットしよう
  42. 宝石の位置をそろえよう
  43. 宝石が揃った時の関数を作ろう
  44. 宝石をゲットした時の関数を呼び出そう
  45. 宝石をゲットした時に音を再生しよう
  46. エフェクトのスプライトを作ろう
  47. エフェクトのアニメーションを追加しよう
  48. エフェクトに表示時間を設定しよう
  49. エフェクトをくり返そう
  50. 宝石がそろった判定をするif文を書こう
  51. 宝石が3つ並んでいる判定をする関数を作ろう
  52. 宝石が光るか確認してみよう
  53. 全ての宝石に対して判定させよう
  54. 宝石が横に3つ並んでいるかどうかを判定しよう
  55. 横に並んだ宝石の色がそろっているかをチェックしよう
  56. trueをfalseにかきかえよう
  57. 宝石が横に二つ並んでいる判定をしよう
  58. 宝石が三つ光るようにしよう
  59. 全てのisCollectedをfalseにしよう
  60. 宝石が縦に3つ並んでいるかどうかを判定しよう
  61. 集めた宝石の数を計算する関数を作ろう
  62. count変数を作ろう
  63. 同じ色が三つ並んだ宝石の数を数えよう
  64. ゲットした宝石の数を数える関数を使ってみよう
  65. ゲットした宝石があるかどうか判定しよう
  66. 色の揃った宝石を消して並べなおす関数を作ろう
  67. 左から処理を行うためのfor文を追加しよう
  68. 色の並んだ宝石を下から数えよう
  69. 消えた宝石の数の分だけ移動させる処理を書こう
  70. 画面の外側に新しく宝石を並べ直そう
  71. 宝石を落とす関数を呼び出そう
  72. movingTimerをセットし直そう
  73. 宝石が隣同士か判定しよう
  74. 隣り合う宝石がクリックされたかチェックしよう
  75. 隣り合う宝石ではなかった場合の処理を設定しよう
  76. 宝石が縦に並んでいるか判定しよう
  77. 宝石が連続して縦に並んでいるか判定しよう
  78. 宝石が連続して横に並んでいるか判定しよう
  79. angle変数を作ろう
  80. 角度を変えてみよう
  81. クリックした宝石の大きさを変えよう
  82. angleの増えかたを変えよう
  83. 宝石の大きさを戻そう
  84. スコア数を入れる変数を作ろう
  85. スコアをテキストで表示しよう
  86. テキストの設定をしよう
  87. スコアにゲットした宝石の数を足そう
  88. ゲーム終了の処理を行う関数を作ろう
  89. 100点を超えたらゲームを終了させよう
7人のこびとたちが掘りだした宝石を使って落ち物パズルをつくろう

レッスン目次 シュガー・ラッシュ

52ステップ

  1. キャンバスを作ろう
  2. ゲーム全体の初期化を行う関数を作ろう
  3. ゲーム全体の初期化を行う関数を呼び出そう
  4. 道路のスプライトを作ろう
  5. スプライトを表示しよう
  6. 道路の画像を追加しよう
  7. ヴァネロペのスプライトを作ろう
  8. ヴァネロペのアニメーションを追加しよう
  9. BGMを流そうBGMと一緒に、走行音を流そう
  10. ヴァネロペを下に移動させよう
  11. ゲームプレイの処理をする関数を作ろう
  12. ゲームプレイの処理をする関数を呼び出そう
  13. カメラを移動させよう
  14. 道路をくり返し作成しよう
  15. 道路のスプライトのグループを作り、道路スプライトを追加しよう
  16. ヴァネロペをキーで移動させよう
  17. ヴァネロペがコースの端を越えないようにしよう
  18. ライバルを作成する関数を作ろう
  19. ライバルを作成する関数を呼び出そう
  20. ライバルのスプライトを作成しよう
  21. ライバルの配置を変えてみよう
  22. ライバルをレーンにそって、ランダムに配置しよう
  23. ライバルにアニメーションを追加しよう
  24. アニメーションをランダムに変えよう
  25. ライバルの速度を設定しよう
  26. ライバルの数を入れる変数を作ろう
  27. ライバルを増やそう
  28. ライバルのグループを作ろう
  29. ヴァネロペがライバルにぶつかった時の関数を作ろう
  30. ゲームオーバーでサウンドを停止させよう
  31. ゲームオーバーでスプライトの動きを止めよう
  32. ヴァネロペに当たり判定をつけよう
  33. ヴァネロペにコライダーを追加しよう
  34. ゴールのスプライトを作り、画像を追加しよう
  35. ゴールの縦の位置を調整しよう
  36. ゲーム終了の処理をする関数を作ろう
  37. サウンドを停止させよう
  38. 全てのスプライトの動きを止めよう
  39. ヴァネロペがゴールしたときのコードを書こう
  40. ゴールした時の関数を呼び出そう
  41. ゲームモードの変数を作ろう
  42. ゲームモードを変えてみよう
  43. ゲームモードを切り替えよう
  44. ゲームプレイ中の処理を書こう
  45. ゲームオーバーの時の処理を書こう
  46. ゲームモードをゲームオーバーに切り替えよう
  47. ゲームオーバーのサウンドを流そう
  48. ゲームをゴールしたら文字を表示しよう
  49. ゴールしたときにゲームモードを切り替えよう
  50. テキストの設定をしよう
  51. 文字に縁を追加しよう
  52. ゴールのサウンドを再生しよう
「シュガー・ラッシュ」のレースゲームをつくろう

レッスン目次 スノウマジック

16ステップ

  1. 雪の粒のクラスを作ろう
  2. クリックで雪の粒を作ろう
  3. 雪の粒を動かそう
  4. 雪の粒を消そう
  5. 雪の粒の速度を変えよう
  6. 雪の粒をクルンと回転させよう
  7. 雪の粒の軌道を変えよう
  8. 雪の粒ごとに動きを変えよう
  9. 軌跡を表現しよう
  10. 雪の粒を増やそう
  11. 雪の粒1つ1つを変化させよう
  12. 空気抵抗を大きくしよう
  13. 雪の粒の速さを変えよう
  14. 背景の透明度を変えよう
  15. 雪の粒が表示される時間を変えよう
  16. 雪の粒の動きに変化を出そう
「アナと雪の女王」の氷の魔法をプログラミングで再現しよう

レッスン目次 ドラゴン&ソード

10ステップ

  1. 前に歩くアニメーションに切り替えよう
  2. 後ろに歩くアニメーションに切り替えよう
  3. ガードのアニメーションに切り替えよう
  4. 炎を上むきにはね返そう
  5. 王子を後ずさりさせよう
  6. 攻撃のアニメーションに切り替えよう
  7. 剣を振る音を再生しよう
  8. 通常モードに切り替えよう
  9. アニメーションのコマを巻き戻そう
  10. 剣の当たり判定を作ろう
格闘ゲームをつくって、「眠れる森の美女」のドラゴンを倒そう

レッスン目次 ミーミルの課外授業
(外部環境レッスン)

32ステップ

  1. ブラウザを使おう
  2. Bracketsを検索しよう
  3. Bracketsをダウンロードしよう
  4. Bracketsをインストールしよう
  5. Bracketsを使おう
  6. ミーミルからのプレゼントを受け取ろう
  7. zipを展開しよう
  8. フォルダをBracketsで読み込もう
  9. プレビューしてみよう
  10. 画面を左右に並べよう
  11. DOCTYPEを宣言しよう
  12. htmlタグを書こう
  13. インデントしよう
  14. headタグを書こう
  15. bodyタグを書こう
  16. 文字化けを防ごう
  17. titleタグを書こう
  18. h1タグを書こう
  19. h2タグを書こう
  20. 画像を表示しよう
  21. 画像の場所を指定しよう
  22. 段落を作って文章を書こう
  23. htmlファイルを保存しよう
  24. h1の色を変えよう
  25. HTMLとCSSをつなげよう
  26. h1の大きさを変えよう
  27. h1のフォントを変えよう
  28. h2の色を変えよう
  29. divタグを書こう
  30. 文字と画像を真ん中に移動しよう
  31. 画像に枠をつけよう
  32. 画像の角を丸くしよう
ご自身のパソコンで、Webデザイン作品をつくるためのセットアップを学ぼう

レッスン目次 ミーミルの課外授業
(外部環境レッスン)

21ステップ

  1. ミーミルの課外授業
  2. メディアアート 編
  3. Bracketsを開こう
  4. ミーミルからのプレゼントを受け取ろう
  5. zipを展開しよう
  6. フォルダをBracketsで読み込もう
  7. プレビュー画面を用意しよう
  8. HTMLとlibraryをつなげよう
  9. HTMLとJavaScriptをつなげよう
  10. htmlファイルを保存しよう
  11. JavaScriptファイルをクリックしよう
  12. setup関数を作ろう
  13. キャンバスを作ろう
  14. draw関数を作ろう
  15. 背景をぬりつぶそう
  16. 円を描こう
  17. 輪郭(りんかく)を消そう
  18. 背景の色を変えよう
  19. 小さな円を書こう
  20. 真ん中の座標をマウスの位置に置き換えよう
  21. 色をぬろう
  22. 背景に透明度をつけよう
  23. 別の作品を作る方法
ご自身のパソコンで、メディアアート作品をつくるためのセットアップを学ぼう

レッスン目次 花火

20ステップ

  1. シェーダーを使う準備をしよう
  2. 変数textureFromJSを作ろう
  3. シェーダー同士で座標データを連携しよう
  4. ピクセルの色を設定しよう
  5. VertexShaderで座標を調整しよう
  6. モザイクの細かさを決めよう
  7. モザイクを表現する計算式を書こう
  8. モザイクの細かさを変えてみよう
  9. mosaic関数を作ろう
  10. mosaic関数を呼び出そう
  11. 計算した結果を入れる変数を作ろう
  12. 計算した結果を返そう
  13. 関数の中でモザイクエフェクトを計算しよう
  14. モザイクの細かさを変えよう
  15. mirror関数を作って呼び出そう
  16. 計算した結果を入れる変数を作ろう
  17. 計算した結果を返そう
  18. 映像が左右対象に映るように計算しよう
  19. 映像が上下対象に映るように計算しよう
  20. ripple関数を作って呼び出そう
  21. 計算した結果を入れる変数を作ろう
  22. 計算した結果を返そう
  23. distance関数を使って距離を計算しよう
  24. sin関数を使って波紋の形を作ろう
  25. 波紋に動きをつける準備をしよう
  26. 波紋の動きを調整しよう
  27. 波紋の動きをアレンジしてみよう 28.これまでに作ったエフェクトを表示しよう
  28. エフェクトの関数を2つ組み合わせてみよう
  29. エフェクトの関数を3つ組み合わせてみよう
  30. 自由に書きかえよう
「塔の上のラプンツェル」の花火のシーンをメディアアートで再現しよう

レッスン目次 クイーンズカード(応用篇)

51ステップ

  1. 背景の画像を新しくしよう
  2. カードを左にずらそう
  3. Roundの数字を表示しよう
  4. 残りの数字を表示しよう
  5. 新しい関数を追加しよう
  6. image関数をdrawNumber関数に変えよう
  7. drawNumberのnumber引数の数字を変えよう
  8. 一番右側の桁の数字が表示されるようにしよう
  9. 数字を5つ並べる準備をしよう
  10. 数字を文字列に変えて数字の文字の数を数えよう
  11. sizeの間隔で数字が並ぶようにコードを書きかえよう
  12. Roundの数字を表示するdrawNumberのsize引数の部分に数字を追加しよう
  13. 全ての桁が正しく表示されるようにしよう
  14. 数字を変数で用意しよう
  15. scoreNumberをカウントアップしよう
  16. 変数の初期化の数字を変えよう
  17. トランプのペアがそろったらスコアが100点入るようにしよう
  18. 1combo変数を使って点数計算をしよう
  19. コンボのテーブルを用意しよう
  20. コンボのテーブルをつかって点数計算をしよう
  21. roundPlayという関数を作ろう
  22. 「START!」を表示する関数を作ろう
  23. roundStart関数を呼び出そう
  24. gameMode変数を初期化しよう
  25. timerに時間をセットしよう
  26. タイマーが0になったらプレイ開始しよう
  27. プレイ中以外はトランプをクリックできないようにしよう
  28. 「Completed!」を表示する関数を作ろう
  29. トランプのペアが6つ全部そろった時にgameModeをroundCompletedに変えよう
  30. コンプリートした時に楽曲を鳴らすコードを書こう
  31. addPoints関数を作ろう
  32. pointsXとpointsYの変数を追加しよう
  33. pointsXとpointsYにマウスの座標を代入しよう
  34. else if文を追加しよう
  35. ポイント表示用のタイマーとgameModeをセットしよう
  36. タイマーが0になったらgameModeを'roundPlay'に変えよう
  37. ポイントの表示をコンボに対応させよう
  38. addPoints関数の中でpointsY--と書こう
  39. 「GAMEOVER」を表示する関数を作ろう
  40. gameOver関数を呼び出そう
  41. gameOverの表示の制御をしよう
  42. ミスをしたらlastNumberを1つ減らそう
  43. ゲームオーバーの判定をしよう
  44. roundSetup関数を作ろう
  45. gameModeを'roundSetup'に設定しよう
  46. タイマーをセットしよう
  47. 数秒「Completed!」を表示してからgameModeを'roundSetup'に設定しよう
  48. ペアの数を0にリセットしよう
  49. 残り回数をリセットするための変数を追加しよう
  50. 新しいラウンドを始める前にスプライトを全て消そう
  51. 残り回数の初期化が5より小さくならないようにしよう
基礎編の「不思議の国のアリス」の神経衰弱ゲーム細かなルールが加わえよう

レッスン目次 フライングカーペット(応用篇)

85ステップ

  1. gameSetup関数を作ろう
  2. createAladdin関数を作ろう
  3. アラジンのスプライトを作ろう
  4. アラジンのアニメーションを追加しよう
  5. createWall関数を作ろう
  6. 洞窟の壁のスプライトを作ろう
  7. createMagma関数を作ろう
  8. マグマのスプライトを作ろう
  9. アラジンを移動させよう
  10. カメラを移動させよう
  11. for文で壁をくり返し作成しよう
  12. 壁の位置をずらして作ろう
  13. for文でマグマをくり返し作成しよう
  14. マグマの位置をずらして作ろう
  15. ステージを作る関数を作ろう
  16. 岩の変数を作ろう
  17. 岩のスプライトを作ろう
  18. 岩を置く位置の変数を作ろう
  19. スプライトの横の位置を書きかえよう
  20. 岩のスプライトに画像を追加しよう
  21. for文で岩をくり返し作ろう
  22. 岩を作る位置をずらそう
  23. ステージのレイアウトを作ろう
  24. for文を書こう
  25. ステージのレイアウト配列を2行にする準備をしよう
  26. stageLayout.lengthを修正しよう
  27. 上の段と下の段の岩を区別する準備をしよう
  28. imageIndexを作ろう
  29. 壁を右に移動させよう
  30. マグマを左に移動させよう
  31. スプライトの動きを止めておこう
  32. テキストを表示しよう
  33. テキストを大きくしよう
  34. テキストを中央にそろえよう
  35. 文字のフォントを変えよう
  36. マウスがクリックされたら呼ばれる関数を作ろう
  37. クリックされたらスプライトを動かそう
  38. テキストを表示する時にカメラをオフにしよう
  39. ゲームを管理する変数を作ろう
  40. ゲームモードを初期化しよう
  41. ゲームスタート時にだけテキストを表示しよう
  42. マウスがクリックされたらゲームモードを「プレイ中」に変更しよう
  43. 岩のスプライトのグループを作ろう
  44. ゲームオーバーの関数を作ろう
  45. アラジンをコントロールする関数を作ろう
  46. アラジンコントローラー関数を呼び出そう
  47. アラジンが岩と重なったらゲームオーバーになるようにしよう
  48. ゲームモードを変更しよう
  49. ゲームオーバーのテキストを表示しよう
  50. アラジンとカメラを制限しよう
  51. ゲームオーバー時に曲を再生しよう
  52. 「クリックしてスタート」のテキストを表示しよう
  53. ゲームスタートの設定をしよう
  54. ゲームをセットアップしなおそう
  55. ゲームオーバーの設定をしよう
  56. 上矢印キーを押した時にアラジンを上昇させよう
  57. 下向きの矢印キーを押した時にアラジンが下に動くようにしよう
  58. アラジンのあたり判定の形状(コライダー)を調整しよう
  59. 操作方法のテキストを追加しよう
  60. 画面の上にあたったらゲームオーバーになるようにしよう
  61. 画面の下にあたったらゲームオーバーになるようにしよう
  62. ゴール直前に出てくる岩をなくそう
  63. ゴールを作る関数を作ろう
  64. createGoal関数を呼び出そう
  65. ゴールのスプライトを作ろう
  66. ゴールの画像を追加しよう
  67. ゴールのコライダーを表示してサイズを変更しよう
  68. 出口に着いた時に呼ばれる関数を作ろう
  69. ゲームモードをフィニッシュにしよう
  70. ゲームが終わった時に曲を流そう
  71. ゴールした時にテキストを表示しよう
  72. ゴールした後マウスをクリックしたらもう一度プレイでき73.るようにしよう
  73. ゴールのコライダーの表示を消しておこう
  74. アラジンの移動のコントロールをpositionからvelocityに変えよう
  75. アラジンを進行方向に向かって回転させよう
  76. コインのスプライトを作ろう
  77. コインのグループを作ろう
  78. コインを拾う時に呼ばれる関数を作ろう
  79. コインと重なったら拾うようにしよう
  80. コインのコライダーを見えるようにしよう
  81. コインのコライダーを調整しよう
  82. コインの位置にエフェクトを作ろう
  83. スコアの初期値を設定しよう
  84. 画面の右上にスコアを表示しよう
  85. コインを拾った時にスコアの値を増やそう
基礎編の横スクロールゲームにキャラクターの動きや新しい操作が加わえよう

レッスン目次 スクールオブフィッシュ(応用篇)

8ステップ

  1. シェーダーを使う準備をしよう
  2. 変数textureFromJSを作ろう
  3. シェーダー同士で座標データを連携しよう
  4. ピクセルの色を設定しよう
  5. 座標の位置を調整してWEBGLに渡そう
  6. 新しい座標の変数を作ろう
  7. 変数newTexCoord.xを計算しよう
  8. 変数newTexCoord.yを計算しよう
基礎編の作品に、水中のゆらぎをシェーダーで加えることで、より幻想的な表現に挑戦しよう

レッスン目次 フォトギャラリー(応用篇)

34ステップ

  1. 写真を表示しよう
  2. absoluteを使って配置しよう
  3. 写真用の箱を作ろう
  4. 写真を装飾しよう
  5. 背景を表示しよう
  6. 写真を増やそう
  7. absoluteを使って配置しよう
  8. 変数を作ろう
  9. 写真を横に並べよう
  10. 写真を5枚に増やそう
  11. for文を使って並べよう
  12. 背景の箱を横にのばそう
  13. 変数を作ろう
  14. 関数を作ろう
  15. 関数を呼び出そう
  16. 写真をスライドさせよう
  17. 写真のインデックスを作ろう
  18. スライドをループさせよう
  19. ボタンを作ろう
  20. ボタン用の箱を配置しよう
  21. 戻るボタンを配置しよう
  22. 進むボタンを配置しよう
  23. clickNextButton関数を作ろう
  24. clickBacktButton関数を作ろう
  25. 背景にCSSを整理しよう
  26. 背景を増やそう
  27. 背景を動かす準備をしよう
  28. 背景を動かそう
  29. サムネイルを表示しよう
  30. サムネイルを配置しよう
  31. clickThumbnail関数を作ろう
  32. サムネイルに触れた時のCSSを作ろう
  33. サムネイルが選ばれた時用のCSSを作ろう
  34. selectThumbnail関数を作ろう
基礎編で作ったフォトギャラリーにスライドアニメーションを加えよう

レッスン目次 ハニーハント(応用篇)

37ステップ

  1. ハチのプライトを作ろう
  2. ハチのスプライトに画像を追加しよう
  3. ハチを移動させよう
  4. ハチをバラバラに動かそう
  5. ハチをバラバラに動かそう
  6. ハチの画像を切りかえよう
  7. ハチのスプライトを消そう
  8. 風船にあたり判定をつけよう
  9. ゲームモードをgameOverに切り替えよう
  10. gameEnd関数を作ろう
  11. ハチのあたり判定を調整しよう
  12. 風船のスプライトに画像を追加しよう
  13. balloonNumberを設定しよう
  14. beeAttack関数と組み合わせよう
  15. 地上を作ろう
  16. 地上を移動させよう
  17. 雲を作ろう
  18. 雲を移動させよう
  19. gameSetup関数を作ろう
  20. mouseClicked関数を作ろう
  21. ゲームモードを判定する条件文を書こう
  22. テキストを表示しよう
  23. 風船アイテムを作ろう
  24. 風船アイテムを動かそう
  25. balloonCatch関数を作ろう
  26. ハチミツのカウンターを動かそう
  27. のこり時間を表示しよう
  28. タイマーの処理を作ろう
  29. テキストを表示しよう
  30. 風船の個数によってプーさんの速度を変えてみよう
  31. プーさんの横移動の速度を調整しよう
  32. ハチミツの位置を調整しよう
  33. ハチミツの数を増やそう
  34. ハチの数を増やそう
  35. ハチの速度を調整しよう
  36. 風船アイテムの位置を調整しよう
  37. ハチミツを拾った時に増える時間を調整しよう
基礎編の作品に障害物を置いたり、残り時間を追加して、何度も遊びたくなるようなゲームに挑戦しよう

レッスン目次 シュガーラッシュ(応用篇)

136ステップ

  1. キャンディ変数を作ろう
  2. キャンディのスプライトを作成しよう
  3. キャンディに画像を追加しよう
  4. キャンディを配置する処理を作ろう
  5. スプライトを作成する処理を移そう
  6. 画像を追加する処理を移そう
  7. キャンディを生成する処理を消そう
  8. キャンディ配置の処理を呼び出そう
  9. キャンディをグループに変えよう
  10. 新しくキャンディスプライトを作成しよう
  11. キャンディグループを作成しよう
  12. キャンディをグループに追加しよう
  13. キャンディ数を設定しよう
  14. キャンディをたくさん出そう
  15. ループ処理でキャンディの位置を設定しよう
  16. キャンディの位置をランダムにしよう
  17. キャンディの見た目をランダムで変えよう
  18. キャンディ取得の処理を作ろう
  19. ヴァネロペのスピードを増やそう
  20. キャンディ取得の処理を呼び出そう
  21. キャンディを消そう
  22. アイテム取得のサウンドを作ろう
  23. アイテム取得のサウンドを再生しよう
  24. 時間を計る変数を作ろう
  25. フレーム数を設定しよう
  26. フレーム数を増やそう
  27. 関数の名前を書き換えよう
  28. ゴールしたときの処理を書き換えよう
  29. ゲームおわりの処理を新しく作ろう
  30. ゲームおわりの処理で時間を表示しよう
  31. 「GOAL」の文字を表示しよう
  32. ゴールできたときの処理を書き換えよう
  33. 時間表示の変数を作ろう
  34. フレーム数を「秒」になおそう
  35. 時間を「秒」で表示しよう
  36. 「秒」の小数部分を表示しないようにしよう
  37. ゲーム結果の装飾を表示しよう
  38. ゴール結果の表示を設定しよう
  39. ラップ時間の表示を設定しよう
  40. ラップ時間を表示する位置を変更しよう
  41. 時間表示の処理を作ろう
  42. 時間の「分」を表示する.変数を作ろう
  43. 時間の「分」の部分を計算しよう
  44. 時間の「秒」を表示する変数を作ろう
  45. 時間から「分」を引いて秒数を計算しよう
  46. 「100分の1秒」を表示する処理に書き換えよう
  47. 「100分の1秒」を表示する変数を作ろう
  48. 「100分の1秒」を計算しよう
  49. 時間を単位で分ける処理を呼び出そう
  50. 時間を「分 : 秒.100分の1秒」と表示しよう
  51. 最大ラップ数を設定しよう
  52. ライバルを表示する回数を変更しよう
  53. キャンディを表示する回数を変更しよう
  54. 道路を表示する回数を変更しよう
  55. ゴール変数をゴールグループに書き換えよう
  56. ゴールのグループを作ろう
  57. ゴールを作るためのループ処理を作ろう
  58. スプライトの変数を作ろう
  59. ゴールグループにスプライトを追加しよう
  60. ゴール判定の位置を新しく作ろう
  61. ゴール判定の位置を変更しよう
  62. スプライトを生成する位置を変更しよう
  63. ゴールのスプライトを3回生成しよう
  64. ゴール判定の位置を設定しよう
  65. ラップ数を数える変数を作ろう
  66. はじめのラップ数を設定しよう
  67. ゴール判定の条件を変更しよう
  68. ゴールする条件を分岐しよう
  69. ラップ数を増やそう
  70. ラップ時間を保存する配列を作ろう
  71. 配列にラップ時間を保存しよう
  72. フレームを元に戻そう
  73. 時間を表示する回数を設定しよう
  74. ラップ時間を配列から取り出そう
  75. 時間表示の処理を呼び出そう
  76. ラップごとの時間を表示しよう
  77. 時間を表示する位置を変更しよう
  78. 「TOTAL TIME」の文字を表示しよう
  79. 合計時間の表示を設定しよう
  80. 合計時間を初期化しよう
  81. 合計時間を計算するループ処理を作ろう
  82. 合計時間を計算しよう
  83. 装飾の表示を整えよう
  84. 合計時間の表示を整えよう
  85. 時間表示の処理を呼びだそう
  86. 時間を表示しよう
  87. 単位で分けた時間を表示しよう
  88. カメラの影響をなくそう
  89. 時間の装飾を表示しよう
  90. 装飾を表示する位置を変更しよう
  91. ゴール結果の表示を設定しよう
  92. 「LAP TIME」を表示する位置を変更しよう
  93. 「TOTAL TIME」を表示する位置を変更しよう
  94. ラップごとの時間を表示する位置を変更しよう
  95. 合計時間を表示する位置を変更しよう
  96. ゲームオーバーの処理を作ろう
  97. テキストの表示を設定しよう
  98. ゲームオーバーの文字を表示しよう
  99. ライバルと当たった時の処理を呼び出そう
  100. 「LAP」の文字を表示しよう
  101. 現在のラップ数を表示しよう
  102. ラップ数の装飾を表示しよう
  103. ポップアップ表示を設定しよう
  104. ラップ数の表示を設定しよう
  105. ポップアップ表示用のタイマーを作ろう
  106. ポップアップ表示のタイマーを設定しよう
  107. タイマーをセットしよう
  108. タイマーを減らす条件を書こう
  109. ポップアップ表示のタイマーを減らそう
  110. ラップ数で処理を変える条件を書こう
  111. ゲームスタートの処理を作ろう
  112. ゲームモードによって処理を変えよう
  113. ゲームスタートの処理を作ろう
  114. ゲームモードを「gameStart」にしよう
  115. 全てのスプライトの動きを止めよう
  116. マウスクリックの処理を作ろう
  117. マウスクリックの処理でゲームモードを変えよう
  118. マウスクリックの処理でスプライトを動かそう
  119. 「Click to Start」の文字を表示しよう
  120. ゲームスタートのテキスト表示を設定をしよう
  121. ゲームモードがゲームオーバーの時という条件を作ろう
  122. 全てのスプライトを消そう
  123. ゲームをセットアップしなおそう
  124. カメラをヴァネロペといっしょに移動しよう
  125. リスタート出来るゲームモードの条件を変えよう
  126. ゴールの処理を新しく作ろう
  127. サウンドを再生するプログラムを消そう
  128. ゴールの処理でサウンドの再生をしよう
  129. ゲーム終わりの処理を呼び出そう
  130. ゲームモードを変えるプログラムを消そう
  131. ゲームモードを「ゲーム終わり」に変更しよう
  132. ゴールの処理を呼び出そう
  133. ゲーム終わりの処理と同じ部分を消そう
  134. ゲーム終わりの処理を呼び出そう
  135. 「Click to Restart」の文字を表示しよう
  136. 1テキスト表示の設定をしてゲームを完成しよう
スピードアップ機能などの加わったよりスリリングなゲームデザインに挑戦しよう

レッスン目次 魔法の鏡(応用篇)

31ステップ

  1. シェーダーを使う準備をしよう
  2. 変数textureFromJSを作ろう
  3. シェーダー同士で座標データを連携しよう
  4. ピクセルの色を設定しよう
  5. VertexShaderで座標を調整しよう
  6. モザイクの細かさを決めよう
  7. モザイクを表現する計算式を書こう
  8. モザイクの細かさを変えてみよう
  9. mosaic関数を作ろう
  10. mosaic関数を呼び出そう
  11. 計算した結果を入れる変数を作ろう
  12. 計算した結果を返そう
  13. 関数の中でモザイクエフェクトを計算しよう
  14. モザイクの細かさを変えよう
  15. mirror関数を作って呼び出そう
  16. 計算した結果を入れる変数を作ろう
  17. 計算した結果を返そう
  18. 映像が左右対象に映るように計算しよう
  19. 映像が上下対象に映るように計算しよう
  20. ripple関数を作って呼び出そう
  21. 計算した結果を入れる変数を作ろう
  22. 計算した結果を返そう
  23. distance関数を使って距離を計算しよう
  24. sin関数を使って波紋の形を作ろう
  25. 波紋に動きをつける準備をしよう
  26. 波紋の動きを調整しよう
  27. 波紋の動きをアレンジしてみよう 28.これまでに作ったエフェクトを表示しよう
  28. エフェクトの関数を2つ組み合わせてみよう
  29. エフェクトの関数を3つ組み合わせてみよう
  30. 自由に書きかえよう
基礎編の作品にシェーダーによるエフェクトを追加しよう

レッスン目次 人探しサイト(応用篇)

46ステップ

  1. クラス名を変えよう
  2. 箱を作ろう
  3. テキストを用意しよう
  4. リストを作ろう
  5. リストに線をつけよう
  6. リストを並べよう
  7. リストを整えよう
  8. 変数を作ろう
  9. コンテンツをかくそう
  10. コンテンツを表示しよう
  11. 関数を作ろう
  12. コンテンツを指定しよう
  13. コンテンツを指定しよう
  14. タブのCSSを整えよう
  15. 変数を作ろう
  16. 変数を作ろう
  17. JavaScriptでクラスを外そう
  18. JavaScriptでクラスを追加しよう
  19. セクションを作ろう
  20. 見出しを作ろう
  21. 段落を作ろう
  22. 箱を作ろう
  23. 箱のCSSを整えよう
  24. 写真のCSSを整えよう
  25. 写真をレイアウトしよう
  26. コンテンツの箱を作ろう
  27. テキストを整えよう
  28. 変数を作ろう
  29. コンテンツをかくそう
  30. 関数を作ろう
  31. idをつけよう
  32. コンテンツを指定しよう
  33. さわった時のCSSを整えよう
  34. コンテンツをレイアウトしよう
  35. 閉じるボタンを表示しよう
  36. 関数を作ろう
  37. コンテンツをかくそう
  38. さわった時のCSSを整えよう
  39. 箱を作ろう
  40. 箱をレイアウトしよう
  41. 変数を作ろう
  42. 箱をかくそう
  43. 箱を表示しよう
  44. 箱の表示の順番を変えよう
  45. 関数を呼び出そう
  46. JavaScriptを整理しよう
基礎編のWebサイトにインタビューと、ズートピアのエリアガイドを掲載しよう

レッスン目次 KAWARA割り(応用篇)

31ステップ

  1. 「瓦がある時」を判定しよう
  2. 「瓦が0枚の時」を判定しよう
  3. 瓦が消える寿命を設定しよう
  4. gamePlaying関数の中で瓦を作ろう
  5. 瓦のY座標を増やしてみよう
  6. 瓦に上方向の速度をあたえよう
  7. 瓦のY座標を判定しよう
  8. 瓦の速度を0にしよう
  9. 「瓦の列が5より少ない時」を判定しよう
  10. 瓦のX座標をランダムに決めよう
  11. 瓦の順番を取得する関数を作ろう
  12. 新しい変数を作ろう
  13. 5回処理を繰り返す準備をしよう
  14. 瓦の番号に順番のデータを設定しよう
  15. 「スペースキーを押している時」を判定しよう
  16. パワーアタックの音を再生しよう
  17. パワーアタックでもらえるスコアを増やそう
  18. テキスト「POWER」を表示しよう
  19. パワーゲージとなる長方形を描こう
  20. 「パワーが1より大きい時」を判定しよう
  21. 「瓦の数がパワーより大きい時」を判定しよう
  22. 「瓦の枚数がパワーより少ない時」を判定しよう
  23. スコアテーブルを用意しよう
  24. スコアテーブルからスコアを計算してみよう
  25. 「スペースを押していて、パワーが1の時」を判定しよう
  26. パワーが足りない時に音を鳴らそう
  27. パワーが足りない時にアニメーションを変更しよう
  28. マウスに関数を設定するコードをコメントにしよう
  29. 右矢印キーを判定しよう
  30. 左矢印キーを押したら実行されるコードを書こう
  31. 下矢印キーを判定しよう
カワラが補充される機能と、パワーを貯めて複数のカワラを壊す機能を追加しよう

レッスン目次 宝石パズル(応用篇)

39ステップ

  1. 宝石がそろった判定をするif文を書こう
  2. 宝石が3つ並んでいる判定をする関数を作ろう
  3. 宝石が光るか確認してみよう
  4. 全ての宝石に対して判定させよう
  5. 宝石が横に3つ並んでいるかどうかを判定しよう
  6. 横に並んだ宝石の色がそろっているかをチェックしよう
  7. trueをfalseにかきかえよう
  8. 宝石が横に二つ並んでいる判定をしよう
  9. 宝石が三つ光るようにしよう
  10. 全てのisCollectedをfalseにしよう
  11. 宝石が縦に3つ並んでいるかどうかを判定しよう
  12. 集めた宝石の数を計算する関数を作ろう
  13. count変数を作ろう
  14. 同じ色が三つ並んだ宝石の数を数えよう
  15. ゲットした宝石の数を数える関数を使ってみよう
  16. ゲットした宝石があるかどうか判定しよう
  17. 色の揃った宝石を消して並べなおす関数を作ろう
  18. 左から処理を行うためのfor文を追加しよう
  19. 色の並んだ宝石を下から数えよう
  20. 消えた宝石の数の分だけ移動させる処理を書こう
  21. 画面の外側に新しく宝石を並べ直そう
  22. 宝石を落とす関数を呼び出そう
  23. movingTimerをセットし直そう
  24. 宝石が隣同士か判定しよう
  25. 隣り合う宝石がクリックされたかチェックしよう
  26. 隣り合う宝石ではなかった場合の処理を設定しよう
  27. 宝石が縦に並んでいるか判定しよう
  28. 宝石が連続して縦に並んでいるか判定しよう
  29. 宝石が連続して横に並んでいるか判定しよう
  30. 角度を変えてみよう
  31. クリックした宝石の大きさを変えよう
  32. angleの増えかたを変えよう
  33. 宝石の大きさを戻そう
  34. スコア数を入れる変数を作ろう
  35. スコアをテキストで表示しよう
  36. テキストの設定をしよう
  37. スコアにゲットした宝石の数を足そう
  38. ゲーム終了の処理を行う関数を作ろう
  39. 100点を超えたらゲームを終了させよう
隣り合った宝石を消してスコアを増やし、高得点を目指すルールを加えよう

レッスン目次 ドラゴン&ソード(応用篇)

45ステップ

  1. ドラゴンのモードを追加しよう
  2. アニメーションを追加しよう
  3. ドラゴンが反撃してくるように条件を書こう
  4. 炎を吐く時間をランダムに決めよう
  5. 関数の中にドラゴンの「炎を吐く」モードを追加しよう
  6. ドラゴンが炎を吐く関数を作ろう
  7. 炎のスプライトを作ろう
  8. 炎の速度を設定しよう
  9. 炎のグループにスプライトを追加しよう
  10. 待機モードのアニメーションに戻そう
  11. ドラゴンのモードを変えるタイマーを減らそう
  12. 炎をチャージしてから攻撃するようにしよう
  13. 炎をチャージするアニメーションを入れる変数を作ろう
  14. 炎をチャージする時間をランダムに決めよう
  15. 炎をチャージする音を入れる変数を作ろう
  16. ドラゴンと劍の当たり判定の条件を変えよう
  17. 炎をチャージするモードに切り替えよう
  18. 上下にも動くようにしよう
  19. 炎をランダムに回転させよう
  20. 炎の大きさをランダムにしよう
  21. 炎が消えるまでの時間を決めよう
  22. 炎の速度をだんだんゆっくりにしよう
  23. 炎を吐く音を入れる変数を作ろう
  24. 炎にコライダーをつけよう
  25. 炎が王子に当たったときの処理を作ろう
  26. 王子が盾でガードしているときの処理を作ろう
  27. 炎を上むきにはね返そう
  28. 王子が後ずさるようにしよう
  29. 盾でガードしていないときの処理を作ろう
  30. タイマーをリセットしよう
  31. 王子のモードをダメージモードに切り替えよう
  32. 王子の体力を減らそう
  33. 王子の体力を0にしよう
  34. ゲームオーバーモードに切り替えよう
  35. ダメージ音を入れる変数を作ろう
  36. ダメージを受けているときの処理を作ろう
  37. 待機のアニメーションに切り替えよう
  38. 王子の剣のダメージ量を増やそう
  39. 炎のチャージ時間を短くしよう
  40. 王子の剣のダメージを設定しよう
  41. 王子の移動速度を上げよう
  42. 王子が「後ずさり」する距離を短くしよう
  43. ドラゴンが炎を吐く頻度を下げよう
  44. 王子の移動速度を設定しよう
  45. 自由に書きかえてみよう
基礎編のゲームに王子の動きや、攻撃力のちがいで難易度を調整する方法も学ぼう

レッスン目次 ダンジョンエスケープ(応用篇)

43ステップ

  1. 移動するブロックを作ろう
  2. 移動するブロックに画像を入れよう
  3. ラルフと移動するブロックの判定を取ろう
  4. 毎フレームの値を戻そう
  5. 横に移動するブロックのグループを作ろう
  6. 移動する速度を変えよう
  7. 関数を呼び出そう
  8. タイマーが180のときの処理を作ろう
  9. ブロックの移動する速度を変更しよう
  10. タイマーを0に戻そう
  11. 移動ブロックに乗っているときの処理を作ろう
  12. カギを1つ取ればドアが開くようにしておこう
  13. ステージクリアしたときの処理をつくろう
  14. クリアサウンドを再生しよう
  15. ステージクリア画面に文字を表示しよう
  16. ステージクリア画面からもう一度遊べるようにしよう
  17. ステージ1の変数名を変えよう
  18. 配列にステージ1のレイアウトを保存しよう
  19. stageNumberが2のときの条件を分岐しよう
  20. ステージ2から始められるようにしておこう
  21. 移動するブロックを配置する処理を書こう
  22. 上に移動するブロックのグループをつくろう
  23. ブロックを移動する処理をつくろう
  24. ブロックが画面の上に来たときの処理をつくろう
  25. ステージ2から始められるようにしておこう
  26. 移動するブロックを作ろう
  27. ブロックを移動させる処理を作ろう
  28. ブロックを移動する処理を呼び出そう
  29. ステージ2から始められるようにしておこう
  30. ゴールを作ろう
  31. ゴールの変数に開いた扉の画像を入れよう
  32. ラルフとゴールの当たり判定を作ろう
  33. ステージ2にいるかを判定しよう
  34. ラルフがゴールに重なっているかを判定しよう
  35. ステージ1から始まるように戻そう
  36. トゲ岩の変数をコピーしてペーストしよう
  37. タイマー機能をコピーしてペーストしよう
  38. トゲ岩の移動速度をセットする機能を消そう
  39. カギが集まったときの条件を消そう
  40. ブロックが壊れる処理の機能を消そう
  41. 当たり判定のグループとサウンドの変数を消そう
  42. 自由に書きかえてみよう
左右と上下に 移動するブロックを追加し、スリルのあるゲームに作り変えよう

レッスン目次 雪の結晶

28ステップ

  1. 色のモードをHSBに設定しよう
  2. キャンバス全体の座標の基点を移動させよう
  3. 線を描く関数を作ろう
  4. 線を描こう
  5. 変数を管理する関数を作ろう
  6. 線の長さの引数を設定しよう
  7. 関数を再帰的に呼び出そう1
  8. 再帰する回数を変数で管理しよう
  9. 線に角度をつけよう
  10. 角度の引数を設定しよう
  11. 関数を再帰的に呼び出そう2
  12. push関数・pop関数を使おう
  13. 再帰する回数を変えよう
  14. 線の長さを計算しよう
  15. 線の角度を変数で管理しよう
  16. 関数を再帰的に呼び出そう3
  17. 線の太さを変えよう
  18. 枝の数を変数で管理しよう
  19. 枝を並べて結晶の形を作ろう
  20. 結晶を作る枝の数を変えてみよう
  21. 結晶の大きさを変えよう
  22. マウスクリックで変数を初期化しよう
  23. 結晶の形を変えよう
  24. 枝を並べて小さい結晶の形を作ろう
  25. 小さい結晶の枝の数を変数で管理しよう
  26. 結晶が少しずつ大きくなるようにしよう
  27. 速度の度合いを計算しよう
  28. 自由に書き換えよう
再帰関数・座標変換、色のブレンドなどを使って雪の結晶を作ろう

レッスン目次 ミーミルの課外授業(外部環境レッスン)

9ステップ

  1. Visual Studio Codeを立ち上げよう
  2. ミーミルからのプレゼントを受け取ろう
  3. zipを展開しよう
  4. フォルダをVisual Studio Codeで読み込もう
  5. プレビュー画面を用意しよう
  6. 画面を左右に並べよう
  7. ライブラリの確認
  8. code.jsの確認
  9. ゲームを完成させよう
ご自身のパソコンで、ゲーム作品を作るための、セットアップを学ぼう

オリジナルタイピングレッスン

学習が楽しく捗る
自走型レッスン
講師の方の経験を問いません。

学びやすさに徹底的にこだわった自走型プログラムで学習者ひとりでどんどんレッスンを進めていくことができます。1レッスン約10〜20分程度に設定され、キャラクターが学習をサポートします。講師のための管理画面からは、生徒の学習進捗が一覧で閲覧することができるので、一人一人のペースを確認しつつ指導に集中することができます。

レッスン画面

  • 適切な学習情報量で学びやすい画面構成

  • 会話形式の丁寧なナビゲーション。
    新しい知識は図解で説明

  • 時にはクイズ形式で理解度を確認!

学習進捗が把握できる管理画面

受講者一覧で全体進捗、個別の詳細画面でレッスンクリア状態が確認可能

適切な学習情報量で学びやすい画面構成

会話形式の丁寧なナビゲーション。新しい知識は図解で説明

時にはクイズ形式で理解度を確認!

中学校・高等学校
累計導入校数No.1
実績の学習システムを採用!

プログラミング必修科対応講座の「ライフイズテックレッスン」と同じ学習システムを採用しています。現在主流の「Scratch」等をベースに作られたビジュアルプログラミングの次に学ぶ本格的なテキストプログラミング教材としてタイピングの基礎から楽しみながら学習できます。入念に設計された繰り返し学習サイクルで小さな成功体験を積み重ねながら、継続的に学習していくことができます。

※日本マーケティングリサーチ機構調べ。調査概要:2020 年 12 月期_実績調査

あなたの教室でも導入しませんか?

教室でご利用いただくまでの流れ

お申し込みから最短5営業日程度でご利用いただけます

01お申込み 02アカウント発行 03ログイン・設定 04学習開始

今だけ初期費用0円
まずは無料トライアルから

導入時の初期費用が無料になる期間限定のキャンペーンを実施中です。
「テクノロジア魔法学校」の導入をご検討の方は、この機会に無料トライアルからぜひお試しください。

※無料トライアルでは教材のすべてのレッスンを実際にご体験いただけます。

Free trial in progress

非対応ブラウザ

申し訳ございません。当サイトではご利用のブラウザは非対応となっております。
下記のリンクより最新のブラウザをインストールしてご覧ください。