Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

第2回 IT講座 ゲームを作るって?

379 views

Published on

中学生・高校生向けにIT講座を開いてきました。
第2回はゲームを作るのに必要な知識とプログラミングの基本的な考え方を学びました。

■ 第1回 IT講座 IT基礎知識
https://www.slideshare.net/s-komori/1-it-it-82954806

■ 第2回 IT講座 ゲームを作るって?
https://www.slideshare.net/s-komori/2-it-83019937

■ 第3回 IT講座 ゲームを作ってみよう! 基礎編
https://www.slideshare.net/s-komori/3-it-82957912

■ 第4回 IT講座 ゲームを作ってみよう! 応用編
https://www.slideshare.net/s-komori/4-it-82958211

■ 第5回 IT講座 ゲームを作ってみよう! 実践編
https://www.slideshare.net/s-komori/5-it-82958449

【連絡先】
小森俊哉/Shunya Komori
株式会社デイブレイク Webディレクター
http://www.day-b.jp/

Published in: Education
  • Be the first to comment

  • Be the first to like this

第2回 IT講座 ゲームを作るって?

  1. 1. IT講座 第2回 株式会社デイブレイク
  2. 2. 全講義内容について 1. IT基礎知識 自己紹介、webの世界について、ITの基礎知識について学ぶ。 2. ゲームを作るって? ゲームを作るのに必要な知識を学ぶ。プログラミングの基本的な考え方を学ぶ。 3. ゲームを作ってみよう!/基礎編 簡単なゲームを作ってみる。 Javascript ライブラリのphina.js を使うことを考えています。 4. ゲームを作ってみよう!/応用編 基礎編よりも難しい内容のゲームを作ってみる。 5. ゲームを作ってみよう!/実践編 自分たちでゲームを考えてみて実際に作ってみる。
  3. 3. 超すごいメモ帳インストール Webサイトはテキストで出来ているので、 メモ帳でも作ることができます。 ただ、普通のメモ帳は使いにくいので、 色々機能のある超すごいメモ帳の Sublime textを使って作業します。
  4. 4. 黒い画面でテキストを書いていると ハッカーぽくてカッコイイ!!
  5. 5. HTMLには 何が書かれているんだろう? なんだか英語がたくさん書いてあってよく分からない・・・
  6. 6. 基本的な書き方 〜タグ〜 <タグ名>→開始タグ </タグ名>→終了タグ
  7. 7. 基本的な書き方 〜インデント〜 国語の文章を書く時みたいに HTMLも 段落をつけていきます 見やすくするために とても大事。 <html> <head> </head> </html>
  8. 8. 1.DOCTYPE宣言 この文書が「HTML」だよ〜ということを宣 言するための記述。 <!DOCTYPE html>
  9. 9. 2.大枠のタグを書く • <html>~</html> →HTML文書であることを宣言するタグ • <head>~</head> →ページの基本情報を入れるタグ • <body>~</body> →ブラウザに表示される内容を入れるタグ
  10. 10. 3.headの中身を書く • <meta charset="utf-8"> →文字コードの宣言 • <title>~</title> →ページのタイトルを入れるタグ • <link … →外部から読み込むファイルを書くタグ
  11. 11. 4.bodyの中身を書く • <div>~</div> →何でも入るタグ 大きな箱のようなイメージで、 他のタグのグループ分けなどに使える • <img … →画像を表示させるタグ
  12. 12. 4.bodyの中身を書くその2 • id=“header”・class=“text” →タグに名前をつけるための記述 idは1つのものにしか付けられない classは同じ名前を複数に付けれる • width=“220”・height=“40” →画像の幅と高さ • alt=“メインビジュアル” →画像が表示できない時に表示させるテキスト
  13. 13. タグは他にもたくさんあります TAG index(http://www.tagindex.com/html5/index.html)
  14. 14. CSSには 何が書かれているんだろう? HTMLとの違いとは一体・・・
  15. 15. HTML CSS デコレーション前の スポンジケーキのみの状態 スポンジケーキに 装飾することが出来る
  16. 16. 基本の書き方 #wrapper { height: auto; width: 800px; margin-right: auto; margin-left: auto; } セレクタ プロパティ 値
  17. 17. どんなプロパティがあるのか • margin →余白を作る • background-color →背景の色を指定する • color →文字の色を指定する • font-size →文字のサイズを指定する
  18. 18. プロパティは他にもたくさんあります TAG index(http://www.tagindex.com/stylesheet/index.html)
  19. 19. プログラミング言語を 書くときの考え方 ゲームを作り始める前に・・・
  20. 20. 実は、 HTMLとCSSは プログラミング言語ではありません
  21. 21. データを処理できる 動きのあるものを プログラミング言語と呼ぶ
  22. 22. コンピュータに処理をお願いするために コンピュータでの課題を解決する 手順のことを アルゴリズム(論理的思考) と言います。 プログラミング言語を書くにあたって 大事な考え方です。
  23. 23. コンピュータに処理をお願いするために 例えば…ゲームの中に表示するキャラク ターを増やして色を変えたいとする。
  24. 24. コンピュータに処理をお願いするために 増やしてから色を変える場合… モンスターを1匹増やす→モンスターを1匹増やす→モンスター1の色 を変える→モンスター2の色を変える→モンスター3の色を変える 5回の処理が必要
  25. 25. コンピュータに処理をお願いするために 色を変えてから増やした場合… モンスター1の色を変える→モンスターを1匹増やす→モンスターを1 匹増やす 3回の処理で済む!!
  26. 26. アルゴリズムを学べるサイト ITなるほど委員会 http://pr.jp.nttdata.com/naruhodo/training2/algorithm.html
  27. 27. アルゴリズムを学べるサイト アルゴリズム体験ゲーム・アルゴロジック http://home.jeita.or.jp/is/highschool/algo/info/index.html
  28. 28. 参考サイト ■ TAG INDEX http://www.tagindex.com/html5/index.html ■ ITなるほど委員会 http://pr.jp.nttdata.com/naruhodo/training2/algorithm.html ■ アルゴリズム体験ゲーム・アルゴロジック http://home.jeita.or.jp/is/highschool/algo/info/index.html

×