feat: add train driving system with 3D model and controls
- 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:
+63
-18
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user