74798


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

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

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

## 追記

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

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


CC BY-SA 4.0
2021-03-20T22:54:37.220
74794
2021-03-21T08:17:49.800
2021-03-21T08:17:49.800
3060
44419
question
javascript
JavaScript のファイルをブラウザで開いてもソースがそのまま表示されてしまう


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

例えば Mozilla
のサイトに[ブロックくずしのチュートリアル](https://developer.mozilla.org/ja/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Create_the_Canvas_and_draw_on_it)がありますが、そのコードは、

[code]

    <!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>
    
[/code]

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

[code]

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

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

[code]

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

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

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

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


CC BY-SA 4.0
2021-03-21T02:52:00.603
74798
2021-03-21T02:52:00.603
7290
74794
answer