JavaScriptで宝探しゲームを作ろう
(全10回)
JavaScriptを使って、宝探しゲームを作る方法を見ていきます。
このレッスンでは HTML5 / CSS / CSS3 / JavaScript を使用しています。
-
#01 宝探しゲームを作ってみよう (02:45) 無料公開中
- 完成版の確認
- index.htmlの作成
- imgフォルダの確認
- main.jsの作成
- styles.cssの作成
-
#02 宝箱を配置しよう (02:55) 無料公開中
- 宝箱のマークアップ
- styles.cssの読み込み
- 宝箱のスタイリング
-
#03 配置のズレを修正しよう (01:56) 無料公開中
- 画像の配置修正
-
#04 動きをつけてみよう (01:52)
- shakeクラスの作成
- アニメーションの設定
-
#05 アニメーションを作り込もう (01:52)
- @keyframesの設定
- 動作確認
-
#06 宝箱を開けてみよう (02:45)
- main.jsの読み込み
- クリックイベントの設定
-
#07 画像をランダムに表示しよう (01:50)
- 配列の作成
- ランダム表示の実装
-
#08 全ての宝箱が開くようにしよう (02:39)
- disabledクラスの作成
- クリックイベントの設定
-
#09 リスタート機能を作ろう (02:47)
- リスタートボタンの実装
- inactiveクラスの作成
-
#10 ゲームを完成させよう (02:11)
- リスタート機能の完成
- ゲームの微調整
- 字下げの修正
