ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/04/26
NEW
あなただけの学習ロードマップを作成します 【GW学習を加速】
2024/04/25
NEW
【週刊ドットインストール】 JSに力尽きてしまった…という方におすすめのレッスン第二弾、ページデザインのモダン化が進行中
PREMIUM
JavaScriptでハイアンドローゲームを作ろう
JavaScriptを使って、ハイアンドローゲームを作る方法を見ていきます。
0%
このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
動画レッスン一覧
(15)
#01 ハイアンドローを作ってみよう
(02:38)
無料公開中
完成版の確認
index.htmlの作成
main.jsの作成
styles.cssの作成
未完了
#02 ゲーム画面のマークアップをしよう
(02:38)
無料公開中
マークアップ
styles.cssの読み込み
スタイル設定
未完了
#03 領域を横に並べていこう
(02:48)
無料公開中
領域の横並び
ボタンのマークアップ
未完了
#04 ボタンのスタイルを整えよう
(02:13)
無料公開中
ボタンのスタイリング
未完了
#05 要素を絶対配置していこう
(02:47)
ボタンの配置
未完了
#06 カードを作り込んでいこう
(02:33)
カードのマークアップ
カードのスタイリング
未完了
#07 カードの回転処理を作ろう
(01:55)
カードの回転処理
未完了
#08 回転処理を完成させよう
(02:12)
transform-styleの設定
perspectiveの設定
未完了
#09 JavaScriptを扱う準備をしよう
(02:41)
main.jsの読み込み
要素の取得
未完了
#10 数字をランダムに表示させよう
(02:15)
ランダム表示処理の実装
未完了
#11 カードの数字を比較しよう
(02:37)
higherのクリックイベント設定
lowerのクリックイベント設定
check()の実装
未完了
#12 比較結果を表示しよう
(02:42)
getResultStr()の実装
動作確認
resultのスタイリング
未完了
#13 リトライ機能を実装しよう
(02:39)
リトライ機能の実装
transitionendイベントの設定
未完了
#14 ボタンの見た目を作り込もう
(02:11)
ボタンのスタイリング
未完了
#15 ゲームを完成させよう
(01:47)
ゲームの微調整
未完了
リリース情報(note)
『JavaScriptでハイアンドローゲームを作ろう』を追加しました
関連キーワード
基礎講座
(400)
初心者向け
(388)
HTML
(119)
CSS
(121)
JavaScript
(162)
ミニプログラム
(143)
詳細情報
最終更新日
2017年10月31日
バージョン情報
HTML5 / CSS / CSS3 / JavaScript