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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

Q&A

解決済

2回答

374閲覧

タイピングゲームが上手く作れません

tanakashouzoux

総合スコア52

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

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

0グッド

0クリップ

投稿2020/05/18 09:23

編集2020/05/18 09:23

タイピングゲームを作っております
打った文字が正解だった場合、アンダーバーに切り替わっていく様にしたいのですが、なぜかアンダーバーが予定より多くなってしまいます
どこがおかしいのかさっぱりわからないのでご指導くださいm(__)m

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Typing Game</title> 7 <link rel="stylesheet" href="css/styles.css"> 8</head> 9<body> 10 11 12 13 <p id="target">word</p> 14 <p class="info"> 15 Letter count:<span id="score">0</span> 16 Miss count:<span id="miss">0</span> 17 </p> 18 19 20 <script src="js/main.js"></script> 21</body> 22</html>

javascript

1'use strict'; 2 3{ 4 const word = 'apple'; 5 let loc = 0; 6 let score = 0; 7 let miss = 0; 8 9 const target = document.getElementById('target'); 10 const scoreLabel = document.getElementById('score'); 11 const missLabel = document.getElementById('miss'); 12 13 target.textContent = word; 14 15 16 let placeholder=''; 17 let underBar; 18 19 20 21 22 window.addEventListener('keydown', e => { 23 if (e.key === word[loc]) { 24 loc++; 25 for(var i=0;i<loc;i++){ 26 placeholder+='_'; 27 } 28 29 underBar=placeholder+word.substring(loc); 30 31 target.textContent = underBar; 32 33 34 score++; 35 scoreLabel.textContent = score; 36 } else { 37 miss++; 38 missLabel.textContent = miss; 39 40 } 41 42 43 44 }); 45 46} 47

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

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

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

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

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

guest

回答2

0

単純に正解する度に「正解の回数分」の_を追加して伸ばしちゃってるからですね。

diff

1 loc++; 2- for(var i=0;i<loc;i++){ 3 placeholder+='_'; 4- } 5 6 underBar=placeholder+word.substring(loc); 7 8 target.textContent = underBar;

1度正解するごとに_は一回追加すれば良いはず。

投稿2020/05/18 09:40

編集2020/05/18 09:44
gentaro

総合スコア8949

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

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

tanakashouzoux

2020/05/19 01:32

わざわざコメントありがとうございます! 本当に助かりますm(__)m
guest

0

ベストアンサー

placeholderを初期化していないからでは。2文字目が通った時点でplaceholderには前の文字分の_が入っていることになりませんか?

js

1 for(var i=0;i<loc;i++){ 2 placeholder+='_'; 3 }

投稿2020/05/18 09:35

kei344

総合スコア69458

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

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

tanakashouzoux

2020/05/19 01:33

いつもわざわざご丁寧にありがとうございますm(__)m 本当にその通りです!!! 全然気づきませんでした???? 私の周りには聞ける人がいないので本当にありがたいですm(__)m
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問