📘 ゲームの作り方 ── コードを読んで、書きかえる

ゲームを作ってみよう!

JavaScriptとHTML5 Canvasを使って、ブラウザで動くゲームの作り方を学ぼう。
全87種類のチュートリアルから好きなものを選んでスタート!

🐱 まだ文字のコードは早いかな、という人は Scratch版55本 から。ブロックで中を見て、作りかえられます。
先生の方は 授業活用ガイド に6段階の進め方をまとめています。

正多角形をプログラミングでかこう

正多角形をプログラミングでかこう

小5算数 くりかえし Scratch・JavaScript対応
ScratchとJavaScriptを見くらべる

ScratchとJavaScriptを見くらべる

Scratch経験者むけ 対応表つき 同じゲームで比較
AI時代のゲームの作り方

AI時代のゲームの作り方

プログラミング不要 AIチャット 貼り付けてその場で実行
ぴったりお買い物の作り方

ぴったりお買い物の作り方

いちばん少ない枚数 レベルを表で管理 お金の効果音
ことばあての作り方

ことばあての作り方

緑と黄の判定 シャッフルで日替わり 50音キーボード
しりとりタイピングの作り方

しりとりタイピングの作り方

頭の字の索引 候補のしぼりこみ ローマ字判定
漢字よみクイズの作り方

漢字よみクイズの作り方

データで出題 シャッフル まちがい選択肢の自動生成
スライム牧場の作り方

スライム牧場の作り方

データの表で動かす オフライン還元 レシピ合成
マンカラの作り方

マンカラの作り方

ミニマックス法 配列で盤面管理 AI対戦
すうじでお絵かきの作り方

すうじでお絵かきの作り方

ヒント数字の自動計算 ドラッグ塗り 日替わり問題
はじめてのタイピング練習の作り方

はじめてのタイピング練習の作り方

キー入力 ローマ字判定 localStorage
スライム城くずしの作り方

スライム城くずしの作り方

物理エンジン 放物線の軌道 衝突ダメージ
百人一首オンライン対戦かるたの作り方

百人一首オンライン対戦かるたの作り方

リアルタイム対戦 ポーリング レート計算
百人一首タイピングの作り方

百人一首タイピングの作り方

ローマ字判定 決まり字 音声同期
国旗クイズの作り方

国旗クイズの作り方

SVG地図 4択生成 タイムアタック
ひよこクリッカーの作り方

ひよこクリッカーの作り方

1.15倍の価格式 setInterval オフライン還元
英単語タイピングの作り方

英単語タイピングの作り方

キー入力 前方一致 WPM計算
しゃてきゲームの作り方

しゃてきゲームの作り方

当たり判定 確率 ゆれる照準
花火職人の作り方

花火職人の作り方

放物線 タイミング判定 パーティクル
ブロックパズル スプリント40の作り方

ブロックパズル スプリント40の作り方

モード分岐 タイム計測 共有エンジン
スパイダー・ソリティアの作り方

スパイダー・ソリティアの作り方

配列 ルール判定 難易度設計
フリーセルの作り方

フリーセルの作り方

配列 ルール判定 自動回収
ピラミッドの作り方

ピラミッドの作り方

二次元配列 覆い判定 山札
ソリティアの作り方

ソリティアの作り方

配列 ルール判定 Undo機能
花札こいこいの作り方

花札こいこいの作り方

配列で表す 役判定 CPU AI
麻雀ソリティアの作り方

麻雀ソリティアの作り方

自由牌の判定 必ず解ける問題 立体の重なり
巨大スイーツ工場の作り方

巨大スイーツ工場の作り方

マージゲーム ドラッグ&ドロップ 配列で盤面管理
金魚すくいの作り方

金魚すくいの作り方

Canvas 円の当たり判定 耐久システム
反応速度テストの作り方

反応速度テストの作り方

performance.now 状態管理 setTimeout
ひなランの作り方

ひなランの作り方

Canvas 3レーン管理 重力ジャンプ
さかなつりバトルの作り方

さかなつりバトルの作り方

Canvas描画 確率の抽選 ゲームバランス
ぴったりブロックの作り方

ぴったりブロックの作り方

2次元配列 Pointer Events ライン消去
シルエットクイズの作り方

シルエットクイズの作り方

Canvasに絵文字 source-inで黒塗り 4択クイズ
アップクイズの作り方

アップクイズの作り方

Canvasに絵文字 ズームアニメ 3択クイズ
まるさんかくお絵かき採点の作り方

まるさんかくお絵かき採点の作り方

Canvasに手描き 図形マッチング %で採点
ぴったり半分カットの作り方

ぴったり半分カットの作り方

アニメーション 位置を%に変換 平均で採点
色水パズルの作り方

色水パズルの作り方

配列で表す ルール判定 必ず解ける問題
違う色さがしの作り方

違う色さがしの作り方

CSS Grid RGBの色計算 タイム計測
タワーディフェンス2の作り方

タワーディフェンス2の作り方

複数経路 ホーミング弾 タワー合体
タワーディフェンスの作り方

タワーディフェンスの作り方

経路探索 タワーAI ウェーブ管理
おさかなサバイバルの作り方

おさかなサバイバルの作り方

Canvas描画 当たり判定 マウス追従
リバーシの作り方

リバーシの作り方

ゲームAI 石反転 有効手判定
弾幕シューティングの作り方

弾幕シューティングの作り方

弾幕パターン 三角関数 当たり判定
横スクロールシューティングの作り方

横スクロールシューティングの作り方

スクロール パワーアップ オプション追従
スライムジャンパーの作り方

スライムジャンパーの作り方

重力 プラットフォーム カメラ
すいすいバードの作り方

すいすいバードの作り方

重力 柱の生成 当たり判定
シューティングゲームの作り方

シューティングゲームの作り方

弾丸管理 敵生成 当たり判定
パクパク迷路の作り方

パクパク迷路の作り方

タイルマップ ゴーストAI 壁判定
インベーダーゲームの作り方

インベーダーゲームの作り方

グリッド移動 ピクセルアート 矩形判定
ひな壇飾りパズルの作り方

ひな壇飾りパズルの作り方

ドラッグ&ドロップ Canvas描画 座標計算
ブロックパズルの作り方

ブロックパズルの作り方

回転処理 行消去 落下タイマー
ブロック崩しの作り方

ブロック崩しの作り方

ボール物理 反射角計算 ブロック判定
2048の作り方

2048の作り方

2次元配列 タイルマージ キー入力
迷路ゲームの作り方

迷路ゲームの作り方

迷路生成 再帰 グリッド操作
フルーツマージの作り方

フルーツマージの作り方

物理エンジン 衝突マージ Matter.js
マインスイーパーの作り方

マインスイーパーの作り方

再帰処理 グリッド 爆弾配置
お絵かきクイズの作り方

お絵かきクイズの作り方

Canvas描画API イベント処理 フェーズ管理
倉庫番の作り方

倉庫番の作り方

2次元配列 プッシュ判定 Undo機能
リズムゲームの作り方

リズムゲームの作り方

タイミング判定 譜面データ アニメーション
へびゲームの作り方

へびゲームの作り方

キュー操作 グリッド移動 衝突判定
神経衰弱の作り方

神経衰弱の作り方

配列シャッフル 状態管理 マッチング
もぐらたたきの作り方

もぐらたたきの作り方

ランダム出現 クリック判定 タイマー
カラーマッチの作り方

カラーマッチの作り方

DOM操作 タイマー ランダム色
15パズルの作り方

15パズルの作り方

配列操作 クリック 解法判定
数独の作り方

数独の作り方

バックトラッキング 制約チェック パズル生成
キャッチゲームの作り方

キャッチゲームの作り方

落下オブジェクト スコア管理 難易度変化
三目並べの作り方

三目並べの作り方

ミニマックスAI 勝利判定 ターン管理
ポンゲームの作り方

ポンゲームの作り方

ボール反射 AI対戦 Canvas
サイモンゲームの作り方

サイモンゲームの作り方

シーケンス記憶 配列比較 フィードバック
単語探しの作り方

単語探しの作り方

2次元配列 単語配置 ドラッグ選択
ひなぷよの作り方

ひなぷよの作り方

BFS探索 連鎖処理 重力落下
謎の書斎からの脱出の作り方

謎の書斎からの脱出の作り方

状態管理 シーン遷移 インベントリ
間違い探しの作り方

間違い探しの作り方

配列コピー スワップ生成 レベル設計
猫をさがせ!の作り方

猫をさがせ!の作り方

イベント委譲 CSSグリッド タイマー
10秒チャレンジの作り方

10秒チャレンジの作り方

高精度タイマー DOM動的生成 localStorage
ないもの探しの作り方

ないもの探しの作り方

記憶フェーズ デコイ生成 タイムボーナス
アナグラムクイズの作り方

アナグラムクイズの作り方

シャッフル タイマー 音声読み上げ
都道府県クイズの作り方

都道府県クイズの作り方

CSS Grid タイル配置 クリック判定
タップ連打王の作り方

タップ連打王の作り方

タイマー クリック判定 アニメーション
じゃんけん何連勝の作り方

じゃんけん何連勝の作り方

CPU AI 頻度集計 確率調整
絵文字翻訳クイズの作り方

絵文字翻訳クイズの作り方

4択クイズ シャッフル コンボ
ハンバーガーチャレンジの作り方

ハンバーガーチャレンジの作り方

落下オブジェクト 当たり判定 難易度変化
イライラめいろの作り方

イライラめいろの作り方

線分の距離計算 当たり判定 マウス追従
タイピングGPの作り方

タイピングGPの作り方

レース ゴースト CPU対戦
都道府県タイピングの作り方

都道府県タイピングの作り方

タイムアタック タイム計測 進捗表示
タイピングクエストの作り方

タイピングクエストの作り方

ステートマシン ターン制 ゲージ
タイピング道場の作り方

タイピング道場の作り方

スコア設計 段位判定 KPM計測
ゾンビタイピングの作り方

ゾンビタイピングの作り方

ロックオン 敵の管理 ウェーブ制
回転寿司タイピングの作り方

回転寿司タイピングの作り方

ローマ字判定 前方一致 アニメーション
タイピングゲームの作り方

タイピングゲームの作り方

キーイベント 文字列比較 WPM計算

教室でもっと深く学ぼう!

ひなテックでは、プロの講師と一緒にゲーム開発を学べます。
わからないところもすぐに質問できる環境で、楽しくステップアップ!

ひなテックについて詳しく見る →