サイコロのアニメーションとメッセージウインドウに表示される目（数字）が一回ずつずれてしまうのはなぜか？

Question

【困っていること】
テキストベースのすごろくゲームを作成しています。
しかしただテキスト表示されるだけだと物足りないので
サイコロのアニメーションを追加していますが、
画面に表示されるサイコロの目とテキストに表示されるサイコロの目が１回分ずつズレてしまい、
ゲーム自体は遊べるのですが、ヘンテコなゲーム画面になってしまいます。
テキストと画面に表示されるサイコロの目を一致させる方法をご教示いただけないでしょうか？

【試したこと】
関数を分けているので良くないかと思い1つにまとめてみて試しましたが、こちらもうまくいきませんでした。
初歩的なことが原因かと思うのですが、混乱してきてしまったため、恐縮ではございますが、良い解決方法があればご教示をお願いします。

コード

'use strict'


var img,cm,messegegamen,ctx,gamegamen ;

var Nokorimasu = 0; //ゴールまでの残りマス
var Susumimasu = 0; //進んだ合計マス
var player = "";

var DiceNumber=0;

var DiceNumberR=0;

var dicekaisu = 0;


function gamekaishi(){


dicekaisu = 30;

SaiNokori();

//canvas準備(msg)
var msgwindow = document.getElementById('msg');
var cm = msgwindow.getContext('2d');
cm.font="18pt serif";
cm.fillStyle='white';

var gamegamen = document.getElementById('game');
var cg = gamegamen.getContext('2d');

Nokorimasu = 100;
Susumimasu = 0;




 player = document.getElementById('playername').value;
if(player===""){
    alert("プレイヤー名が入力されていません！");
}

else{cg.clearRect(0,0,800,800);
     cm.clearRect(0,0,800,800);
     cm.fillText("Game Start!",20,50);
     cm.fillText("サイコロをふり、ゴールを目指そう！",20,80);
     
     cg.font="20pt Georgia";
     cg.fillStyle='black';
     cg.fillText("残りマス:"+Nokorimasu,30,25);
     cg.fillText("今のマス:"+Susumimasu,200,25);

     
}


}






function hajime(){

 //canvas(game)準備
var gamegamen = document.getElementById('game');
var cg = gamegamen.getContext('2d');
cg.font="35pt Georgia";
cg.fillStyle='#FFFFFF';
cg.fillText("ランダムすごろく",80,250);   

//canvas(msg)準備
var msgwindow = document.getElementById('msg');
var cm = msgwindow.getContext('2d');
cm.font="18pt serif";
cm.fillStyle='white';

var textarr = ["プレイヤー名を入力し、","スタートボタンを押してください。"]
cm.fillText(textarr[0],20,50);
cm.fillText(textarr[1],20,70);



}



//ランダム値の計算
function randnum(){
    var bunkinum = 1+Math.floor( Math.random() * 10);
return bunkinum;
    
}

//画像表示処理※検証中　GazouHyouji(usagiimg)などが使えるかどうか
function GazouHyouji()
{
var gamegamen = document.getElementById('game');
var cg = gamegamen.getContext('2d')

var sai1 = new Image();
   sai1.src="img/sai1.PNG";

var sai2 = new Image();
   sai2.src="img/sai2.PNG";

var sai3 = new Image();
   sai3.src="img/sai3.PNG";

var sai4 = new Image();
   sai4.src="img/sai4.PNG";

var sai5 = new Image();
   sai5.src="img/sai5.PNG";

var sai6 = new Image();
   sai6.src="img/sai6.PNG";

}


function SaiNokori(){


var nokorisai=document.getElementById("nokorisai");
var ns = nokorisai.getContext('2d');
ns.clearRect(0,0,800,800);

ns.font="20pt serif";
ns.fillStyle='black';

ns.fillText("のこり:"+ dicekaisu+"回",5,30);

dicekaisu = dicekaisu-1;
console.log(dicekaisu+"dicekaisu");
}





//サイコロをふる1
function DiceRollR(){

var fn = function() {

var gamegamen = document.getElementById('game');
var cg = gamegamen.getContext('2d');

var msgwindow = document.getElementById('msg');
var cm = msgwindow.getContext('2d');
cm.font="18pt serif";
cm.fillStyle='white';



var sai0 = 0;
var sai1 = new Image();
   sai1.src="img/sai1.PNG";

var sai2 = new Image();
   sai2.src="img/sai2.PNG";

var sai3 = new Image();
   sai3.src="img/sai3.PNG";

var sai4 = new Image();
   sai4.src="img/sai4.PNG";

var sai5 = new Image();
   sai5.src="img/sai5.PNG";

var sai6 = new Image();
   sai6.src="img/sai6.PNG";

var sailist = [sai0,sai1,sai2,sai3,sai4,sai5,sai6];

DiceNumberR = 1+Math.floor( Math.random() * 6);
　　var saiN = sailist[DiceNumberR];

cg.drawImage(saiN,150,150,100,100);

console.log(DiceNumberR+"random")
  
  if(i > 10) clearInterval(id);
  i++;

//
}
var tm = 50;
var i = 0;
var id = setInterval(fn,tm);
//

//
}

function DiceRoll1(){

DiceRollR();

//canvas(msg)準備
var msgwindow = document.getElementById('msg');
var cm = msgwindow.getContext('2d');
cm.font="18pt serif";
cm.fillStyle='white';


var gamegamen = document.getElementById('game');
var cg = gamegamen.getContext('2d');

var sai0 = "";
var sai1 = new Image();
   sai1.src="img/sai1.PNG";

var sai2 = new Image();
   sai2.src="img/sai2.PNG";

var sai3 = new Image();
   sai3.src="img/sai3.PNG";

var sai4 = new Image();
   sai4.src="img/sai4.PNG";

var sai5 = new Image();
   sai5.src="img/sai5.PNG";

var sai6 = new Image();
   sai6.src="img/sai6.PNG";

var sailist = [sai0,sai1,sai2,sai3,sai4,sai5,sai6];

DiceNumber = DiceNumberR; //test　ここが原因

//



//DiceNumber = 1+Math.floor( Math.random() * 6);
　　var saiN = sailist[DiceNumber];

//


Nokorimasu = Nokorimasu-DiceNumber;
Susumimasu = Susumimasu+DiceNumber;
console.log(Susumimasu+"+"+DiceNumber)

cm.clearRect(0,0,800,800);

    cg.clearRect(0,0,800,800);
    cg.fillText("残りマス:"+Nokorimasu,30,25);
    cg.fillText("今のマス:"+Susumimasu,200,25);

cm.fillText("サイコロの数字は　"+DiceNumberR+"!",20,50);
    cm.fillText(player+"は"+DiceNumberR+"つ進んだ。",20,70);
 
    

    
}


//サイコロをふる2


 function DiceRoll2(){

 if(Nokorimasu===""){



}else if(Nokorimasu<0){


alert(player+"は目的地に着いた！")
return;

}else if(dicekaisu<1){
alert("残念！ゲームオーバーです。スタートボタンを押すと新しくゲームをはじめることができます。")
}else{
 


 DiceRoll1();


 SaiNokori();
   
 

var msgwindow = document.getElementById('msg');
cm = msgwindow.getContext('2d');
cm.font="17pt serif";
cm.fillStyle='white';
   
var gamegamen = document.getElementById('game');
var cg = gamegamen.getContext('2d');
    
    




   var bunkinum = randnum();


    console.log(bunkinum+"here");
 
    switch(bunkinum){

        case 1:
            cm.fillText("ふつうの道だ。変わったところはない。",20,90);
        console.log(1+"here");
        break;

        case 2:

cm.fillText("近道を見つけた！",20,90);
DiceNumber = DiceNumber+DiceNumber;

cm.fillText(player+"はさらに"+DiceNumber+"つ進んだ!",20,110);


            break;
        case 3:
            cm.fillText(player+"は、おいしそうな果物を見つけた！",20,90);

dicekaisu = dicekaisu+3;

cm.fillText("元気になり、サイコロ残り回数が3つ増えた！",20,110);

        console.log(3+"here");
        break;

        case 4:
cm.fillText(player+"は道に迷った！",20,90);

Nokorimasu = Nokorimasu+3; 
Susumimasu = Susumimasu-3;

cm.fillText("3マス戻ってしまった！",20,110);


        break;

        case 5:
cm.fillText(player+"は、盗賊に襲われた！",20,90);
dicekaisu=dicekaisu-2


cm.fillText(player+"のサイコロ残り回数が2減った！",20,110);



        break;

        case 6:
cm.fillText(player+"は、猛獣に襲われ、逃げた！",20,90);

Nokorimasu = Nokorimasu+4; 
Susumimasu = Susumimasu-4;

cm.fillText(player+"は、4マス戻った！",20,110);


        break;

        case 7:
cm.fillText("ふつうの道だ。変わったところはない。",20,90);

        break;
cm.fillText("ふつうの道だ。変わったところはない。",20,90);

        case 8:
cm.fillText("ふつうの道だ。変わったところはない。",20,90);

        break;

        case 9:
cm.fillText("ふつうの道だ。変わったところはない。",20,90);


        break;

        case 10:

cm.fillText(player+"は、おいしそうな果物を見つけた！",20,90);

dicekaisu = dicekaisu+3;

cm.fillText("元気になり、サイコロ残り回数が3つ増えた！",20,110);

        break;

        default:alert("開発者へ連絡してください");
        break;

    }

    

 }
    
}

Answer 1

DiceRoll1の中でDiceRollRが呼ばれていますが、
DiceRollRの中にある

var id = setInterval(fn,tm);

のsetInterval は非同期であるため、fn の実行を予約した後すぐDiceRoll1に戻ってしまっています。
このため期待する動作（fnの動作が全部完了した後にDiceRoll1に戻る）となっていません。

したがって、下記のように、fnの中で、指定回数繰り返したら clearInterval を実行して得られたランダム数をDiceRoll1に渡す、というように直す必要があります。

※おそらく、現状は「サイコロを振る」ボタンを押したら DiceRoll1() を呼び出すようになっていると思いますが、下記のコードの場合は、「サイコロを振る」ボタンを押したら DiceRollR() を実行するように修正してください。

//サイコロをふる1
function DiceRollR() {
  console.log("DiceRollR start")
  
  var fn = function () {
    var gamegamen = document.getElementById("game");
    var cg = gamegamen.getContext("2d");

    var msgwindow = document.getElementById("msg");
    var cm = msgwindow.getContext("2d");
    cm.font = "18pt serif";
    cm.fillStyle = "white";

    cg.clearRect(0, 0, 800, 800); 
    var sai0 = 0;
    var sai1 = new Image();
    sai1.src = "img/sai1.PNG";

    var sai2 = new Image();
    sai2.src = "img/sai2.PNG";

    var sai3 = new Image();
    sai3.src = "img/sai3.PNG";

    var sai4 = new Image();
    sai4.src = "img/sai4.PNG";

    var sai5 = new Image();
    sai5.src = "img/sai5.PNG";

    var sai6 = new Image();
    sai6.src = "img/sai6.PNG";

    var sailist = [sai0, sai1, sai2, sai3, sai4, sai5, sai6];

    DiceNumberR = 1 + Math.floor(Math.random() * 6);
    var saiN = sailist[DiceNumberR];

    cg.drawImage(saiN, 150, 150, 100, 100);

    console.log(DiceNumberR + "random");

    if (i > 10) {
      clearInterval(id);
      DiceRoll1(DiceNumberR)
    }
    i++;

  };
  var tm = 50;
  var i = 0;
  var id = setInterval(fn, tm);

}

function DiceRoll1(DiceNumber) {
  //canvas(msg)準備
  var msgwindow = document.getElementById("msg");
  var cm = msgwindow.getContext("2d");
  cm.font = "18pt serif";
  cm.fillStyle = "white";

  var gamegamen = document.getElementById("game");
  var cg = gamegamen.getContext("2d");

  Nokorimasu = Nokorimasu - DiceNumber;
  Susumimasu = Susumimasu + DiceNumber;
  console.log(Susumimasu + "+" + DiceNumber);

  cm.clearRect(0, 0, 800, 800);

  cg.fillText("残りマス:" + Nokorimasu, 30, 25);
  cg.fillText("今のマス:" + Susumimasu, 200, 25);

  cm.fillText("サイコロの数字は　" + DiceNumberR + "!", 20, 50);
  cm.fillText(player + "は" + DiceNumberR + "つ進んだ。", 20, 70);
}

Comments

[jdshngy]

ご回答いただきありがとうございます！
まだ試せておりませんが、いただいたコードを確認させていただき、またご返事させていただきます。
今しばらくお待ちください。

Answer 2

画面に表示されるサイコロの目とテキストに表示されるサイコロの目が１回分ずつズレてしまい、
ゲーム自体は遊べるのですが、ヘンテコなゲーム画面になってしまいます。

その原因はサイコロを振る関数が非同期実行だからです。
以下のコードは問題を端的に再現するコードです。

var DiceNumberR = 0;

function main() {
	DiceRollR(); // ①
	console.log("結果は" + DiceNumberR + "です"); // ②
}

function DiceRollR() {
	var fn = function() { // ③
		// (省略)

		DiceNumberR = 1+Math.floor( Math.random() * 6);

		console.log(DiceNumberR+"random")

		if(i > 10) clearInterval(id);
		i++;
	}
	var tm = 50;
	var i = 0;
	var id = setInterval(fn,tm); // ④
}

main();

これを実行すると「結果は《数値》です」が表示された後に、DiceRollR実行中に表示されるメッセージが出力されることがわかると思います。
その理由は処理が以下のように実行されているからです。

---

DiceRollR()の実行開始　※上記コードコメント「①」の行
↓
setIntervalによって50ミリ秒後にfnの実行が予約される　※上記コードコメント「④」の行
↓
DiceNumberRがメッセージ表示される　※上記コードコメント「②」の行
↓
50ミリ秒が経過する
↓
fnが実行されて、DiceNumberRが設定される　※上記コードコメント「③」の行

---

対策として一番簡単なのは、DiceRollR()で最終結果が得られたタイミングで処理を実行できるようにすることです。
以下がこの問題を解決したコードです。
実行すると、DiceRollR実行中に表示されるメッセージが出力された後に「結果は《数値》です」が表示されます。
これを参考にあなたのソースコードを修正を行いましょう。

var DiceNumberR = 0;

function main() {
	var showDiceResultFunction = function () {
		console.log("結果は" + DiceNumberR + "です");
	};
	DiceRollR(showDiceResultFunction);
}

function DiceRollR(showDiceResultFunction) {
	var fn = function() {
		// (省略)

		DiceNumberR = 1+Math.floor( Math.random() * 6);

		console.log(DiceNumberR+"random")

		if(i > 10) { clearInterval(id); showDiceResultFunction() }
		i++;
	}
	var tm = 50;
	var i = 0;
	var id = setInterval(fn,tm);
}

main();

Comments

[ku__ra__ge]

この問題に対するベストな解決方法は async/await を使うというものです。
しかしそれを使うには多くの前提知識が必要なので、ベストではないけれど単純な解決策を提示しました。

[jdshngy]

ご回答いただきありがとうございます！
端的にご説明いただきありがとうございます。
async/awaitを使う解決方法というのも
あるのですね！
まだ試せていませんが、ご教示いただいたコードを元に修正を試みたいと思います。

[jdshngy]

ベストアンサーとはならず申し訳ございませんでしたが、お二人の回答を元に修正を行ったところ、無事求めていた結果を出力することができました！ありがとうございます！