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

なにかゲームをつくりたい人、ブラウザゲームを支える Web 技術 (JavaScript、HTML / CSS など) やブラウザゲームのつくり方を学びたい人に向けた入門書です。本書では、JavaScript、HTML / CSS、図形描画 (Canvas) の基本を学んだあと、さまざまな種類のブラウザゲームのプログラミング例を通して、学んだ Web 技術の実践的な使い方やゲームプログラミングのノウハウを学びます。とくに「ゲームプログラミングに挑戦してみたい!」と考えている初心者や中学生・高校生にもおすすめです。また、「より面白く」「見映え良く」をモットーに、各種パズルゲーム、なつかしのレトロゲーム、物理エンジンを使ったゲームなど、ブラウザ・スマホで動く 13 本のサンプルゲームを紹介します。ゲームをつくりながら、JavaScript だけでなく、HTML や CSS といった Web 技術の基本もしっかり学習できます。

JavaScript でブラウザゲームを作りながら、HTML と CSS を含む Web 技術の基本を学ぶ入門書です。『ゲームで学ぶ JavaScript 入門 増補改訂版 ブラウザゲームづくりで HTML & CSS も身につく!』は田中 賢一郎が著し、インプレスから 2022 年 12 月 20 日に発売されました。国立国会図書館の書誌では、この副題のあとに「つくりながら Web 技術を学ぼう!」がもう 1 つ続きます。版元は対象を、これからプログラミングを始めたい初心者や、HTML や JavaScript でゲームを作ってみたい初心者と案内しています。

全 5 章の構成、HTML と CSS の基本から物理エンジンまで

本文の前には「はじめに」と「本書でつくるサンプルゲーム」があり、本文は Chapter 1「HTML＋CSS の基本」から Chapter 5「物理エンジンを使ったゲーム」までの全 5 章です。Chapter 1 は HTML と CSS と JavaScript の関係に始まり、文書の構造、HTML の書き方の規則と主な要素、統合開発環境のすすめ、CSS の書き方、ページのレイアウトへ進みます。Chapter 2「JavaScript の基本」は、変数と演算、比較と条件式、配列と繰り返し、関数、デバッグ、オブジェクト、組み込みオブジェクト、プロトタイプ、イベント、関数オブジェクトを扱います。Chapter 3「Canvas の基本」は、canvas 要素で図形を描く方法、さまざまな図形の描画、座標系の設定の 3 節です。

13 本のサンプルゲーム、パズルからシューティングまで

Chapter 4「［実践］ゲームプログラミング」では 11 本のゲームを作ります。スライドパズル (15puzzle)、神経衰弱 (FlipCards)、荷物を運ぼう (CarryIt)、リバーシ (ReversiblePiece)、タマゴを大事に (EggCatch)、ダンジョン (Dungeon)、宇宙船サターンボイジャー (SaturnVoyager)、ファンキーブロック (FunkyBlocks)、食べ尽くせ! (Chase)、超難度 / 忍者ジャンパー (Jumper)、インベーダーを撃ち落とせ! (Shooting) の並びです。Chapter 5 は物理エンジンとは何かと、その利用例を説明したあとに、ビリヤード (Billiard) とベジタブルマーチ (VegetableMarch) の 2 本を作ります。合わせて 13 本で、版元の紹介にある 13 本のゲームと数が一致します。サンプルプログラムは版元のページからダウンロードできます (2026 年 10 月時点)。

Canvas の描画とゲームを動かす仕組み

ブラウザーで動くゲームの画面を描く方法の 1 つが、HTML の canvas 要素に JavaScript で描く方法です。MDN Web Docs は 2026 年 10 月時点で、キャンバス API を JavaScript と HTML の canvas 要素によってグラフィックを描く方法と説明し、用途にアニメーションやゲームのグラフィックを挙げ、対象は全体として 2D グラフィックとしています。ゲーム開発 では、入力を受け取り、画面上の物体の状態を更新し、描き直すという処理を短い間隔で繰り返します。Chapter 2 にあるイベントはキーやマウスなどの入力を受け取る仕組みで、オブジェクトとプロトタイプは画面上の物体ごとのデータと処理をまとめる文法に当たります。Chapter 5 の題にある物理エンジンは、物体の衝突や落下のような物理法則に沿った動きを計算する部品です。

刊行時の著者紹介によると、田中 賢一郎はキヤノンやマイクロソフトで開発に携わったあと、2017 年にプログラミングスクール「Future Coders」を設立しています。本書は HTML と CSS の基本から、JavaScript の文法、Canvas の描画、物理エンジンを使ったゲームまでを全 5 章に収めています。