feat: add train driving system with 3D model and controls
Railtrack Pro Tests / Code Quality Check (pull_request) Waiting to run
Railtrack Pro Tests / Run Test Suite (pull_request) Failing after 5m44s
Railtrack Pro Tests / Code Coverage Check (pull_request) Has been cancelled

- 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
This commit is contained in:
Railtrack Pro Dev
2026-03-13 14:48:50 +00:00
parent 2bf917f449
commit 47e1e64b8c
6 changed files with 1132 additions and 184 deletions
+63 -18
View File
@@ -5,29 +5,74 @@
<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">
<header>
<div id="topBar">
<h1>🚂 Railtrack Pro</h1>
<nav id="controls">
<button id="btn-straight">Straight</button>
<button id="btn-curved">Curved</button>
<button id="btn-junction">Junction</button>
<button id="btn-signal">Signal</button>
</nav>
</header>
<div id="viewport"></div>
<div id="info-panel">
<div id="stats"></div>
<div id="selected-info"></div>
</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>
<script src="https://cdn.jsdelivr.net/npm/three@0.156.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.156.0/examples/js/controls/OrbitControls.js"></script>
<script src="js/renderer.js"></script>
<script src="js/tracks.js"></script>
<script src="js/world.js"></script>
<script src="js/game.js"></script>
</body>
</html>