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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

498閲覧

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

lilbear

総合スコア19

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/08/13 12:23

html

1<!DOCTYPE html> 2<html lang="en" dir="ltr"> 3 <head> 4 <meta charset="utf-8"> 5 <title>タイピングゲーム</title> 6 <link rel="stylesheet" type="text/css" href="css/typing.css"> 7 </head> 8<body> 9 10 <p id="target">Click to start</p> 11 12 <p class="info" > 13 Letter count ; <span id="score">0 </span>, 14 Miss count ; <span id="miss">0 </span>, 15 </p> 16 17<!-- 結果発表 --> 18<div class="cantsee" id="cantseeresult"> 19 <h2>あなたの結果は</h2> 20 <p id="itsresult"><span id="result">1</span>点です</p> 21</div> 22 23<!-- //全体を暗くする --> 24<div id='surround'></div> 25 26 27 <script src="js/main.js"></script> 28</body> 29</html> 30

css

1 2body{ 3 margin: 0; 4 padding-top: 15%; 5 text-align: center; 6 font-family: 'courier' monospace; 7} 8 9#target{ 10 font-size: 48px; 11 letter-spacing: 3px; 12 z-index: 50; 13} 14 15.info{ 16 color: #ccc; 17 z-index: 50; 18} 19 20.cantsee{ 21 display: none; 22} 23#result{ 24 font-size: 40px; 25 font-weight: bold; 26} 27.resultpart{ 28 position: fixed; 29 width: 60%; 30 height: 150px;; 31 top:20%; 32 right: 20%; 33 z-index: 150; 34 background: white; 35 border: solid 8px orange; 36} 37 38/* 暗くする */ 39.black{ 40 position: absolute; 41 top:0; 42 display: fixed; 43 width: 100%; 44 height: 700px; 45 background: black; 46 opacity: 0.8; 47 z-index: 100; 48} 49h2{ 50 margin: 0; 51} 52#itsresult{ 53 font-size: 30px; 54} 55

JS

1 2'use strict'; 3 4 5 const words = ['apple', 'grape', 'orange','lemon', 'peach' , 'watermelon', 'pear', 'lychee','pineapple', 'strawberry' ] 6 let word = words[Math.floor(Math.random() * words.length)]; 7 //今打ってる文字の位置 8 let loc = 0; 9 //正しく打てた時 10 let score = 0; 11 //間違った時 12 let miss = 0; 13 //正解した問題数 14 let howMany = 0; 15 16 //wordのでるところ 17 const target = document.getElementById('target'); 18 19//そのwordの文字を打ち終わった時の_を出すための処理 20 function upDateTarget(){ 21 let placeHolder = ''; 22 for(let i = 0; i<loc; i++){ 23 placeHolder += '_'; 24 } 25 target.textContent = placeHolder + word.substring(loc); 26 } 27 28//指定数のwordが終わったらスコアを出す処理 29function resultScore(){ 30 let result = document.getElementById('result'); 31 let total = score + miss; 32 let totalscore = Math.floor(score / total * 100); 33 result.textContent = totalscore; 34 //結果画面を表示 35 const cantseeResult = document.getElementById('cantseeresult'); 36 cantseeResult.classList.remove('cantsee'); 37 cantseeResult.classList.add('resultpart'); 38 //画面全体を暗く 39 const surround = document.getElementById('surround'); 40 surround.classList.add('black'); 41} 42 43//途中のスコア、ミスの数を表示するため 44let scoreLabel = document.getElementById('score'); 45let missLabel = document.getElementById('miss'); 46 47 48 49window.addEventListener('click',()=>{ 50 upDateTarget(); 51}); 52 53 54//タイピングしてる時の処理 55window.addEventListener('keyup',e => { 56 console.log(e.key); 57 58 if (e.key === word[loc] ){ 59 loc++; 60   //そのwordが一つ終わった時の処 61 if(loc === word.length){ 62 word = words[Math.floor(Math.random() * words.length)]; 63 loc=0; 64 howMany++ 65 } 66 67 score++; 68 upDateTarget(); 69    scoreLabel.textContent = score; 70 }else{ 71 miss++; 72 missLabel.textContent = miss; 73 } 74 75 //wordが指定数クリアしたら結果をだす 76 if(howMany===3){ 77 resultScore(); 78 } 79 80}); 81

イメージ説明

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

投稿2019/08/13 12:42

m.ts10806

総合スコア80765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lilbear

2019/08/13 14:28

コメントありがとうございます。 sales true の使い方があまりわかっていなく、試してみたのですがよくわかりませんでした。 どの値をtrueやresultの識別をする対象にするのが良いか教えてもらえたら幸いです。
m.ts10806

2019/08/13 14:34

sales というのがどこにあるものなのかわからないですけど、あくまで単なる変数なので自身で用意すると良いです。 let result_flg = false; resultScore()内の最後とかで result_flg=true; で window.addEventListener('keyup',e => { if(result_flg) return;
lilbear

2019/08/13 15:14

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

2019/08/13 20:25

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

2019/08/14 08:34

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

0

ベストアンサー

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

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

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

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

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

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

のように宣言しておく。

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

javascript

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

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

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

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

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

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

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

javascript

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

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

javascript

1'use strict'; 2 3 4const words = ['apple', 'grape', 'orange','lemon', 'peach' , 'watermelon', 'pear', 'lychee','pineapple', 'strawberry' ] 5let word = words[Math.floor(Math.random() * words.length)]; 6//今打ってる文字の位置 7let loc = 0; 8//正しく打てた時 9let score = 0; 10//間違った時 11let miss = 0; 12//正解した問題数 13let howMany = 0; 14 15//wordのでるところ 16const target = document.getElementById('target'); 17 18//そのwordの文字を打ち終わった時の_を出すための処理 19function upDateTarget(){ 20 let placeHolder = ''; 21 for(let i = 0; i<loc; i++){ 22 placeHolder += '_'; 23 } 24 target.textContent = placeHolder + word.substring(loc); 25} 26 27//指定数のwordが終わったらスコアを出す処理 28function resultScore(){ 29 let result = document.getElementById('result'); 30 let total = score + miss; 31 let totalscore = Math.floor(score / total * 100); 32 result.textContent = totalscore; 33 //結果画面を表示 34 const cantseeResult = document.getElementById('cantseeresult'); 35 cantseeResult.classList.remove('cantsee'); 36 cantseeResult.classList.add('resultpart'); 37 //画面全体を暗く 38 const surround = document.getElementById('surround'); 39 surround.classList.add('black'); 40} 41 42// keyup ハンドラ 43function keyupHandler(e) { 44 console.log(e.key); 45 46 if (e.key === word[loc] ){ 47 loc++; 48 //そのwordが一つ終わった時の処 49 if(loc === word.length){ 50 word = words[Math.floor(Math.random() * words.length)]; 51 loc=0; 52 howMany++ 53 } 54 55 score++; 56 upDateTarget(); 57 scoreLabel.textContent = score; 58 }else{ 59 miss++; 60 missLabel.textContent = miss; 61 } 62 63 //wordが指定数クリアしたら結果をだす 64 if(howMany===3){ 65 resultScore(); 66 window.removeEventListener('keyup', keyupHandler); // この行を追加 67 } 68} 69 70//途中のスコア、ミスの数を表示するため 71let scoreLabel = document.getElementById('score'); 72let missLabel = document.getElementById('miss'); 73 74window.addEventListener('click',()=>{ 75 upDateTarget(); 76}); 77 78//タイピングしてる時の処理 79window.addEventListener('keyup', keyupHandler); 80

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

javascript

1window.addEventListener('keyup', keyupHandler);

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

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

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

投稿2019/08/13 14:10

jun68ykt

総合スコア9058

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lilbear

2019/08/13 14:56

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

2019/08/13 15:12

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問