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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

Javascript 配列から除外

williamsArk
williamsArk

総合スコア0

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0評価

0クリップ

7閲覧

投稿2019/04/18 11:53

今現在Javascriptを用いて、タイピングゲームらしきものを作ろうとしています。
1)重複を避けたランダム処理として、指定した配列から単語を引っ張ってくる。
2)打ち終わったら、自動で次の問題に移る。
3)すでに打ち込んだ文字は何らかの印をつける(ここでは便宜上@にしています)。

色々調べてspliceなどで配列を削れるかな、とか考えましたが、どうも上の3つがうまくいきません。
ただし、正しいボタンを押すと、ポイントは加算されているので、ボタンは認識されているはずです。アドバイスいただけると助かります。
HTML

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Typing Game</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <p id="target">word</p> <p class="info"> あなたの点数: <span id="score">0</span> 間違えた回数: <span id="miss">0</span> </p> <script src="js/main.js"></script> </body> </html>

CSS

body { padding-top: 40px; font-family: 'Courier-new', sans-serif; text-align: center; } #target { font-size: 48px; letter-spacing: 3px; } .info { color: #ccc; }

JS

'use strict'; { const words = [ 'ball', 'trip', 'summer', 'orange', ]; let word; let loc = 0; let score = 0; let miss = 0; let i, j, temp; let question; const target = document.getElementById('target'); const scoreLabel = document.getElementById('score'); const missLabel = document.getElementById('miss'); function shuffle(arr){ i = words.length; // if(i === 0){ // return arr; // } while(i > 0){ j = Math.floor(Math.random() * i); i--; temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; } return arr; } word = shuffle(words); question = word[i]; target.textContent = question; // function updateTarget(){ let placeholder = ''; for( let s = 0; s < loc; s++){ placeholder += '@'; } target.textContent = placeholder + word.substring(loc); ///ここをどうしたらいいかわからなくなりました。 } window.addEventListener('keyup', e => { if (e.key === question[loc]) { loc++; if(loc === question.length){ word.splice(word.length -1, 1); target.textContent = word[i]; loc = 0; } score++; scoreLabel.textContent = score; // updateTarget(); } else { miss++; missLabel.textContent = miss; } }); }

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。