ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/05/25
NEW
週刊ドットインストール(2023/05/25号)を更新しました!
2023/05/24
NEW
ポートフォリオ掲載可能!実案件をイメージした新クラス、『Webアプリ案件修行 ダミーデータジェネレータ編』をリリースしました
PREMIUM
【旧版】JavaScriptでスロットマシンを作ろう
JavaScriptを使って、スロットマシンを作る方法を見ていきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
JavaScriptでスロットマシンを作ろう
JavaScriptでスロットマシンを作る方法を学んでいきます。
0%
動画レッスン一覧
(11)
未完了
#01 スロットマシンを作ってみよう
(02:45)
無料公開中
完成版の確認
index.htmlの作成
imgフォルダの確認
main.jsの作成
styles.cssの作成
未完了
#02 マークアップをしていこう
(02:58)
無料公開中
スロットのアップ
ボタンのマークアップ
bodyのスタイリング
未完了
#03 画面のスタイリングをしよう
(02:52)
無料公開中
スロットのスタイリング
ボタンのスタイリング
未完了
#04 ボタンのスタイリングを完成させよう
(02:18)
ボタンのスタイリング
未完了
#05 JavaScriptを書く準備をしよう
(02:36)
JavaScriptの読み込み
要素の取得
配列の作成
未完了
#06 SPINボタンを実装していこう
(02:52)
SPIN?ボタンの実装
runSlot()の作成
未完了
#07 STOP機能を実装しよう
(02:54)
STOPボタンの実装
data属性の使用
clearTimeoutの設定
未完了
#08 結果判定機能を実装しよう
(02:33)
stopCountの用意
checkResults()の作成
未完了
#09 揃わなかったパネルの色を薄くしよう
(02:47)
unmatchedクラスの作成
結果判定の実装
動作確認
未完了
#10 ボタンの見た目を変化させよう
(02:57)
inactiveクラスの作成
ボタン変化の実装
動作確認
未完了
#11 スロットを完成させよう
(02:56)
SPINボタンの微調整
STOPボタンの微調整
角丸の調整
ギャラリー
このレッスンについて
最終更新日
2017年9月27日
バージョン情報
HTML5 / CSS / CSS3 / JavaScript
関連キーワード
(6)
基礎講座
(368)
初心者向け
(367)
HTML
(115)
CSS
(116)
JavaScript
(147)
ミニプログラム
(142)
このレッスンを共有する