まず、HTMLファイルを作成し、シーンを表示するためのキャンバス要素を追加します。
<!DOCTYPE html>
<html>
<head>
<title>宇宙のシーン</title>
</head>
<body>
<canvas id="spaceCanvas"></canvas>
<script src="space.js"></script>
</body>
</html>次に、JavaScriptファイル（space.js）を作成し、シーンの描画ロジックを追加します。
// キャンバス要素の取得
const canvas = document.getElementById('spaceCanvas');
const ctx = canvas.getContext('2d');
// キャンバスのサイズを設定
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
// 宇宙の背景を描画
function drawBackground() {
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
// 星をランダムに描画
function drawStars() {
ctx.fillStyle = 'white';
for (let i = 0; i < 100; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
ctx.fillRect(x, y, 2, 2); // 星のサイズは2x2ピクセル
}
}
// 宇宙船を描画
function drawSpaceship() {
ctx.fillStyle = 'red';
ctx.beginPath();
ctx.moveTo(canvas.width / 2, canvas.height / 2 - 20);
ctx.lineTo(canvas.width / 2 + 20, canvas.height / 2 + 20);
ctx.lineTo(canvas.width / 2 - 20, canvas.height / 2 + 20);
ctx.closePath();
ctx.fill();
}
// 宇宙のシーンを描画
function drawScene() {
drawBackground();
drawStars();
drawSpaceship();
}
// シーンの描画を開始
drawScene();これで、宇宙のシーンを描画するJavaScriptコードが完成しました。
上記のコードでは、キャンバス要素を取得し、そのコンテキストを取得しています。キャンバスのサイズをブラウザウィンドウのサイズに合わせて設定し、背景や星、宇宙船などの要素を描画するための関数を作成しています。
drawBackground関数は、黒色でキャンバス全体を塗りつぶし、宇宙の背景を作成します。
drawStars関数は、白色の小さな四角形をランダムな位置に描画することで、星を表現します。
drawSpaceship関数は、赤色の三角形を描画し、宇宙船を表現します。
最後に、drawScene関数を呼び出すことで、背景、星、宇宙船を含む宇宙のシーンが描画されます。
これはシンプルな宇宙のシーンの例ですが、さまざまな要素やアニメーションを追加することで、より複雑なシーンを作成することもできます。このコードはベースとなるものであり、さらに機能を拡張してカスタマイズすることができます。
以上が、JavaScriptを使用して宇宙のシーンをコードする方法の解説です。シンプルかつ基本的な実装例を提供しましたが、このコードをベースにさまざまな要素を追加したり、アニメーションを作成したりすることで、より複雑な宇宙のシーンを構築することができます。