javascriptを使ったタイピングゲーム作成の難易度を教えて下さい

javascriptの勉強で下記タイピングゲームを写経しているのですが、難しすぎてなかなか再現出来ません

このタイピングゲームは初心者でも簡単に思いつくものなのでしょうか？
また、難易度的には簡単なのでしょうか？

簡単であれば、この様なプログラムを書くコツを教えて頂けないでしょうか？

html
1<body onload="gameSet()">
2
3<div id="waku"></div>
4</body>

javascript
1<script>
2
3document.onkeydown = typeGame;  //キー押下時に関数typeGame()を呼び出す
4    
5
6
7//文字を格納する配列
8var moji = new Array("Ａ","Ｂ","Ｃ","Ｄ","Ｅ","Ｆ","Ｇ","Ｈ","Ｉ",
9                     "Ｊ","Ｋ","Ｌ","Ｍ","Ｎ","Ｏ","Ｐ","Ｑ","Ｒ",
10                     "Ｓ","Ｔ","Ｕ","Ｖ","Ｗ","Ｘ","Ｙ","Ｚ");
11
12//キーコードを格納する配列
13var kcode = new Array(65,66,67,68,69,70,71,72,73,
14                      74,75,76,77,78,79,80,81,82,
15                      83,84,85,86,87,88,89,90);
16
17//0～25までの乱数を格納する配列
18var rnd = new Array();
19
20
21
22
23
24//グローバル変数群
25var mondai = "";       //問題の文字列を格納
26var cnt=0;             //何問目か格納
27var typStart,typEnd;   //開始時と終了時の時刻を格納
28
29
30
31
32
33//0～25までの乱数を200個作成して配列rndに格納する関数
34function ransu()
35{
36  for ( var i = 0 ; i < 200 ; i++ )
37  {
38    rnd[i] = Math.floor( Math.random() * 26 );
39  }
40}
41
42
43//タイピングゲームの問題をセットする関数
44function gameSet()
45{
46  //問題文とカウント数をクリアする
47  mondai="";
48  cnt=0;
49  
50  //乱数作成関数の呼び出し
51  ransu();
52  
53  //問題文の作成（配列mojiの要素をランダムに200文字繋げる）
54  //mondai= "" + moji[rnd[0]] + moji[rnd[1]] + … + moji[rnd[199]]となる
55  for ( var i = 0 ; i < 200 ; i++)
56  {
57    mondai =  mondai + moji[ rnd[i] ];
58  }
59  
60  //問題枠に表示する
61  document.getElementById("waku").innerHTML = mondai;
62}
63
64
65//キー入力を受け取る関数
66function typeGame(evt)
67{
68  var kc;  //入力されたキーコードを格納する変数
69  
70  //入力されたキーのキーコードを取得
71  if (document.all)
72  {
73    kc = event.keyCode;
74  }
75  else
76  {
77    kc = evt.which;
78  }
79  //入力されたキーコードと、問題文のキーコードを比較
80  if (kc == kcode[ rnd[cnt] ])
81  {
82    //以下、キーコードが一致した時の処理
83
84    //最初の1文字が入力された時間を記録する
85    if (cnt==0)
86    { 
87      typStart = new Date();
88    }
89    
90    cnt++; //カウント数を＋１にする
91    
92    //全文字入力したか確認
93    if ( cnt < 200)
94    {
95      //問題文の頭の一文字を切り取る
96      mondai = mondai.substring(1,mondai.Length);
97
98      //問題枠に表示する
99      document.getElementById("waku").innerHTML = mondai;
100    }
101    else
102    {
103      //全文字入力していたら、終了時間を記録する
104      typEnd = new Date();
105      
106      //終了時間－開始時間で掛かったミリ秒を取得する
107      var keika = typEnd - typStart;
108      
109      //1000で割って「切捨て」、秒数を取得
110      var sec = Math.floor( keika/1000 );
111      
112      //1000で割った「余り(%で取得できる）」でミリ秒を取得
113      var msec = keika % 1000;
114      
115      //問題終了を告げる文字列を作成
116      var fin="GAME終了　時間："+sec+"秒"+msec;
117      
118      //問題枠にゲーム終了を表示
119      document.getElementById("waku").innerHTML = fin;
120    }
121  }
122}
123</script>

行動規範の内容に同意します

回答2件

ベストアンサー

難易度が簡単かどうかはどれくらいこだわるかにも依ります。
シンプルなものならそこまで難しいものではないかと。

コツですが、いきなり全体を見るのではなく、完成までの道のりを一つずつ考えていくのが良いかと思います。
今回であれば、完成はタイピングゲームですが、
それまでにまず、
・問題となる文字を選ぶ（33~~40、50~~58,9596行目）
・その文字を表示する（6061,9899行目）
・入力を受け付ける（6578行目）
・入力した文字がその文字と同じか判断する（7981行目）
・スコアを計算、表示する（90,103120行目）
（行数はJavascriptをコピーしてエディタに貼り付けた時のおおよその行数です）
大雑把に分けてこれくらいあるかと思います。
これを順番に一つずつ書いていき、途中で気に入らない箇所が出てきたら書き直していけば良いです。