WARPこどもプログラミング

小学生から始める WARPでのHTML/CSS講座【教材ストック集】

タイピング練習

ロジックプログラム

Piskelをつかいます

  1. Piskelでロジックを組んでキャラクターを作りましょう。
  2. 手足のあるキャラクターを作りましょう。
  3. アニメーションで歩くキャラにしましょう。

Atomでまちをつくります

手足があって歩いたり走ったりするキャラクターが10個あると、ゲームが作れます。

※密ですゲームに出てくる小池さんの歩き方をマネしましょう。
※もっと細かいドットが描けるよ！という人はミニドット絵に挑戦を！

お手本けんさく

VRプログラム

HubsMozillaをつかいます

YouTubeで見る

🐸FlexBoxプログラム🐸

FLEXBOX FROGGYをつかいます

レベル01：カエルを葉っぱの上に乗せます。
レベル02：緑のカエルは緑の葉っぱに、黄色のカエルは黄色の葉っぱに乗せます。
レベル03：緑カエル→緑の葉、黄カエル→黄色の葉、赤カエル→赤の葉に乗せます。
レベル04：緑カエル→緑の葉、黄カエル→黄色の葉、赤カエル→赤の葉に乗せます。
レベル05：緑カエル→緑の葉、黄カエル→黄色の葉、赤カエル→赤の葉に乗せます。
:
:

ここでチャレンジ！

脱出ゲームをつくろう

HTMLとCSSをつかいます

サンプル
ミニ脱出
サイン

1️⃣部屋を作る
2️⃣クリックできる場所（家具など）を作る
3️⃣ヒントをくれるキャラを置く
4️⃣鍵を隠す
5️⃣ゴール（出口）を作る
で完成できます。

いきなりゲームをつくるとしっぱいします。
まずは、シナリオをつくりましょう！

脱出ゲームを作る人は
ファイルをもらってくださいね！

脱出ゲームのシナリオをつくる

Mindomoでシナリオを書く

  1. メールアドレスとパスワードで登録
  2. 学生用サービスをつかう
  3. 「作成」→「組織図」→「作成」
  4. スタートをせってい
  5. メインの部屋・左の部屋・右の部屋などをせってい
  6. 家具などをおく
  7. しかけをおく

ここで登録

スクラッチ Scratch

スクラッチでまずは
犬🐕をあるかせてみよう！


スクラッチをはじめるには、アカウント（メールアドレス）がひつようです。
メールアドレスは、先生につくってもらいましょう。

WARPのみんなのページを見にいこう！

インベーダーゲームをつくろう

HTMLとCSSをつかいます

1️⃣Atomを開く
2️⃣「2023si.html」と「2023si.css」ファイルを作る
3️⃣HTMLをコピー＆ペースト
4️⃣CSSをコピー＆ペースト
5️⃣HTMLでタイトルとリンクを書き換える

ここからコピーします！

トップにもどる

2023 © タグチ!ワークス