試験公開中

このエントリーをはてなブックマークに追加

ゲームで学ぶJavaScript入門 増補改訂版~ブラウザゲームづくりでHTML&CSSも身につく!

インプレス

2,640円 (2,400円+税)

JavaScriptを使用したブラウザゲームのつくり方を解説する入門書です。パズル/アクション/シューティングから物理エンジンを使ったゲームまで計13本のサンプルゲームを通して、学んだWeb技術の実践的な使い方やブラウザゲームの制作ノウハウを習得できます。

【注意】本書のEPUB版は固定レイアウト型になっております。文字の大きさの変更や検索、引用などはお使いいただけません。画面の大きい端末でご利用ください。

関連サイト

本書の関連ページが用意されています。

内容紹介

JavaScriptを使用したブラウザゲームのつくり方を解説する入門書です。HTML/CSS、JavaScript、図形描画(Canvas)の基本を学んだあと、パズル/アクション/シューティングから物理エンジンを使ったゲームまで計13本のサンプルゲームを通して、学んだWeb技術の実践的な使い方やブラウザゲームの制作ノウハウを習得できます。サンプルゲームは全ソースコード掲載&ダウンロード提供!

ゲームをつくりながら、JavaScriptだけでなくHTML/CSSなどのWeb技術の基本もしっかり学習できます。「これからプログラミングを始めてみたい」「HTMLやJavaScriptを使ってゲームをつくってみたい」といった初心者に最適の一冊です。

【本書でつくるサンプルゲーム】

○スライドパズル(15パズル)
○神経衰弱
○荷物を運ぼう(思考型パズルゲーム)
○リバーシ
○タマゴを大事に(タマゴキャッチゲーム)
○ダンジョン(2Dダンジョンゲーム)
○宇宙船サターンボイジャー(疑似3D・宇宙船ゲーム)
○ファンキーブロック(マッチ3パズル)
○食べ尽くせ!(ドットイート風ゲーム)
○超難度・忍者ジャンパー(横スクロールジャンプゲーム)
○インベーダーを撃ち落とせ!(シューティング)
○ビリヤード
○ベジタブルマーチ(ブロック連結パズルゲーム)

書誌情報

  • 著者: 田中 賢一郎
  • 発行日: (紙書籍版発行日: 2022-12-20)
  • 最終更新日: 2024-05-01
  • バージョン: 1.3.0
  • ページ数: 336ページ(PDF版換算)
  • 対応フォーマット: PDF, EPUB
  • 出版社: インプレス

対象読者

○とにかくゲームをつくってみたい人:中高生を含む若年層、プログラミング入門者・再入門者  ―JavaScriptはブラウザさえあれば実行できるので、手軽にゲームをつくって試せる ○ブラウザゲームをつくるために必要なWeb技術(JavaScript、HTML/CSS、Canvas)を学びたい人:中高生、専門学校生、情報系大学生、プログラミング入門者・再入門者 ○(教科書的ではなく)楽しいサンプルでJavaScript/HTML/CSS、Canvasを学びたい人

著者について

田中 賢一郎

慶應義塾大学理工学部修了。キヤノン株式会社でデジタル放送局の起ち上げに従事。単独でデータ放送ブラウザを実装し、マイクロソフト(U.S.)へソースライセンス。Media Center TVチームの開発者としてマイクロソフトへ。Windows、Xbox、Office 365の開発/マネージ/サポートに携わる。2016年に中⼩企業診断士登録後、2017年にプログラミングスクール「Future Coders」を設立。2017年からキヤノン電⼦株式会社顧問、2022年からGrowth Kineticsビジネスアナリストを兼務。
著書は『ゲームを作りながら楽しく学べるPythonプログラミング』(インプレスR&D)など多数。趣味はジャズピアノ/ベース演奏。
Future Coders  https://future-coders.net
YouTube(趣味) https://www.youtube.com/user/kenchitanaka/videos

目次

はじめに

本書でつくるサンプルゲーム

Chapter 1 HTML+CSSの基本

  • 1-1 HTML/CSS/JavaScriptの関係
  • 1-1-1 HTML/CSS/JavaScriptの役割
  • 1-2 文書の構造
  • 1-2-1 文書の構造
  • 1-2-2 実際のページを見てみる
  • 1-3 最初のHTML
  • 1-3-1 HTMLの「< >」記号に注目
  • 1-4 HTMLの書き方の規則
  • 1-4-1 タグの書き方
  • 1-5 HTMLの主な要素
  • 1-5-1 これだけは覚えておきたい必須要素
  • 1-5-2 画像フォーマット
  • 1-5-3 応用例
  • 1-6 統合開発環境のすすめ
  • 1-6-1 統合開発環境とは
  • 1-7 CSSの概要
  • 1-7-1 見映えを担当するCSS
  • 1-7-2 カスケードとは
  • 1-8 CSSの書き方
  • 1-8-1 インラインスタイルでの指定
  • 1-8-2 CSSの主なプロパティ
  • 1-8-3 文書の構造と見た目の分離
  • 1-9 ページのレイアウト
  • 1-9-1 ブロックレベル要素とインライン要素
  • 1-9-2 ボックスモデル
  • 1-9-3 色やサイズの指定

Chapter 2 JavaScriptの基本

  • 2-1 プログラミング言語JavaScript
  • 2-1-1 プログラミング言語とは
  • 2-1-2 JavaScriptのプログラム実行の流れ
  • 2-2 変数と演算
  • 2-2-1 変数の宣言
  • 2-2-2 演算
  • 2-3 比較と条件式
  • 2-3-1 比較した結果に応じて処理を変える
  • 2-3-2 条件式-if文
  • 2-3-3 複数の条件式を組み合わせる-ANDとOR
  • 2-3-4 条件式-switch文
  • 2-3-5 条件式-三項演算子
  • 2-4 配列と繰り返し
  • 2-4-1 配列の使い方
  • 2-4-2 繰り返し-for文
  • 2-4-3 繰り返し-while文
  • 2-4-4 繰り返し-continue文、break文
  • 2-5 関数
  • 2-5-1 関数の定義
  • 2-6 プログラムのバグをとる作業(デバッグ)
  • 2-6-1 ブラウザのデバッガ
  • 2-7 オブジェクト
  • 2-7-1 オブジェクトとは
  • 2-7-2 JavaScriptでのオブジェクトの定義方法
  • 2-7-3 JavaScriptからHTMLを操作する
  • 2-7-4 JavaScriptからCSSを操作する
  • 2-7-5 DOM(Document Object Model)
  • 2-7-6 タイマー関連のメソッド
  • 2-8 組み込みオブジェクト
  • 2-8-1 Dateオブジェクト
  • 2-8-2 Mathオブジェクト
  • 2-8-3 Arrayオブジェクト
  • 2-8-4 Stringオブジェクト
  • 2-9 プロトタイプ
  • 2-9-1 プロトタイプの利点
  • 2-9-2 プロトタイプの挙動
  • 2-9-3 プロトタイプ継承
  • 2-9-4 プロトタイプの設定方法
  • 2-10 イベント
  • 2-10-1 イベント、イベントハンドラ
  • 2-10-2 文書の読み込みイベント
  • 2-10-3 ボタンのクリック
  • 2-10-4 イベントハンドラの引数
  • 2-10-5 イベントハンドラの登録先
  • 2-10-6 タッチイベントに関して
  • 2-11 関数オブジェクト
  • 2-11-1 関数はオブジェクト
  • 2-11-2 関数オブジェクトによる配列の操作
  • 2-11-3 関数オブジェクトを引数にとるArrayのメソッド
  • 2-11-4 イベントハンドラも関数オブジェクト
  • 2-11-5 本章のサンプル

Chapter 3 Canvasの基本

  • 3-1 <canvas>要素で図形を描く
  • 3-1-1 描画の手順
  • 3-2 さまざまな図形の描画
  • 3-2-1 直線、多角形
  • 3-2-2 矩形
  • 3-2-3 円、円弧
  • 3-2-4 文字
  • 3-2-5 画像
  • 3-3 座標系の設定
  • 3-3-1 座標系の基礎

Chapter 4 [実践]ゲームプログラミング

  • 4-1 スライドパズル 15puzzle
  • 4-1-1 ソースコード解説
  • 4-2 神経衰弱 FlipCards
  • 4-2-1 ソースコード解説
  • 4-3 荷物を運ぼう CarryIt
  • 4-3-1 ソースコード解説
  • 4-4 リバーシ ReversiblePiece
  • 4-4-1 ソースコード解説
  • 4-5 タマゴを大事に EggCatch
  • 4-5-1 ソースコード解説
  • 4-6 ダンジョン Dungeon
  • 4-6-1 ソースコード解説
  • 4-7 宇宙船サターンボイジャー SaturnVoyager
  • 4-7-1 ソースコード解説
  • 4-8 ファンキーブロック FunkyBlocks
  • 4-8-1 ソースコード解説
  • 4-9 食べ尽くせ! Chase
  • 4-9-1 ソースコード解説
  • 4-10 超難度・忍者ジャンパー Jumper
  • 4-10-1 ソースコード解説
  • 4-11 インベーダーを撃ち落とせ! Shooting
  • 4-11-1 ソースコード解説

Chapter 5 物理エンジンを使ったゲーム

  • 5-1 物理エンジンとは
  • 5-1-1 なぜ物理エンジンを使おうと思ったか?
  • 5-1-2 物理エンジンの仕組み
  • 5-1-3 本書で使用した物理エンジンのソースコード
  • 5-2 物理エンジンの利用例
  • 5-2-1 デモ(demo.html)
  • 5-3 ビリヤード Billiard
  • 5-3-1 ソースコード解説
  • 5-4 ベジタブルマーチ VegetableMarch
  • 5-4-1 ソースコード解説

参考文献・リンク

あとがき

索引

著者プロフィール

Home 書籍一覧 ゲームで学ぶJavaScript入門 増補改訂版~ブラウザゲームづくりでHTML&CSSも身につく! ▲ ページトップへ戻る