コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「index.html」として保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。
宇宙空間での加速体験ゲームです。
圧倒的なスピード感。加速がブーストする宇宙体感ゲームです。（スペースキーを押すとさらに３秒間加速します。）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>宇宙空間での加速体験</title>
<style>
/* ページ全体のスタイル設定 */
body {
margin: 0;
overflow: hidden; /* スクロールバーを非表示 */
background: black; /* 背景を黒に設定 */
display: flex;
flex-direction: column;
align-items: center; /* 中央揃え */
}
#canvas {
display: block;
}
/* スライダーのスタイル設定 */
#boosterSliderContainer {
position: absolute;
bottom: 20px;
width: 300px;
text-align: center;
color: white; /* テキストの色を白に設定 */
}
#boosterSlider {
width: 100%; /* スライダーの幅をコンテナに合わせる */
}
</style>
</head>
<body>
<!-- ゲーム描画用のキャンバス -->
<canvas id="canvas"></canvas>
<!-- ブースタースライダーのコンテナ -->
<div id="boosterSliderContainer">
<label for="boosterSlider">Booster Speed</label>
<input id="boosterSlider" type="range" min="-5" max="500" value="0" step="0.1">
</div>
<script>
// キャンバスとコンテキストの取得
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth; // キャンバスの幅をウィンドウ幅に設定
canvas.height = window.innerHeight; // キャンバスの高さをウィンドウ高さに設定
const particles = []; // パーティクル（星）を格納する配列
let speed = 0; // 加速度の初期値
let boostActive = false; // ブースト状態のフラグ
// スライダーの値が変化したときの処理
document.getElementById('boosterSlider').addEventListener('input', function() {
speed = parseFloat(this.value); // スライダーの値を速度に反映
});
// 新しいパーティクル（星）を生成する関数
function createParticle() {
return {
x: (Math.random() - 0.5) * canvas.width, // キャンバス中央を基準にランダムなx座標
y: (Math.random() - 0.5) * canvas.height, // キャンバス中央を基準にランダムなy座標
z: Math.random() * canvas.width, // パーティクルのz位置をランダムに設定
size: Math.random() * 2 + 1, // パーティクルのサイズ
color: `hsl(${Math.random() * 360}, 100%, 50%)` // ランダムな色を設定
};
}
// 初期パーティクルを1000個生成
for (let i = 0; i < 1000; i++) {
particles.push(createParticle());
}
// パーティクルの位置を更新する関数
function updateParticles() {
particles.forEach(particle => {
particle.z -= speed + (boostActive ? 10 : 0); // ブースト時は速度を加算
if (particle.z < 1) { // パーティクルが手前に来た場合
particle.z = canvas.width; // パーティクルを奥に戻す
particle.x = (Math.random() - 0.5) * canvas.width; // ランダムなx座標に再設定
particle.y = (Math.random() - 0.5) * canvas.height; // ランダムなy座標に再設定
}
});
}
// パーティクルを描画する関数
function renderParticles() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 前フレームをクリア
particles.forEach(particle => {
const perspective = canvas.width / (canvas.width + particle.z); // 遠近効果を計算
const x = (particle.x * perspective) + canvas.width / 2; // 中央を基準にx座標を設定
const y = (particle.y * perspective) + canvas.height / 2; // 中央を基準にy座標を設定
const size = particle.size * perspective; // パーティクルのサイズを遠近に応じて縮小
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2); // パーティクルを円で描画
ctx.fillStyle = particle.color; // パーティクルの色を設定
ctx.fill();
});
}
// メインループ関数
function gameLoop() {
updateParticles(); // パーティクルの位置を更新
renderParticles(); // パーティクルを描画
requestAnimationFrame(gameLoop); // 次のフレームをリクエスト
}
// キーが押されたときの処理
document.addEventListener('keydown', event => {
if (event.code === 'Space' && !boostActive) { // スペースキーが押されたら
boostActive = true; // ブーストを有効化
setTimeout(() => {
boostActive = false; // 3秒後にブーストを解除
}, 3000);
}
});
gameLoop(); // ゲームループを開始
</script>
</body>
</html>