ゲームで学ぶ「JavaScript入門」HTML5&CSSも身につく!
ゲームで学ぶJavaScript入門 HTML5&CSSも身につく!
インプレス
著者:田中賢一郎
はじめに
Chapter 01 本書でつくるサンプルゲーム
Chapter 02 HTML+CSSの基本
2-1 文書の構造
2-1-1 文書の構造
2-1-2 実際のページを見てみる
2-2 最初のHTML
2-2-1 HTMLの「<>」記号に注目
2-3 HTMLの書き方の規則
2-3- 1タグの書き方
2-4 HTMLの主な要素
2-4-1 これだけは覚えておきたい必須要素
2-4-2 画像フォーマット
2-4-3 応用例
2-5 統合開発環境のすすめ
2-5-1 統合開発環境とは
2-6 CSSの概要
2-6-1 見映えを担当するCSS
2-6-2 カスケードとは?
2-7 CSSの書き方
2-7-1 インラインスタイルでの指定
2-7-2 CSSの主なプロパティ
2-7-3 文書の構造と見た目の分離
2-8 ページのレイアウト
2-8-1 ブロックレベル要素とインライン要素
2-8-2 ボックスモデル
2-8-3 色やサイズの指定
Chapter 03 JavaScriptの基本
3-1 プログラミング言語JavaScript
3-1-1 プログラミング言語とは
3-1-2 JavaScriptのプログラム実行の流れ
3-2 変数と演算
3-2-1 変数の宣言
3-2-2 演算
3-3 比較と条件式
3-3-1 比較した結果に応じて処理を変える
3-3-2 条件式-if文
3-3-3 複数の条件式を組み合わせる-ANDとOR
3-3-4 条件式-switch文
3-3-5 条件式-三項演算子
3-4 配列と繰り返し
3-4-1 配列の使い方
3-4-2 繰り返し-for文
3-4-3 繰り返し-while文
3-4-4 繰り返し-continue文、break文
3-5 関数
3-5-1 関数の定義
3-6 プログラムのバグをとる作業デバッグ
3-6-1 ブラウザのデバッカー
3-7 オブジェクト
3-7-1 オブジェクトとは
3-7-2 JavaScriptでのオブジェクトの定義方法
3-7-3 JavaScriptからHTMLを操作する
3-7-4 JavaScriptからCSSを操作する
3-7-5 DOM(Document Object Model)
3-7-6 タイマー関連のメソッド
3-8 組み込みオブジェクト
3-8-1 Dateオブジェクト
3-8-2 Mathオブジェクト
3-8-3 Arrayオブジェクト
3-8-4 Stringオブジェクト
3-9 プロトタイプ
3-9-1 プロトタイプとは
3-9-2 プロトタイプ継承
3-9-3 プロトタイプの利点
3-9-4 プロトタイプの設定方法
3-10 イベント
3-10-1 イベント、イベントハンドラ
3-10-2 文書の読み込みイベント
3-10-3 ボタンのクリック
3-10-4 イベントハンドラの引数
3-10-5 イベントハンドラの登録先
3-10-6 タッチイベントに関して
3-11 関数オブジェクト
3-11-1 関数はオブジェクト
3-11-2 関数オブジェクトによる配列の操作
3-11-3 関数オブジェクトを引数にとるArrayのメソッド
3-11-4 イベントハンドラも関数オブジェクト
3-11-5 本章のサンプル
Chapter 04 Canvasの基本
4-1 canvas要素で図形を描く
4-1-1 描画の手順
4-2 さまざまな図形の描画
4-2-1 直線・多角形
4-2-2 矩形
4-2-3 円、円弧
4-2-4 文字
4-2-5 画像
4-3 座標系の設定
4-3-1 座標系の基礎
Chapter 05 実践ゲームプログラミング
5-1 15 Puzzle
5-1-1 ソースコード解説
5-2 FlipCards
5-2-1 ソースコード解説
5-3 CarryIT
5-3-1 ソースコード解説
5-4 Reversible Pieces
5-4-1 ソースコード解説
5-5 Dungeon
5-5-1 ソースコード解説
5-6 Saturn Voyager
5-6-1 ソースコード解説
5-7 Funky Blocks
5-7-1 ソースコード解説
Chapter 06 物理エンジンを使ったゲーム
6-1 物理エンジンとは
なぜ物理エンジンを使おうと思ったか?
物理エンジンの仕組み
本書で使用した物理エンジンのソースコード
6-2 物理エンジンを使ったゲーム例
デモ(demo.html)
ビリヤード(billiard.html)
ペグ(Peg.html)
パチンコ(Pachinko.html)
ベジタブルマーチ(VegetableMarch.html)
あとがき