ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/06/01
NEW
『JavaScript入門 DOM編』をリリースしました
2023/06/01
NEW
週刊ドットインストール(2023/06/01号)を更新しました!
PREMIUM
JavaScriptで神経衰弱を作ろう
JavaScriptを使って、神経衰弱を作る方法を見ていきます。
0%
このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
動画レッスン一覧
(16)
未完了
#01 神経衰弱を作ってみよう
(02:54)
無料公開中
完成版の確認
index.htmlの作成
imgフォルダの確認
main.jsの作成
styles.cssの作成と読み込み
未完了
#02 カードを作って裏返してみよう
(02:56)
無料公開中
カードのマークアップ
カードのスタイリング
未完了
#03 スタイルを整えていこう
(02:38)
無料公開中
カードのスタイリング
未完了
#04 カードを重ねて回転させよう
(01:44)
無料公開中
カードの回転処処理
transform-styleの設定
未完了
#05 回転処理を完成させよう
(02:30)
perspectiveの設定
未完了
#06 JavaScriptでカードを追加しよう
(02:34)
main.jsの読み込み
init()の作成
未完了
#07 カードを動的に生成していこう
(02:58)
createCard()の作成
未完了
#08 カードの配置を完成させよう
(02:49)
flex-boxの設定
cardのクリックイベント設定
未完了
#09 カードの数字をランダムにしよう
(02:35)
ランダム処理の実装
未完了
#10 2枚以上めくれないようにしよう
(02:48)
firstCardの用意
secondCardの用意
flipCountの用意
未完了
#11 正誤判定を実装していこう
(02:16)
check()の作成
未完了
#12 transitionendイベントを使おう
(01:45)
transitionendイベントの設定
未完了
#13 クリアタイムを計測していこう
(02:54)
クリアタイムの計測
未完了
#14 タイマーを完成させよう
(02:42)
timeoutIdの用意
タイマーの停止
未完了
#15 リスタートボタンを作ろう
(02:30)
リスタート機能の実装
未完了
#16 神経衰弱を完成させよう
(02:59)
inactiveクラスの作成
ゲームの微調整
ギャラリー
このレッスンについて
最終更新日
2017年10月30日
バージョン情報
HTML5 / CSS / CSS3 / JavaScript
関連キーワード
(6)
基礎講座
(369)
初心者向け
(368)
HTML
(115)
CSS
(116)
JavaScript
(148)
ミニプログラム
(142)
このレッスンを共有する