ランダムに変わる色の名前の頭文字をキー入力させるゲームを作りたい

Question

###色を格納した配列の数字をランダムにかつ任意のタイミングで変化させたい

ランダムな色が付いた「色の名前」に対して、付いている色の頭文字をキー入力するゲーム( 脳トレのようなもの)を作っています。

おそらくランダムな数字が常に変化しているので、正しいキーを入力しても認識できない

let correct = randomcolor().slice(0,1);　//９行目
        console.log(correct);
        document.onkeydown = () => {
            if(event.key === correct){
                console.log('ok');
            }else{
                console.log('no');
            }
        }

該当のソースコード

'use strict';
const gameDivided = document.getElementById('game-area');
const startButton = document.getElementById('start');

startButton.onclick = () =>{
    if(window.confirm('Ready?')){
        gameDivided.innerHTML = randomname();
        gameDivided.style.color = randomcolor();
        let correct = randomcolor().slice(0,1);
        console.log(correct);
        document.onkeydown = () => {
            if(event.key === correct){
                console.log('ok');
            }else{
                console.log('no');
            }
        }
        document.onkeyup = () => {//キーを離すたび名前と色が変わる
            gameDivided.innerHTML = randomname();
            gameDivided.style.color = randomcolor();
            let correct = randomcolor().slice(0,1);
            console.log(correct);
        }
const samplecolor = [
    'red', 'blue', 'green', 'yellow', 'purple', 'orange', 'white'
];

const colorname = [
    '赤', '青', '緑', '黄', '紫', '橙', '白'
];//R,    B,   G,    Y,   P,    O,    Wが正解

function randomcolor(){//ランダムに色を変更する関数 @param {} @return{string} 色の名前
    let now = new Date();
    let random1 = Math.floor(now.getTime())%7;
    return samplecolor[random1];
}

function randomname() {//ランダムに色の名前を表示する関数 @param {} @return{string} 色
    var random2 = Math.floor(Math.random() * 7);
    return colorname[random2];
}

試したこと

付いている色の頭文字を答えさせたいので、randomcolor関数のランダムな数字の作り方がネックで、時刻やMath.random()のような常に変わるものが使いにくい？というところまで考えました。何か規則的でなくかつ常に変化しないランダムな数字（0~6の整数）の決め方があれば教えて頂きたいです。

補足情報（FW/ツールのバージョンなど）

ゲームのイメージはこんな感じです。

Answer 1

correctの行のletを外せば正常に動きます。
letはブロックスコープの中のローカル変数となるため、最初のcorrectとは別の変数となってしまっているためです。

        let correct = randomcolor().slice(0,1);
        console.log(correct);
        document.onkeydown = () => {
            if(event.key === correct){
                console.log('ok');
            }else{
                console.log('no');
            }
        }
        document.onkeyup = () => {//キーを離すたび名前と色が変わる
            gameDivided.innerHTML = randomname();
            gameDivided.style.color = randomcolor();
            correct = randomcolor().slice(0,1);//ここのletを外します。
            console.log(correct);
        }

再現性のある乱数の生成については、リンクを紹介いたします。
JavaScriptで再現性のある乱数を生成する + 指定した範囲の乱数を生成する

Comments

[naoto7139]

素早いご回答ありがとうございます！
再現性のある乱数については求めているものに近いと思ったのですが、リロードした際には違う乱数になるようにするのはどうすればよいでしょうか？ヒントになるものでもございましたら、教えて頂きたいです。
このリンクの通りやると、毎回同じ問題ができてしまうと思いました。

[gas.engine]

リロードするたびに毎回違う乱数であれば、Math.random()でよいのではないでしょうか？

意図するところは理解できないですが以下の方法で再現性のある乱数を意図的に変化させることはできます。
Math.random()でseedを決めて、リンク先のseedに代入すれば一定の乱数ができます。
seedを配列などで用意すれば乱数を使って固定された複数のパターンの問題を作成することができる点は利点です。

gameDivided.style.color = randomColor();
let correct = randomColor().slice(0,1);

この部分でrandomColor()を2回実行している点がちょっとおかしいです。
文字の色と同じ正解の色を設定するのですから、一度変数に代入してから同じものを参照すべきところです。
連続でrandomColor関数を実行して、関数の中にnew Date()からgetTime()していますが上記の方法が適切と思います。

[naoto7139]

Math.randomについてよくわかっていなかったようです！
randomcolor()にもMath.randomaを使い、指摘いただいた箇所を

nowcolor = randomcolor();
gameDivided.style.color = nowcolor;
correct = nowcolor.slice(0,1);

としたら思っていたようになりました！
１人だと何日もかかっていたところでした、本当にありがとうございました。