ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
プレミアム会員
法人でのご利用
レッスン一覧
プレミアム会員
法人でのご利用
ログイン
運営からのお知らせ
2023/09/28
NEW
【週刊ドットインストール】 Java入門のクラス編をリリース、スタッフコラムの更新
PREMIUM
【旧版】JavaScriptで数字タッチゲームを作ろう
JavaScriptで数字をタッチしていくゲームを作る方法について見ていきます。
0%
新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
PREMIUM
JavaScriptで数字タッチゲームを作ろう
JavaScriptで数字をタッチしていくゲームを作る方法について見ていきます。
0%
動画レッスン一覧
(18)
未完了
#01 数字タッチゲームを作ってみよう
(02:20)
無料公開中
完成版の確認
index.htmlの作成
styles.cssの作成
main.jsの作成
未完了
#02 必要な要素を揃えよう
(02:25)
無料公開中
HTMLのマークアップ
styles.cssの読み込み
未完了
#03 全体のスタイルを整えよう
(02:50)
無料公開中
bodyのスタイリング
boardのスタイリング
未完了
#04 パネルのスタイルを整えよう
(02:48)
無料公開中
余白の設定
パネルのスタイリング
未完了
#05 パネルを整列させよう
(01:55)
Flexboxの設定
pressedクラスのスタイリング
未完了
#06 ボタンのスタイルを整えよう
(02:57)
STARTボタンのスタイリング
未完了
#07 JavaScriptでパネルを生成しよう
(02:26)
main.jsの読み込み
Boardクラス
Panelクラス
未完了
#08 パネルをページに追加しよう
(01:53)
パネルの追加
カプセル化
未完了
#09 ゲームを始めてみよう
(02:30)
クリックイベントの設定
activate()メソッドの実装
未完了
#10 数値をランダムに配置してみよう
(01:31)
splice
乱数
未完了
#11 ボタンを順番に押せるようにしよう
(01:59)
currentNumの設定
数値チェック
未完了
#12 タイマーを動かそう
(02:26)
タイマーの実装
タイマーの停止
未完了
#13 不具合を修正していこう
(02:09)
不具合の修正
動作確認
未完了
#14 Gameクラスを作ろう
(02:23)
Gameクラス
プロパティ、メソッドの設定
未完了
#15 Gameクラスのインスタンスを渡そう
(01:53)
インスタンスの受け渡し
Boardクラスの設定
Panelクラスの設定
未完了
#16 Panelクラスを修正していこう
(02:09)
Panelクラスの修正
メソッドの実装
未完了
#17 ゲームの難易度を変更してみよう
(02:23)
levelの導入
パネル数の変更
未完了
#18 難易度に合わせてレイアウトを変えよう
(02:54)
幅の変更
定数の導入
動作確認
リリース情報(note)
ES2017に対応した『JavaScriptで数字タッチゲームを作ろう』をリリースしました
関連キーワード
基礎講座
(380)
中級者向け
(116)
JavaScript (ES2017)
(36)
ミニプログラム
(143)
詳細情報
最終更新日
2019年5月30日
バージョン情報
JavaScript (ES2017)