ゲームを作ってみよう!

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

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

NEW ScratchとJavaScriptを見くらべる

ScratchとJavaScriptを見くらべる

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

AI時代のゲームの作り方

プログラミング不要 AIチャット 貼り付けてその場で実行
ひよこクリッカーの作り方

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

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

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

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

しゃてきゲームの作り方

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

花火職人の作り方

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

スプリント40の作り方

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

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

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

フリーセルの作り方

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

ピラミッドの作り方

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

ソリティアの作り方

配列 ルール判定 Undo機能
金魚すくいゲームの作り方

金魚すくいゲームの作り方

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

反応速度テストの作り方

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

ひなランの作り方

Canvas 3レーン管理 重力ジャンプ
ぴったりブロックの作り方

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

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

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

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

アップクイズの作り方

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

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

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

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

アニメーション 位置を%に変換 平均で採点
2048の作り方

2048の作り方

2次元配列 タイルマージ キー入力
おさかなサバイバルの作り方

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

Canvas描画 当たり判定 マウス追従
ブロック崩しの作り方

ブロック崩しの作り方

ボール物理 反射角計算 ブロック判定
キャッチゲームの作り方

キャッチゲームの作り方

落下オブジェクト スコア管理 難易度変化
カラーマッチの作り方

カラーマッチの作り方

DOM操作 タイマー ランダム色
お絵かきクイズの作り方

お絵かきクイズの作り方

Canvas描画API イベント処理 フェーズ管理
すいすいバードの作り方

すいすいバードの作り方

重力 柱の生成 当たり判定
迷路ゲームの作り方

迷路ゲームの作り方

迷路生成 再帰 グリッド操作
神経衰弱の作り方

神経衰弱の作り方

配列シャッフル 状態管理 マッチング
マインスイーパーの作り方

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

再帰処理 グリッド 爆弾配置
ポンゲームの作り方

ポンゲームの作り方

ボール反射 AI対戦 Canvas
15パズルの作り方

15パズルの作り方

配列操作 クリック 解法判定
リバーシの作り方

リバーシの作り方

ゲームAI 石反転 有効手判定
リズムゲームの作り方

リズムゲームの作り方

タイミング判定 譜面データ アニメーション
シューティングの作り方

シューティングの作り方

弾丸管理 敵生成 当たり判定
サイモンゲームの作り方

サイモンゲームの作り方

シーケンス記憶 配列比較 フィードバック
スライムジャンパーの作り方

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

重力 プラットフォーム カメラ
へびゲームの作り方

へびゲームの作り方

キュー操作 グリッド移動 衝突判定
倉庫番の作り方

倉庫番の作り方

2次元配列 プッシュ判定 Undo機能
数独の作り方

数独の作り方

バックトラッキング 制約チェック パズル生成
ブロックパズルの作り方

ブロックパズルの作り方

回転処理 行消去 落下タイマー
三目並べの作り方

三目並べの作り方

ミニマックスAI 勝利判定 ターン管理
タワーディフェンスの作り方

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

経路探索 タワーAI ウェーブ管理
タワーディフェンス2の作り方

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

複数経路 ホーミング弾 タワー合体
タイピングGPの作り方

タイピングGPの作り方

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

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

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

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

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

タイピング道場の作り方

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

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

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

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

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

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

キーイベント 文字列比較 WPM計算
もぐらたたきの作り方

もぐらたたきの作り方

ランダム出現 クリック判定 タイマー
単語探しの作り方

単語探しの作り方

2次元配列 単語配置 ドラッグ選択
アナグラムクイズの作り方

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

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

都道府県クイズの作り方

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

タップ連打王の作り方

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

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

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

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

4択クイズ シャッフル コンボ
弾幕シューティングの作り方

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

弾幕パターン 三角関数 当たり判定
脱出ゲームの作り方

脱出ゲームの作り方

状態管理 シーン遷移 インベントリ
猫をさがせ!の作り方

猫をさがせ!の作り方

イベント委譲 CSSグリッド タイマー
横スクロールシューティングの作り方

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

スクロール パワーアップ オプション追従
ひな壇飾りパズルの作り方

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

ドラッグ&ドロップ Canvas描画 座標計算
インベーダーゲームの作り方

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

グリッド移動 ピクセルアート 矩形判定
ないもの探しの作り方

ないもの探しの作り方

記憶フェーズ デコイ生成 タイムボーナス
パクパク迷路の作り方

パクパク迷路の作り方

タイルマップ ゴーストAI 壁判定
ひなぷよの作り方

ひなぷよの作り方

BFS探索 連鎖処理 重力落下
間違い探しの作り方

間違い探しの作り方

配列コピー スワップ生成 レベル設計
フルーツマージの作り方

フルーツマージの作り方

物理エンジン 衝突マージ Matter.js
10秒チャレンジの作り方

10秒チャレンジの作り方

高精度タイマー DOM動的生成 localStorage
ハンバーガーチャレンジの作り方

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

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

イライラめいろの作り方

線分の距離計算 当たり判定 マウス追従
違う色さがしの作り方

違う色さがしの作り方

CSS Grid RGBの色計算 タイム計測
色水パズルの作り方

色水パズルの作り方

配列で表す ルール判定 必ず解ける問題

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

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

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