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

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

ただいまの
回答率

90.33%

出力された数字を変わらなくしたい

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 131

lilbear

score 13

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>タイピングゲーム</title>
    <link rel="stylesheet" type="text/css" href="css/typing.css">
  </head>
<body>

  <p id="target">Click to start</p>

  <p class="info" >
    Letter count ; <span id="score">0 </span>,
    Miss count ; <span id="miss">0 </span>,
  </p>

<!-- 結果発表 -->
<div class="cantsee" id="cantseeresult">
  <h2>あなたの結果は</h2>
  <p id="itsresult"><span id="result">1</span>点です</p>
</div>

<!-- //全体を暗くする -->
<div id='surround'></div>


    <script src="js/main.js"></script>
</body>
</html>
body{
  margin: 0;
  padding-top: 15%;
  text-align: center;
  font-family: 'courier' monospace;
}

#target{
  font-size: 48px;
  letter-spacing: 3px;
  z-index: 50;
}

.info{
  color: #ccc;
  z-index: 50;
}

.cantsee{
  display: none;
}
#result{
  font-size: 40px;
  font-weight: bold;
}
.resultpart{
  position: fixed;
  width: 60%;
  height: 150px;;
  top:20%;
  right: 20%;
  z-index: 150;
  background: white;
  border: solid 8px orange;
}

/* 暗くする */
.black{
  position: absolute;
  top:0;
  display: fixed;
  width: 100%;
  height: 700px;
  background: black;
  opacity: 0.8;
  z-index: 100;
}
h2{
  margin: 0;
}
#itsresult{
   font-size: 30px;
}
'use strict';


  const words = ['apple', 'grape', 'orange','lemon', 'peach' , 'watermelon', 'pear', 'lychee','pineapple', 'strawberry' ]
  let word = words[Math.floor(Math.random() * words.length)];
  //今打ってる文字の位置
  let loc = 0;
  //正しく打てた時
  let score = 0;
  //間違った時
  let miss = 0;
  //正解した問題数
  let howMany = 0;

  //wordのでるところ
  const target = document.getElementById('target');

//そのwordの文字を打ち終わった時の_を出すための処理
  function upDateTarget(){
    let placeHolder = '';
    for(let i = 0; i<loc; i++){
      placeHolder += '_';
    }
     target.textContent = placeHolder + word.substring(loc);
  }

//指定数のwordが終わったらスコアを出す処理
function resultScore(){
    let result = document.getElementById('result');
    let total = score + miss;
    let totalscore = Math.floor(score / total * 100);
      result.textContent = totalscore;
    //結果画面を表示
    const cantseeResult = document.getElementById('cantseeresult');
    cantseeResult.classList.remove('cantsee');
    cantseeResult.classList.add('resultpart');
    //画面全体を暗く
    const surround = document.getElementById('surround');
    surround.classList.add('black');
}

//途中のスコア、ミスの数を表示するため
let scoreLabel = document.getElementById('score');
let missLabel  = document.getElementById('miss');



window.addEventListener('click',()=>{
  upDateTarget();
});


//タイピングしてる時の処理
window.addEventListener('keyup',e => {
      console.log(e.key);

  if (e.key === word[loc] ){
      loc++;
         //そのwordが一つ終わった時の処
          if(loc === word.length){
                word = words[Math.floor(Math.random() * words.length)];
                loc=0;
                howMany++
            }

      score++;
      upDateTarget();
    scoreLabel.textContent = score;
  }else{
      miss++;
      missLabel.textContent = miss;
  }

          //wordが指定数クリアしたら結果をだす
          if(howMany===3){
            resultScore();
          }

});

イメージ説明

タイピングゲームのようなものを作っていて、最後の結果の部分が表示されたら
その後にキーボードのどこを打っても結果の数字が変わらないようにしたいと思っています。

今のコードの状態だと最後の結果が表示された後もどこかキーボードを打つとその分の点数が減らされた点数に変わってしまいます。

何か対策等ありましたらよろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

グローバルでフラグを持っておきデフォルトfalse
スコアが表示されるresultScore()の処理でtrueにして
あとkeyupイベント冒頭でそのフラグがtrueのときにreturnさせては如何でしょうか。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/14 00:14

    すいませんsalesはfalseの書き間違いです。
    アドバイスを頂いたようにフラグを作ってそれに沿ってコードを書いていったら解決できました。
    少しfalse trueの使い方がわかった気がします。
    ありがとうございます。

    キャンセル

  • 2019/08/14 05:25

    フラグはあくまで「onかoffかを管理するもの」と覚えておくと良いかもしれません。JavaScriptですとよく「特定のクラスがついてるかどうか」で判断することがあるのですが、それもフラグですね。

    キャンセル

  • 2019/08/14 17:34

    アドバイスありがとうございます

    キャンセル

checkベストアンサー

+1

こんにちは
いろいろなやり方が考えられそうですので、一案ということで回答します。

ご質問に挙げられているjavascriptのコードを、以下の3点で修正します。

(1) 以下の、タイピングしてる時の処理

//タイピングしてる時の処理
window.addEventListener('keyup',e => {
 // ・・・ keyupハンドラ本体
});


で、  keyupイベントリスナに設定している関数 e => { ・・・ }を抜き出して個別の関数にする。例えば名前を keyupHandler にして、

function keyupHandler(e) {
 // ・・・ keyupハンドラ本体
}

 
のように宣言しておく。

(2) 上記の関数 keyupHandler を使って、タイピングしてる時の処理を、以下のように修正する。

//タイピングしてる時の処理
window.addEventListener('keyup', keyupHandler);

上記の (1)(2) だけでは、単に keyupハンドラを個別に関数宣言したに過ぎないので、ご質問にある

最後の結果が表示された後もどこかキーボードを打つとその分の点数が減らされた点数に変わってしまいます。

という状況に変わりはありませんが、以下の(3)に書いた一行を追加をすると、

最後の結果の部分が表示されたらその後にキーボードのどこを打っても結果の数字が変わらないように

することができると思います。

(3) keyupHandler 本体の中で、以下の一行を追加

  //wordが指定数クリアしたら結果をだす
  if(howMany===3){
    resultScore();
    window.removeEventListener('keyup', keyupHandler); // この行を追加
  }

以下は、上記(1)(2)(3)の修正後のコード全体です。

'use strict';


const words = ['apple', 'grape', 'orange','lemon', 'peach' , 'watermelon', 'pear', 'lychee','pineapple', 'strawberry' ]
let word = words[Math.floor(Math.random() * words.length)];
//今打ってる文字の位置
let loc = 0;
//正しく打てた時
let score = 0;
//間違った時
let miss = 0;
//正解した問題数
let howMany = 0;

//wordのでるところ
const target = document.getElementById('target');

//そのwordの文字を打ち終わった時の_を出すための処理
function upDateTarget(){
  let placeHolder = '';
  for(let i = 0; i<loc; i++){
    placeHolder += '_';
  }
  target.textContent = placeHolder + word.substring(loc);
}

//指定数のwordが終わったらスコアを出す処理
function resultScore(){
  let result = document.getElementById('result');
  let total = score + miss;
  let totalscore = Math.floor(score / total * 100);
  result.textContent = totalscore;
  //結果画面を表示
  const cantseeResult = document.getElementById('cantseeresult');
  cantseeResult.classList.remove('cantsee');
  cantseeResult.classList.add('resultpart');
  //画面全体を暗く
  const surround = document.getElementById('surround');
  surround.classList.add('black');
}

// keyup ハンドラ
function keyupHandler(e) {
  console.log(e.key);

  if (e.key === word[loc] ){
    loc++;
    //そのwordが一つ終わった時の処
    if(loc === word.length){
      word = words[Math.floor(Math.random() * words.length)];
      loc=0;
      howMany++
    }

    score++;
    upDateTarget();
    scoreLabel.textContent = score;
  }else{
    miss++;
    missLabel.textContent = miss;
  }

  //wordが指定数クリアしたら結果をだす
  if(howMany===3){
    resultScore();
    window.removeEventListener('keyup', keyupHandler); // この行を追加
  }
}

//途中のスコア、ミスの数を表示するため
let scoreLabel = document.getElementById('score');
let missLabel  = document.getElementById('miss');

window.addEventListener('click',()=>{
  upDateTarget();
});

//タイピングしてる時の処理
window.addEventListener('keyup', keyupHandler);

再スタートするときは、もう一度、 

window.addEventListener('keyup', keyupHandler);


を行って、 keyupHandler をkeyupリスナに設定すればよいかと思います。

以上、参考になれば幸いです。

余談
ご質問に挙げられている HTML, CSS, JS をコピペして各ファイルを作り、ブラウザに表示させて動かしてみましたが、よく出来てますね。ステージが進むと、だんだんとタイピングの難しい単語が出てきたりすると面白そうです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/08/13 23:56

    おかげさまで解決できました。
    丁寧な解説ありがとうございます。
    結果を最後に表示する処理の部分は自分で考えて作りましたがタイピングの部分はドットインストールを参考に作らせてもらいました。
    お褒めのお言葉ありがとうございます。
    ご提案いただいたステージが進むにつれて難しくなるという処理もチャレンジしてみようと思います。

    キャンセル

  • 2019/08/14 00:12

    どういたしまして。解決されたとのことで、よかったです👏

    キャンセル

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

  • ただいまの回答率 90.33%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る