ローカルとサーバー上の挙動が異なる。

Javascriptの基礎学習が終わり、ノベルゲームに挑戦しています。
完成したノベルゲームはローカルだと動くのですが、サーバーにアップデートすると画像がいくつか表示されなくなってしまいます。

サーバーはお名前ドットコム。ブラウザはchromeです。

問題の出ているゲームはコチラです。

ローカルもサーバー上も同じコード、ディレクトリです。

html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Document</title>
6</head>
7<body>
8    <canvas></canvas>
9    <script src="index.js"></script>
10</body>
11</html>

js
1class Novel {
2
3    // クラスを使うときは直接処理を記述できないのでconstructor内に処理を書く
4    constructor() {
5
6        // index.html内のcanvasを取得
7        this.canvas = document.querySelector('canvas');
8
9        // canvas情報を取得
10        this.ctx = this.canvas.getContext('2d');
11
12        //canvasのサイズを指定
13        this.canvas.width = 1000;
14        this.canvas.height = 853;
15
16        //テキストバーのサイズを指定
17        this.barw = this.canvas.width;
18        this.barh = 300;
19
20        // データ格納処理
21        this.data();
22
23        // 進行度を管理するカウンターを用意
24        this.count = 0;
25
26        // 画面ロードが終わったときの処理
27        window.onload = () => {
28
29            //初期画像を描写
30            this.render();
31
32        }
33            // クリックしたときの処理
34            document.addEventListener('click', () => {
35
36                // ゲームが全て終わったときの処理
37                if (this.count + 1 === this.page.length) {
38                    alert('THANK YOU FOR PLAYING!');
39
40                    // 振り出しにもどる処理
41                    location.reload();
42                }
43
44                // ページを1つ進める処理（クリックするごとにカウンターが進み、this.render内が更新される）
45                this.count++;
46
47                // BGMを再生
48                this.page[this.count][7].play();
49
50                //描写処理
51                this.render();
52            })
53
54    }
55
56    render() {
57
58
59        // 背景を描写
60        this.ctx.drawImage(this.page[this.count][1], 0, 0);
61        //人物Aを描写
62        this.ctx.drawImage(this.page[this.count][2], this.page[this.count][4], 200);
63        //人物を描写
64        this.ctx.drawImage(this.page[this.count][3], this.page[this.count][5], 200);
65        //テキストバーを描写
66        this.ctx.drawImage(this.page[this.count][0], 0, this.canvas.height - this.barh, this.barw, this.barh);
67        //テキストを描写
68        this.ctx.font = "48px serif";
69        this.ctx.fillStyle = 'white';
70        this.ctx.fillText(this.page[this.count][6], 50, this.canvas.height - this.barh + 100);
71
72    }
73
74    data() {
75        // 画像と音声ファイルを配列にまとめる。
76
77        this.datas = [[], [], [], []];
78
79        //画像データを生成し、配列に格納
80        for (let c = 0; c < 3; c++) {
81
82            for (let l = 0; l < 20; l++) {
83                this.datas[c][l] = new Image;
84            }
85        }
86
87        //音声データを生成し、配列に格納
88
89        for (let l = 0; l < 10; l++) {
90            this.datas[3][l] = new Audio;
91        }
92
93        // 配列格納処理は少しややこしいと思うので、コンソールを確認するとわかりやすいかも
94        console.log(this.datas);
95
96        // 配列に入ったデータのソースを指定
97
98        // バー
99        this.datas[0][0].src = 'img/bar/graybox.png';
100
101        // 背景
102        this.datas[1][0].src = 'img/bg/japan.jpg';
103        this.datas[1][1].src = 'img/bg/japan2.jpg';
104        this.datas[1][2].src = 'img/bg/country.jpg';
105        this.datas[1][3].src = 'img/bg/door.jpg';
106        // 人物
107        this.datas[2][0].src = 'img/human/a1.png';
108        this.datas[2][1].src = 'img/human/a2.png';
109        this.datas[2][2].src = 'img/human/a3.png';
110        this.datas[2][3].src = 'img/human/a4.png';
111        this.datas[2][3].src = 'img/human/a5.png';
112        this.datas[2][4].src = 'img/human/a6.png';
113        this.datas[2][5].src = 'img/human/a7.png';
114        this.datas[2][6].src = 'img/human/a8.png';
115        this.datas[2][7].src = 'img/human/b1.png';
116        this.datas[2][8].src = 'img/human/b2.png';
117        this.datas[2][9].src = 'img/human/b3.png';
118        this.datas[2][10].src = 'img/human/b4.png';
119        this.datas[2][11].src = 'img/human/b5.png';
120
121        //音声
122        this.datas[3][0].loop = true;//BGMだけループさせる。
123        this.datas[3][0].src = 'bgm/nonki.mp3';
124        this.datas[3][1].src = 'bgm/happy.mp3';
125        this.datas[3][2].src = 'bgm/hello.mp3';
126        this.datas[3][3].src = 'bgm/oh.mp3';
127        this.datas[3][4].src = 'bgm/what.mp3';
128        this.datas[3][5].src = 'bgm/yes.mp3';
129        this.datas[3][6].src = 'bgm/star.mp3';
130
131
132
133
134        // ページごとの情報を配列で管理
135        this.page = [
136            //（左から）テキストバー　背景　人物A 人物B　人物Aポジ　人物Bポジ　テキスト　BGM
137            [this.datas[0][0], this.datas[1][2], this.datas[2][0], this.datas[2][7], 1000, 500, 'おじゃまします'],//1ページ目の情報
138            [this.datas[0][0], this.datas[1][3], this.datas[2][1], this.datas[2][7], 1000, 500, 'やあ', this.datas[3][0]],//2ページ目の情報
139            [this.datas[0][0], this.datas[1][0], this.datas[2][1], this.datas[2][7], 100, 1000, '元気かい', this.datas[3][2]],//3ページ目の情報
140            [this.datas[0][0], this.datas[1][0], this.datas[2][1], this.datas[2][9], 1000, 500, '今日はとてもいい天気だね', this.datas[3][0]],//4ページ目の情報
141            [this.datas[0][0], this.datas[1][0], this.datas[2][1], this.datas[2][7], 100, 1000, 'うん', this.datas[3][5]],//5ページ目の情報
142            [this.datas[0][0], this.datas[1][1], this.datas[2][1], this.datas[2][10], 1000, 500, 'それじゃあまたね', this.datas[3][0]],//6ページ目の情報
143            [this.datas[0][0], this.datas[1][2], this.datas[2][0], this.datas[2][7], 1000, 500, 'FIN', this.datas[3][3]],//7ページ目の情報
144        ];
145    }
146
147
148}
149
150new Novel;　//Novelクラスを実行