Railtrack Pro Dev
47e1e64b8c
- Added Train and TrainController classes in train.js - Created TrainRenderer for Three.js visualization - Integrated train controls into game.js - Updated index.html with train UI controls - Added train control styles to css/styles.css - Created test file for train module - Train can accelerate, brake, reverse and stop - Keyboard controls: W/↑ accelerate, S/↓ brake, R/D reverse, SPACE stop
79 lines
3.1 KiB
HTML
79 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Railtrack Pro</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/examples/js/controls/OrbitControls.js"></script>
|
|
<script src="js/renderer.js"></script>
|
|
<script src="js/world.js"></script>
|
|
<script src="js/tracks.js"></script>
|
|
<script src="js/train.js"></script>
|
|
<script src="js/trainRenderer.js"></script>
|
|
<script src="js/game.js"></script>
|
|
<script>
|
|
// Initialize game when DOM is ready
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const game = new Game();
|
|
console.log('🚂 Railtrack Pro initialized!');
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div id="topBar">
|
|
<h1>🚂 Railtrack Pro</h1>
|
|
</div>
|
|
|
|
<div id="mainContainer">
|
|
<div id="leftPanel">
|
|
<div id="trackControls">
|
|
<h3>Select Track Type</h3>
|
|
<button data-track-type="straight" class="track-btn">Straight</button>
|
|
<button data-track-type="curve" class="track-btn">Curve</button>
|
|
<button data-track-type="junction" class="track-btn">Junction</button>
|
|
<button data-track-type="signal" class="track-btn">Signal</button>
|
|
</div>
|
|
|
|
<div id="gameControls">
|
|
<h3>Track Controls</h3>
|
|
<button id="removeMode" class="control-btn">🗑️ Remove Mode</button>
|
|
<button id="resetCamera" class="control-btn">📷 Reset Camera</button>
|
|
</div>
|
|
|
|
<div id="trainControls">
|
|
<h3>🚂 Train Controls</h3>
|
|
<button id="accelerateTrain" class="train-btn">⬆️ Accelerate</button>
|
|
<button id="brakeTrain" class="train-btn">⬇️ Brake</button>
|
|
<button id="reverseTrain" class="train-btn">↻ Reverse</button>
|
|
<button id="stopTrain" class="train-btn">⏹️ Stop</button>
|
|
<div id="trainStatus">
|
|
<p><strong>Status:</strong> Stopped</p>
|
|
<p><strong>Speed:</strong> 0 units/s</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="statsPanel">
|
|
<h3>Statistics</h3>
|
|
<p><strong>Total Tracks:</strong> 0</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="viewportContainer">
|
|
<div id="viewport">
|
|
<div id="gameCanvas"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="rightPanel">
|
|
<div id="infoPanel">
|
|
<p>Click tracks to place/remove. Select a track type to start building!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|