Javascriptでのタイピングゲームの修正

jqueryでタイピングゲームを作りました。
自分の力のみで、作り上げたのでかなりコードが汚いかと思われます。笑
もう少しスマートにかける方法などございましたらご教授ねがいたいです！

###htmlファイル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset = "UTF-8">
  <title>hello</title>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
</head>
<body>
<h1 id="question" style="text-align:center;">click to start</h1>
<script>
  $(function(){

    var i = 0;
    var missType = 0;
    var wordsCount = 0;
    var start = null
    var end = null
      var words = ["apple","imagine","sky","supply","west"];
      $("#question").on('click',function(){
        $(this).text(words[i]);
        start = new Date().getTime();
        missType = 0;
      });

      $(this).on('keypress',function(e){
        if ($("#question").text() != "click to start"){
        if ($("#question").text().substr(0,1) == String.fromCharCode(e.keyCode)){
        var new_word = $("#question").text().substr(1);
        $("#question").text(new_word);
      }else{
        missType += 1;
      }
    }
    });

      $(this).on('keyup',function(){
        if($("#question").text() == ""){
          wordsCount += words[i].length;
          if(words[i+1] != null){
          i += 1;
          $("#question").text(words[i]);
        }else{
          end = new Date().getTime();
          var total = end -start;
          alert("文字合計は、"+ wordsCount +"で、ミス回数は" + missType + "で" + total/1000 + "かかりました。");
          console.timeEnd("time");
          i = 0;
          missType = 0;
          wordsCount = 0;
          $("#question").text("click to start");
        };

        };

      });


        });



</script>
</body>
</html>

kei344

2016/07/28 19:21

コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。また、何がわからないのかを明確にしてください。

kabutomusi1

2016/07/29 16:34

ご指摘ありがとうございます！質問に関しては、「何がわからないのかも分からない」という状況です。笑動作自体はするのですが、自分の書いたコードに無駄が多いのではないのかということを感じていて、その修正案などがあったら教えて欲しいという旨の質問です！非常にわかりにくくてすいません。

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

回答1件

ベストアンサー

まずは、イベントと関数を分けてみてはいかがでしょうか？
大局的に見ると、処理をもう少し細かく関数化してみると、記述に関して見えてくるものも多いと思います。
どうしても、最初は、処理を全部一緒に考えてしまいがちなので、細かく処理を分けるってことですね。
良書として、
「メンテナブルJavaScript」
（https://www.oreilly.co.jp/books/9784873116105/）」をお勧めします。

例）※変数名、関数名等、テキトウなので、全体イメージとして見ていただければと思います。

.....
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
<script> 
$(function(){
  //変数宣言
  var i = 0; 
  var missType = 0; 
  var wordsCount = 0; 
  var start = null 
  var end = null 
  var words = ["apple","imagine","sky","supply","west"]; 

  //関数
  function question(){ 
    $(this).text(words[i]); 
    start = _getTime(); 
    _resetValue();
  });
  function _resetValue(){
    return new Date().getTime();
  }
  function _resetValue(){ 
    missType = 0; 
  } 
  function keyStart(e){ 
    if ($("#question").text() != "click to start"){ 
      ....................
   }
  } 

  //イベント
  $("#question").on('click',question);
  $(this).on('keypress',keysEvent);
  $(this).on('keyup', keysUpEvent);
  $(this).on('keydown', keysdownEvent);
  $(this).on('keymove', keysmoveEvent);
});
</script>

変数もGlobal使用する場合は、１つだけオブジェクトで用意して
「 G.i や G.missType 」などで使ったほうが良いですかね。

var G = {
  i: 0, 
  missType :0, 
  wordsCount : 0, 
  start : null 
}

まだ始めたばかりだと思いますので、少しずつレベルアップすれば良いと思いますので、
沢山記述して、沢山バグ出して、作る経験をすることが大事だと思います。
それと、良書・良いコードを見ることですね。
がんばってください。

投稿2016/07/29 00:18

daisukeyamazaki

総合スコア213

kabutomusi1

2016/07/29 16:42

ありがとうございます！確かに細かく分ければ分けるほど、コードを一目したときにどんな動作をしているのか分かりやすくなりますね！修正してみます！本もぜひ参考にさせていただきます！

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Javascriptでのタイピングゲームの修正

関連した質問