ドットインストール - 3分動画でマスターできるプログラミング学習サービス
レッスン一覧
料金プラン
レッスン一覧
料金プラン
ログイン
運営からのお知らせ
2024/09/05
NEW
【週刊ドットインストール】 レッスン制作の進捗、256timesのエディター更新、メンタリングの現場から
PREMIUM
【旧版】JavaScriptで作る「神経衰弱」
JavaScriptで神経衰弱ゲームを作ってみます。解くまでにかかった時間をカウントする機能も実装します。
0%
このレッスンはアーカイブされました
このレッスンは視聴可能ですが、質問の受付や内容の更新は終了しております。
動画レッスン一覧
(10)
#01 神経衰弱 - 画面を作る
(01:43)
無料公開中
buttonタグを使って4×4のボタンを作ります。
未完了
#02 ボタンに数値を割り当てる
(02:22)
無料公開中
forループとrandomでランダムな数値をボタンに割り当てます。
getElementIdとvalueを操作してボタンに数値を表示させます。
未完了
#03 ペアを作る
(02:04)
無料公開中
Math.floorを使ってペアの数値を作っていきます。
ボタンにそれらを表示させ、動作確認を行います。
未完了
#04 カードを開けたときの処理
(02:36)
onclickイベントをボタンに設定します。
flipという関数をつくり、処理の概要をコメントで記述します。
未完了
#05 1枚目のカードを開けたときの処理
(01:58)
今開いたカードの数値を変数に保存します。
ボタンにその数値を表示させます。
1枚開いたよ、という状態を変数に保存します。
未完了
#06 2枚目のカードを開けたときの処理
(02:08)
2枚目のカードの値を取得します。
そのカードが前回開いた値と一緒か判定するためのif文を書きます。
1枚開いたよ、という変数をfalseにして次のペアに備えます。
未完了
#07 はずれたときの処理
(02:23)
開かれた2つのカードを「?」に戻します。
setTimeoutを使って上記の処理を時間差で実行します。
未完了
#08 当たったときの処理
(01:56)
何枚ペアができたかを格納するcardsCountという変数を作り、+1します。
cardsCountが7より大きかったらゲーム終了処理をします。
未完了
#09 スコア計算をする
(02:44)
setTimeoutを使ってプレイ時間を計算します。
その結果をリアルタイムにHTMLへ反映させていきます。
未完了
#10 ゲームオーバーを確認する
(01:42)
ゲームオーバー処理を確認するためにボタンに数値の値を表示させます。
動作確認をします。
未完了
リリース情報(note)
記事はありません。
詳細情報
最終更新日
2011年11月17日