目指せ高度１０００メートル。ロケット打ち上げゲーム２。
スペースキーを押している間はエンジン噴射します。放すとエンジン停止で自由落下で着陸します。
コードをメモ帳などのテキストエディタに貼り付け、ファイル名を「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;
color: white;
font-size: 24px;
text-align: center;
background-color: black;
}
#altitude {
position: absolute;
top: 10px;
left: 10px;
z-index: 1;
}
#startMessage {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 2;
color: yellow;
font-size: 36px;
}
</style>
</head>
<body>
<div id="altitude">Altitude: 0 m</div>
<div id="startMessage">Press SPACE to Start</div>
<script src="https://cdn.jsdelivr.net/npm/three@0.139.2/build/three.min.js"></script>
<script>
// シーン、カメラ、レンダラーの設定
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 背景色を空の青色に設定
scene.background = new THREE.Color(0x87CEEB);
// 地面を作成
var groundGeometry = new THREE.PlaneGeometry(1000, 1000);
var groundMaterial = new THREE.MeshBasicMaterial({ color: 0x228B22 });
var ground = new THREE.Mesh(groundGeometry, groundMaterial);
ground.rotation.x = -Math.PI / 2;
ground.position.y = -0.5;
scene.add(ground);
// 発射台を作成
var platformGeometry = new THREE.BoxGeometry(2, 0.5, 2);
var platformMaterial = new THREE.MeshBasicMaterial({ color: 0x808080 });
var platform = new THREE.Mesh(platformGeometry, platformMaterial);
platform.position.y = 0;
scene.add(platform);
// ロケットを作成（先端を円錐型に）
var rocketBodyGeometry = new THREE.CylinderGeometry(0.2, 0.2, 2, 32);
var rocketBodyMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var rocketBody = new THREE.Mesh(rocketBodyGeometry, rocketBodyMaterial);
rocketBody.position.y = 1.25;
var rocketConeGeometry = new THREE.ConeGeometry(0.2, 1.2, 32);
var rocketConeMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
var rocketCone = new THREE.Mesh(rocketConeGeometry, rocketConeMaterial);
rocketCone.position.y = 2;
var rocket = new THREE.Group();
rocket.add(rocketBody);
rocket.add(rocketCone);
scene.add(rocket);
// ロケットの炎を作成
var flameGeometry = new THREE.ConeGeometry(0.5, 1, 32); // サイズを大きく
var flameMaterial = new THREE.MeshBasicMaterial({ color: 0xffa500 });
var flame = new THREE.Mesh(flameGeometry, flameMaterial);
flame.position.y = -1.25;
flame.rotation.x = Math.PI;
rocketBody.add(flame);
flame.visible = false; // 初期状態では非表示
// 雲をたくさん配置
function createCloud() {
var cloudGeometry = new THREE.SphereGeometry(2, 32, 32);
var cloudMaterial = new THREE.MeshBasicMaterial({ color: 0xFFFFFF });
var cloud = new THREE.Mesh(cloudGeometry, cloudMaterial);
// 雲のサイズを少しランダムに
var scale = Math.random() * 0.5 + 0.75;
cloud.scale.set(scale, scale, scale);
// 雲の位置をランダムに配置
cloud.position.set(
Math.random() * 100 - 50, // X座標をランダムに (-50から50の間)
Math.random() * 40 + 10, // Y座標を高めに設定 (10から50の間)
Math.random() * 100 - 50 // Z座標をランダムに (-50から50の間)
);
scene.add(cloud);
}
// 50個の雲を追加
for (var i = 0; i < 50; i++) {
createCloud();
}
// 変数の初期化
var rocketVelocity = 0.1; // ロケットの初速度
var gravity = -0.01; // 重力加速度
var altitude = 0; // 高度
var engineRunning = false; // エンジンが動いているかどうか
var flameVisible = false;
var engineOn = false;
camera.position.z = 5;
// 四角い箱をランダムに50個配置
for (var i = 0; i < 50; i++) {
var boxGeometry = new THREE.BoxGeometry(1, 1, 1);
var boxMaterial = new THREE.MeshBasicMaterial({ color: 0x0000ff });
var box = new THREE.Mesh(boxGeometry, boxMaterial);
box.position.set(Math.random() * 40 - 20, 0.5, Math.random() * 40 - 20); // ランダムに配置
scene.add(box);
}
// アニメーションループ
function animate() {
requestAnimationFrame(animate);
if (engineOn && flameVisible) {
altitude += rocketVelocity;
rocket.position.y += rocketVelocity;
}
else if (!engineOn && altitude > 0) {
flame.visible = false; // 炎を消す
rocketVelocity += gravity; // 重力を適用
altitude += rocketVelocity;
rocket.position.y += rocketVelocity;
if (rocket.position.y <= -1.25) {
rocketVelocity = 0;
rocket.position.y = -1.25;
}
}
// 高度を表示
document.getElementById("altitude").textContent = "Altitude: " + Math.max(0, Math.round(altitude * 10)) + " m";
camera.position.y = rocket.position.y;
camera.lookAt(rocket.position);
renderer.render(scene, camera); // シーンをレンダリング
}
// キー押下時にエンジンと炎を制御
document.addEventListener('keydown', function(event) {
if (event.code === 'Space') {
engineOn = true;
flameVisible = true;
flame.visible = true;
document.getElementById("startMessage").style.display = 'none';
}
});
// キー離した時にエンジン停止
document.addEventListener('keyup', function(event) {
if (event.code === 'Space') {
engineOn = false;
flameVisible = false;
}
});
animate(); // アニメーションを開始
</script>
</body>
</html>