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

IT講座
第2回
株式会社デイブレイク

全講義内容について
1. IT基礎知識
自己紹介、webの世界について、ITの基礎知識について学ぶ。
2. ゲームを作るって？
ゲームを作るのに必要な知識を学ぶ。プログラミングの基本的な考え方を学ぶ。
3. ゲームを作ってみよう！／基礎編
簡単なゲームを作ってみる。
Javascript ライブラリのphina.js を使うことを考えています。
4. ゲームを作ってみよう！／応用編
基礎編よりも難しい内容のゲームを作ってみる。
5. ゲームを作ってみよう！／実践編
自分たちでゲームを考えてみて実際に作ってみる。

超すごいメモ帳インストール
Webサイトはテキストで出来ているので、
メモ帳でも作ることができます。
ただ、普通のメモ帳は使いにくいので、
色々機能のある超すごいメモ帳の
Sublime textを使って作業します。

黒い画面でテキストを書いていると
ハッカーぽくてカッコイイ！！

HTMLには
何が書かれているんだろう？
なんだか英語がたくさん書いてあってよく分からない・・・

基本的な書き方
〜タグ〜
<タグ名>→開始タグ
</タグ名>→終了タグ

基本的な書き方
〜インデント〜
国語の文章を書く時みたいに
HTMLも
段落をつけていきます
見やすくするために
とても大事。
<html>
<head>
</head>
</html>

１.DOCTYPE宣言
この文書が「HTML」だよ〜ということを宣
言するための記述。
<!DOCTYPE html>

2.大枠のタグを書く
• <html>~</html>
→HTML文書であることを宣言するタグ
• <head>~</head>
→ページの基本情報を入れるタグ
• <body>~</body>
→ブラウザに表示される内容を入れるタグ

3.headの中身を書く
• <meta charset="utf-8">
→文字コードの宣言
• <title>~</title>
→ページのタイトルを入れるタグ
• <link …
→外部から読み込むファイルを書くタグ

4.bodyの中身を書く
• <div>~</div>
→何でも入るタグ
大きな箱のようなイメージで、
他のタグのグループ分けなどに使える
• <img …
→画像を表示させるタグ

4.bodyの中身を書くその２
• id=“header”・class=“text”
→タグに名前をつけるための記述
idは1つのものにしか付けられない
classは同じ名前を複数に付けれる
• width=“220”・height=“40”
→画像の幅と高さ
• alt=“メインビジュアル”
→画像が表示できない時に表示させるテキスト

タグは他にもたくさんあります
TAG index(http://www.tagindex.com/html5/index.html)

CSSには
何が書かれているんだろう？
HTMLとの違いとは一体・・・

HTML CSS
デコレーション前の
スポンジケーキのみの状態
スポンジケーキに
装飾することが出来る

基本の書き方
#wrapper {
height: auto;
width: 800px;
margin-right: auto;
margin-left: auto;
}
セレクタ
プロパティ
値

どんなプロパティがあるのか
• margin
→余白を作る
• background-color
→背景の色を指定する
• color
→文字の色を指定する
• font-size
→文字のサイズを指定する

プロパティは他にもたくさんあります
TAG index(http://www.tagindex.com/stylesheet/index.html)

プログラミング言語を
書くときの考え方
ゲームを作り始める前に・・・

実は、
HTMLとCSSは
プログラミング言語ではありません

データを処理できる
動きのあるものを
プログラミング言語と呼ぶ

コンピュータに処理をお願いするために
コンピュータでの課題を解決する
手順のことを
アルゴリズム（論理的思考）
と言います。
プログラミング言語を書くにあたって
大事な考え方です。

例えば…ゲームの中に表示するキャラク
ターを増やして色を変えたいとする。

増やしてから色を変える場合…
モンスターを1匹増やす→モンスターを1匹増やす→モンスター1の色
を変える→モンスター2の色を変える→モンスター3の色を変える
5回の処理が必要

色を変えてから増やした場合…
モンスター1の色を変える→モンスターを1匹増やす→モンスターを1
匹増やす
3回の処理で済む！！

アルゴリズムを学べるサイト
ITなるほど委員会
http://pr.jp.nttdata.com/naruhodo/training2/algorithm.html

アルゴリズムを学べるサイト
アルゴリズム体験ゲーム・アルゴロジック
http://home.jeita.or.jp/is/highschool/algo/info/index.html

参考サイト
■ 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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie 第2回 IT講座ゲームを作るって？

Ähnlich wie 第2回 IT講座ゲームを作るって？ (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (7)