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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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

全講義内容について
1. IT基礎知識
自己紹介、webの世界について、ITの基礎知識について学ぶ。
2. ゲームを作るって？
ゲームを作るのに必要な知識を学ぶ。プログラミングの基本的な考え方を学ぶ。
3. ゲームを作ってみよう！／基礎編
簡単...

超すごいメモ帳インストール
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”
...

タグは他にもたくさんあります
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/algorit...

Share Slideshare

LinkedIn
Facebook
Twitter

Embed

Size (px)

Show related Slideshows at end

WordPress Shortcode

Link

Share
Email

2024 Trend Updates: What Really Wor... by Search Engine Jou... 1056584 views
Storytelling For The Web: Integrate... by Chiara Aliotta 973080 views
Artificial Intelligence, Data and C... by OECD Directorate ... 908885 views
How to Leverage AI to Boost Employe... by SocialHRCamp 384853 views
2024 State of Marketing Report – by... by Marius Sescu 217959 views
Everything You Need To Know About C... by Expeed Software 235285 views

View on Slideshare

1 of 28 Ad

View on Slideshare

1 of 28 Ad