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 を実行する形になると思います。