ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/09/05
NEW
【週刊ドットインストール】 レッスン制作の進捗、256timesのエディター更新、メンタリングの現場から
PREMIUM
JavaScriptで数字タッチゲームを作ろう
JavaScriptで数字をタッチしていくゲームを作る方法について見ていきます。
0%
このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
JavaScript入門 基礎文法編
(全27回)
PREMIUM
PREMIUM
0%
JavaScript入門 関数編
(全12回)
PREMIUM
PREMIUM
0%
JavaScript入門 データ構造編
(全27回)
PREMIUM
PREMIUM
0%
JavaScript入門 DOM編
(全22回)
PREMIUM
PREMIUM
0%
JavaScript入門 数値操作編
(全8回)
PREMIUM
PREMIUM
0%
JavaScript入門 日時操作編
(全8回)
PREMIUM
PREMIUM
0%
JavaScript入門 タイマー編
(全10回)
PREMIUM
PREMIUM
0%
JavaScript入門 クラス編
(全19回)
PREMIUM
PREMIUM
0%
動画レッスン一覧
(18)
質問と回答
(79)
#01 数字タッチゲームを作ってみよう
(02:55)
無料公開中
完成版の確認
index.htmlの作成
styles.cssの作成
main.jsの作成
未完了
#02 必要な要素を揃えよう
(01:59)
無料公開中
HTMLのマークアップ
未完了
#03 全体のスタイルを整えよう
(03:01)
無料公開中
bodyのスタイリング
boardのスタイリング
未完了
#04 パネルのスタイルを整えよう
(02:56)
無料公開中
余白の設定
パネルのスタイリング
未完了
#05 パネルを整列させよう
(02:13)
Flexboxの設定
pressedクラスのスタイリング
未完了
#06 ボタンのスタイルを整えよう
(02:59)
STARTボタンのスタイリング
未完了
#07 JavaScriptでパネルを生成しよう
(02:53)
Boardクラス
Panelクラス
未完了
#08 パネルをページに追加しよう
(02:22)
パネルの追加
カプセル化
未完了
#09 ゲームを始めよう
(02:45)
クリックイベントの設定
activate()メソッドの実装
未完了
#10 数値をランダムに配置してみよう
(01:39)
splice
乱数
未完了
#11 ボタンを順番に押せるようにしよう
(02:17)
currentNumの設定
数値チェック
未完了
#12 タイマーを動かしてみよう
(02:56)
タイマーの実装
タイマーの停止
未完了
#13 不具合を修正していこう
(02:03)
不具合の修正
動作確認
未完了
#14 Gameクラスを作ろう
(02:53)
Gameクラス
プロパティ、メソッドの設定
未完了
#15 Gameクラスのインスタンスを渡そう
(02:00)
インスタンスの受け渡し
Boardクラスの設定
Panelクラスの設定
未完了
#16 Panelクラスを修正していこう
(02:24)
Panelクラスの修正
メソッドの実装
未完了
#17 ゲームの難易度を変えてみよう
(02:42)
levelの導入
パネル数の変更
未完了
#18 難易度に合わせてレイアウトを変えよう
(02:57)
幅の変更
定数の導入
動作確認
未完了
#01 数字タッチゲームを作ってみよう
「ファイルを開く」をクリックしてフォルダを指定しても「フォルダーの選択」しか表示されません
2022年1月27日
#02 必要な要素を揃えよう
main タグを使う場合と使わない場合の違いはありますか?
2022年1月27日
#03 全体のスタイルを整えよう
スタイルを指定する時、先頭の記号は何を意味していますか?
2022年1月27日
list-style: none; を #board に付けても li 要素につけても同じ結果になりますが、どちらが正しいのでしょうか?
2022年1月27日
なぜ ul に margin がついていたのですか?
2022年1月27日
#05 パネルを整列させよう
.pressed に対してスタイルを当ててもうまくいきません
2022年2月10日
押し込まれた時のスタイルに translateY() を使ってもよいのですか?
2022年1月27日
id と class はどう使い分けていますか?
2022年1月27日
margin-topとmargin-bottomがなぜそうなるのかわかりません
2022年1月27日
#06 ボタンのスタイルを整えよう
影のカラーコードはどうやって設定しているのですか?
2022年1月27日
ボタンが押し込まれた時のスタイルをtransformで表現してもいいですか?
2022年1月27日
#07 JavaScriptでパネルを生成しよう
クラス構文 constructor() についての動画は、どこでしょうか?
2023年10月26日
<li> 要素を HTML ではなく、JavaScript で生成するのはなぜでしょうか?
2022年1月27日
パネル作成のループでiが使われていないようですが...
2022年1月27日
#08 パネルをページに追加しよう
this は class 派生のものを指すときだけに書くのですか?
2022年8月23日
const board = new Board(); はなぜ変数 board に代入しているのですか?
2022年5月24日
Panel クラスのコンストラクターでは this.getEl(); が書かれていないのはなぜですか?
2022年1月27日
panel.getEL() の部分がよくわかりません
2022年1月27日
createElement() をすれば appendChild() は不要ではないのですか?
2022年1月27日
const board = ... を2回書いていますがいいのでしょうか?
2022年1月27日
クラスのプロパティに直接アクセスしないほうがよい、とはどういう意味ですか?
2022年1月27日
クラスは同じようなものをたくさん作るために使うのではないですか?
2022年1月27日
setupメソッドを作る利点がわかりません
2022年1月27日
elは変数の宣言をする必要がないのでしょうか?
2022年1月27日
#09 ゲームを始めよう
なぜ board.activate() として、その中で panel.activate(0) としたのですか?
2023年9月12日
thisが付くものと付かないものの違いは?
2022年1月27日
なぜ同名のメソッドにするのですか?
2022年1月27日
BoardクラスのactivateとPanelクラスのactivateの区別がつかない
2022年1月27日
#10 数値をランダムに配置してみよう
数字を当てはめる作業を Panel クラスでした場合に Board クラスでの activate が表現しにくくなるのなぜですか?
2022年1月27日
「一つ取り出す」 とはどういう意味ですか?
2022年1月27日
nums.length ではなく 4 と書くとうまく動作しないのは何故ですか?
2022年1月27日
spliceで取り出す数値が重複しないのはなぜですか?
2022年1月27日
spliceの動作が理解できません
2022年1月27日
変数をクラスの外に書いても同じ結果になったのですが...。
2022年1月27日
spliceの後に[0]を記述する理由を知りたい
2022年1月27日
#11 ボタンを順番に押せるようにしよう
parseInt() を Number() に変えても大丈夫でしょうか?
2023年9月15日
なぜ数字ボタンの click イベントはクラス外に記述しないのですか?
2022年2月16日
check メソッドの中の10は何ですか?
2022年1月27日
textContentで取り出した値は常に文字列ですか?
2022年1月27日
#12 タイマーを動かしてみよう
nums の定義を activate() の外でしてはいけないのですか?
2022年2月16日
なぜ nums をactivate 関数の中で定義するのですか?
2022年1月27日
setTimeout をアロー関数にするのは何か意味があるのですか?
2022年1月27日
「currentNum === 4」はなぜ「4」なのですか?
2022年1月27日
setTimeoutの挙動がわからない
2022年1月27日
setTimeoutの第一引数について教えて下さい
2022年1月27日
#13 不具合を修正していこう
timeoutId === 'number' ではなく timeoutId !== 'undefined' とするのはなぜですか?
2022年2月28日
なぜ 'undefined' とするのですか?
2022年1月27日
typeof timeoutId !== 'undefined' の ' ' はなぜ必要なのですか?
2022年1月27日
clearTimeout(timeoutId); はボタンを 2 回以上押した場合タイマーを作動させないという意味でしょうか?
2022年1月27日
クリックするたびに timeoutId の値が大きくなるのはなぜですか?
2022年1月27日
なぜtypeofをつけるのですか?
2022年1月27日
thisやgameの動きがわからない
2022年1月27日
タイマーが止まらない理由がわかりません
2022年1月27日
#14 Gameクラスを作ろう
ほとんど完成しているにも関わらず、どうしてまた新たに Game クラスを作るのでしょうか?
2022年1月27日
this は何を表していますか?
2022年1月27日
this.runTimer(); は runTimer() メソッド内なので this は不要ではないでしょうか?
2022年1月27日
currentNum は let で定義しなくてもいいのですか?
2022年1月27日
thisを使うべき場所がわかりません
2022年1月27日
#15 Gameクラスのインスタンスを渡そう
this.currentNumやthis.timeoutIdに初期値を決めるのはなぜですか?
2023年6月16日
Game クラスのインタスタンスを変数として、その変数を Panel クラス内で使用しても良いのですか?
2022年1月27日
Panel クラスで Game クラスのインスタンスを作っても良いのでしょうか?
2022年1月27日
「this.board = new Board(this);」の挙動がわかりません
2022年1月27日
thisとconstやletの使い分けの理解が難しいです
2022年1月27日
GameクラスのインスタンスをPanelクラスに渡すまでの流れが理解できません
2022年1月27日
コンストラクタに渡されている引数について教えて下さい
2022年1月27日
#16 Panelクラスを修正していこう
this.game.getCurrentNum()++; だとエラーになるのはなぜですか?
2023年9月15日
addCurrentNum()でreturnしなくていいのはなぜですか?
2022年1月27日
#17 ゲームの難易度を変えてみよう
const nums としていますが let nums ではないのでしょうか?
2022年1月27日
「this.level = level;」の位置を変えたら動かなくなりました
2022年1月27日
#18 難易度に合わせてレイアウトを変えよう
+ 'px' を初めて見た気がするのですが、基礎編のどこかで説明されているのでしょうか?
2023年6月22日
プログラマーは何時間でこのようなミニゲームを作れるのでしょうか?
2022年11月24日
オブジェクト編以外でクラスについて学べるレッスンはありますか?
2022年5月19日
パネルの数字を 1 からにする場合はどうしたら良いですか?
2022年2月28日
#container のスタイルから width を消すのはなぜですか?
2022年1月27日
JavaScript の次におすすめのレッスンは?
2022年1月27日
container.style.widthはどう計算しているのですか?
2022年1月27日
setTimeout(this.runTimer, 10)とすると動かないのはなぜですか?
2022年1月27日
containerの幅を設定する関数はBoardクラスでもいいのでは?
2022年1月27日
currentNumは4にはならないのでは?
2022年1月27日
リリース情報(note)
今週は『JavaScriptで数字タッチゲームを作ろう』をリリースしました。
詳細情報
最終更新日
2020年3月12日
バージョン情報
Chrome80 / Visual Studio Code 1.42.1