diff options
| -rw-r--r-- | html/rogue/index.html | 4 | ||||
| -rw-r--r-- | html/rogue/js/config.js | 32 | ||||
| -rw-r--r-- | html/rogue/js/renderer.js | 14 | ||||
| -rw-r--r-- | html/rogue/js/rogue.js | 6 | ||||
| -rw-r--r-- | html/rogue/js/world.js | 48 |
5 files changed, 72 insertions, 32 deletions
diff --git a/html/rogue/index.html b/html/rogue/index.html index 2920841..ef37885 100644 --- a/html/rogue/index.html +++ b/html/rogue/index.html @@ -14,13 +14,13 @@ </head> <body> <canvas id="gameCanvas"></canvas> - <!-- Load renderer.js first since other files depend on its functions --> + <!-- Load config first since other files depend on it --> + <script src="js/config.js"></script> <script src="js/renderer.js"></script> <script src="js/input.js"></script> <script src="js/world.js"></script> <script src="js/player.js"></script> <script src="js/camera.js"></script> - <!-- Load rogue.js last as it uses functions from all other files --> <script src="js/rogue.js"></script> </body> </html> diff --git a/html/rogue/js/config.js b/html/rogue/js/config.js new file mode 100644 index 0000000..77100e1 --- /dev/null +++ b/html/rogue/js/config.js @@ -0,0 +1,32 @@ +const CONFIG = { + player: { + width: 32, + height: 48, + speed: 5, + jumpForce: 12, + gravity: 0.5, + color: '#ff0000' + }, + world: { + groundHeight: 12, + wilderness: { + vegetation: { + grass: { + colors: ['#3a5', '#294'], + hatch: { + angle: Math.PI / 4, + variation: Math.PI / 6, + spacing: 4, + length: 8, + margin: 2 + } + } + } + } + }, + camera: { + width: window.innerWidth, + height: window.innerHeight, + followSpeed: 0.1 + } +}; \ No newline at end of file diff --git a/html/rogue/js/renderer.js b/html/rogue/js/renderer.js index e0fd489..617b4c7 100644 --- a/html/rogue/js/renderer.js +++ b/html/rogue/js/renderer.js @@ -37,22 +37,26 @@ const renderBackground = (ctx, state, groundY, viewBounds) => { // Save the current transform ctx.save(); - // Reset transform for viewport-fixed sky + // Reset transform for viewport-fixed sky and initial black fill ctx.setTransform(1, 0, 0, 1, 0, 0); // Sky (fixed to viewport) ctx.fillStyle = state.cachedGradient; ctx.fillRect(0, 0, ctx.canvas.width, groundY); - // Restore transform for underground + // Initial black fill for the bottom of the viewport + ctx.fillStyle = '#000000'; + ctx.fillRect(0, groundY, ctx.canvas.width, ctx.canvas.height - groundY + 1); + + // Restore transform for world-space rendering ctx.restore(); - // Underground (follows camera) + // Additional black fill that follows the camera (extends far to left and right) ctx.fillStyle = '#000000'; ctx.fillRect( - viewBounds.left, + viewBounds.left - 2000, groundY, - viewBounds.right - viewBounds.left, + viewBounds.right - viewBounds.left + 4000, ctx.canvas.height ); }; diff --git a/html/rogue/js/rogue.js b/html/rogue/js/rogue.js index 75a4c86..64716a4 100644 --- a/html/rogue/js/rogue.js +++ b/html/rogue/js/rogue.js @@ -22,10 +22,14 @@ const initGame = () => { window.addEventListener('resize', resizeCanvas); resizeCanvas(); + // Calculate initial player position at ground level + const groundY = canvas.height - CONFIG.world.groundHeight; + const initialPlayerY = groundY - CONFIG.player.height; + // Game state let gameState = { time: 0, - player: createPlayer(100, 100), + player: createPlayer(100, initialPlayerY), camera: createCamera(0, 0), world: createWorld(), debug: { diff --git a/html/rogue/js/world.js b/html/rogue/js/world.js index ec6b5e8..0e8cbd7 100644 --- a/html/rogue/js/world.js +++ b/html/rogue/js/world.js @@ -265,30 +265,30 @@ const createWorld = () => { } ], platforms: [ - { - type: WORLD_OBJECTS.PLATFORM, - x: 300, - y: 300, - width: 200, - height: 20, - color: '#484' - }, - { - type: WORLD_OBJECTS.PLATFORM, - x: 600, - y: 200, - width: 200, - height: 20, - color: '#484' - }, - { - type: WORLD_OBJECTS.PLATFORM, - x: -200, - y: 250, - width: 200, - height: 20, - color: '#484' - } + // { + // type: WORLD_OBJECTS.PLATFORM, + // x: 300, + // y: 300, + // width: 200, + // height: 20, + // color: '#484' + // }, + // { + // type: WORLD_OBJECTS.PLATFORM, + // x: 600, + // y: 200, + // width: 200, + // height: 20, + // color: '#484' + // }, + // { + // type: WORLD_OBJECTS.PLATFORM, + // x: -200, + // y: 250, + // width: 200, + // height: 20, + // color: '#484' + // } ], foregroundTrees: [ // Far left trees |