ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/11/30
NEW
【週刊ドットインストール】 サービス開始12周年!、Tailwind CSS入門リリース、256timesにて回答ボット稼働開始
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クラスの作成
ゲームの微調整
リリース情報(note)
『JavaScriptで神経衰弱を作ろう』を追加しました
関連キーワード
基礎講座
(386)
初心者向け
(379)
HTML
(116)
CSS
(118)
JavaScript
(158)
ミニプログラム
(143)
詳細情報
最終更新日
2017年10月30日
バージョン情報
HTML5 / CSS / CSS3 / JavaScript