1

練習にと思いまして、サンプルゲームのソースをそのままコピーして拡張子.jsのファイルを作り、Chromeで読み込ませたのですが、何回やっても、いろんな種類のものをやっても、うまく読み込まれません。ただ、ソースが表示されるだけです。

Chromeの設定でJavaScriptは有効にはなっています。

何かよい解決方法はないでしょうか。

追記

実際にどういうことをしたのか、詳しく書きますと、ネット上にあった、JavaScriptのサンプルゲームの1つ、「おみくじ」のようなそれほどコードが長文にならないものを選択し、ゲームの画面を出したところで右クリックでソースを表示し、それを丸コピーします。それをメモ帳にペーストして、拡張子を.jsにして保存し、そのファイルをChromeのアイコンにドラッグしました。すると、ゲームの画面にならずソースが表示されるだけだったんです。

これは、いくつかのサンプルゲームも試しましたが、すべて、ソースだけが表示される状態でした。

1
  • どういうサンプルを使い、どういう手順でjsファイルを作り、どうやってChromeに読み込ませたかを、質問の編集でさらに詳細にすると誰かが回答できるかもしれません。 ja.stackoverflow.com/help/minimal-reproducible-example
    – zakki
    Commented 2021年3月21日 0:10

1 件の回答 1

4

Web ブラウザー(Chrome 等)は、通常、Web 文書(HTML)に JavaScript コードを埋め込んで実行・表示しています。なので、.js そのものを読み込ませると、JavaScript のソースコードをそのまま見せるだけになります。

例えば Mozilla のサイトにブロックくずしのチュートリアルがありますが、そのコードは、

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
        * { padding: 0; margin: 0; }
        canvas { background: #eee; display: block; margin: 0 auto; }
    </style>
</head>
<body>

<canvas id="myCanvas" width="480" height="320"></canvas>

<script>
    // JavaScriptのコードがここに入ります
</script>

</body>
</html>

という .html の解説からスタートしています。.js は

<script>
    // JavaScriptのコードがここに入ります
</script>

// JavaScript のコードがここに入ります に入っているコードに過ぎません。または、外部のコードを読み込む場合だと

<script type="text/javascript" src="sample.js"></script>

という形で .js へのリンクとして示されている場合もあります。

さらに、この例では、<canvas> を利用しているので、<canvas> ブロックとその style 指定も適切に再現する必要があります。

ともかく、JavaScript コードだけではなく、埋め込まれている母体となっている HTML の側も考慮して、HTML を Chrome に読み込ませる中で JavaScript を実行する形になると思います。

4
  • つまりは拡張子が間違っていたことも一因だったんですね。さきほど、拡張子をhtmlに変更して試してみたところ、文字化けはするのですが、形は読み込めるようになりました。文字化けについては、ソースが足りていないことが一因ということでよろしいのでしょうか?
    – ichiro
    Commented 2021年3月21日 4:46
  • @ichiro 文字化けは JavaScript というより HTML の問題でしょうね。<meta charset="utf-8" /> という形で文字コードを適切に設定するか、ソース側の文字コードを適切に変更して保存し直す等、試してみてください。
    – hata
    Commented 2021年3月21日 4:54
  • 解決しました。ありがとうございました。ヤフー知恵袋のようなベストアンサー制度みたいなものはないのでしょうか?解決はしたのですが、終了方法がわからなくて。
    – ichiro
    Commented 2021年3月21日 5:24
  • @ichiro 解答上端の左側にチェックマークがあるはずです。それをチェックしたら、質問は解決終了ということになります。
    – hata
    Commented 2021年3月21日 5:33

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。