Javascript 配列から除外

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

色々調べて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;
}

'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;
   }
 });
}

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

回答1件

ベストアンサー

codepenで簡単に修正して動かしてみました。
やりたいことはこのようなことですよね？
（だたし、問題が尽きたときにエラーになるので、配列がオーバーしないように
https://codepen.io/fujinaka/pen/mgxqmx

＞///ここをどうしたらいいかわからなくなりました。
の部分ですが、wordをスライスで削っていくのではなく、添字で進めていくほうがキレイだと思います。

javascript
1:
2:
3   target.textContent = placeholder + word[i].slice(loc,);
4:
5:
6   if(loc === question.length){
7    if (word.length <= i) {
8      return;
9    }
10    target.textContent = word[++i];
11    question = word[i];
12    loc = 0;
13   }
14:
15:

ちなみに掲載のプログラムはsliceの使い方が間違ってます。
sliceそのものは配列を変更しないので、返却した配列を受け取る必要があります。
つまり、

javascript
1word.splice(word.length -1, 1);

ではなく下記のように返却した配列を受け取る必要がありますし、引数も逆転してます。

javascript
1word = word.splice(1, word.length -1);

投稿2019/04/18 12:42

編集2019/04/18 12:51

JIN3X

総合スコア84

williamsArk

2019/04/18 16:51

詳細な回答ありがとうございました。確かにspliceなどはまだまだ基本がなってなかったですね。助かりました。また、これもかなり基本だとは思いますが、 i = 0; として正解のたびにi++;する代わりに、i = word.length - 1として、i--にしてもいいんでしょうかね。

JIN3X

2019/04/18 22:56

問題ありません。その場合は、iが0未満にならないように、i<=0になったらカウントダウンを終了するような条件を付ける必要があります。また、インクリメント(--、++)は前に置くか（--i、++i）後ろに置くか（i--、i++）でカウントアップするタイミングが変わるのでご注意ください。 i--にする場合は、「target.textContent = word[i]」この行の前に実行する必要があります。

williamsArk

2019/04/19 13:43

最後まで詳しくありがとうございました。大変助かりました。

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