読み込まれているはずのJSが何も表示されない。

JSをHTMLに反映させたい。

反映できると画面上に星のようなキラキラした物体が表示されるようになる。

JSをHTMLに反映できない。

エラーメッセージは何もない。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta http-equiv="X-UA-Compatible" content="IE=edge">
7    <meta name="viewport" content="width=device-width, initial-scale=1.0">
8    <title>Document</title>
9</head>
10
11<body>
12    <canvas id="can"></canvas>
13    <script type="javascript" src="js/script.js"></script>
14</body>
15
16</html>

JavaScript
1const SCREEN_W = 180;
2const SCREEN_H = 320;
3
4const CANVAS_W = SCREEN_W * 2;
5const CANVAS_H = SCREEN_H * 2;
6
7const FIELD_W = SCREEN_W * 2;
8const FIELD_H = SCREEN_H * 2;
9
10const STAR_MAX = 300;
11
12let can = document.getElementById("can");
13let con = can.getContext("2d");
14can.width = CANVAS_W;
15can.height = CANVAS_H;
16
17function rand(min, max) {
18    return Math.floor(Math.random() * (max - min + 1)) + min;
19}
20
21class Star {
22    constructor() {
23        this.x = rand(0, FIELD_W)<<8;
24        this.y = rand(0, FIELD_H)<<8;
25        this.vx = 0;
26        this.vy = rand(30, 200);
27        this.sz = rand(1,2);
28    }
29
30    draw() {
31        con.fillStyle = rand(0, 2) != 0 ? "66f" : "#8af";
32        con.fillRect(this.x >> 8, this.y >> 8, this.sz, this.sz);
33    }
34    update() {
35        this.x += this.vx;
36        this.y += this.vy;
37        if (this.y > FIELD_H << 8) {
38            this.y = 0;
39            this.x = rand(0, FIELD_H) << 8;
40        }
41    }
42}
43
44let star = [];
45for (let i = 0; i < STAR_MAX; i++)star[i] = new Star();
46
47con.fillStyle = "black";
48con.fillRect(0, 0, SCREEN_W, SCREEN_H);
49
50for (let i = 0; i < STAR_MAX; i++)star[i].draw();

試したこと

このHTMLをChoromeでLiveServerで立ち上げて検証ツールのconsoleでエラーがあるか確認した。
⇨エラーはなかったのでコードは正常に認識されていることにはなるが画面に何も表示されていない。

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

回答1件

自己解決

【修正前】
<script type="javascript" src="js/script.js"></script>

【修正後】
<script type="text/javascript" src="js/script.js"></script>

text/が抜けていました。
閲覧いただき、ありがとうございました。

投稿2021/02/25 14:05

You

総合スコア52

m.ts10806

2021/02/25 22:28

scriptタグのtype属性は初期値text/javascriptなので、省略可能です。 > https://developer.mozilla.org/ja/docs/Web/HTML/Element/script > 省略または JavaScript の MIME タイプ: これはスクリプトが JavaScript であることを示します。 HTML5 仕様書では、冗長な MIME タイプを指定せずに属性を省略するよう主張しています。