feat: taller world (3:2), reduce difficulty, add gitignore

Author: kvrvgixzis

.gitignore

@@ -0,0 +1,3 @@
+node_modules/
+.DS_Store
+*.log

index.html

@@ -16,7 +16,7 @@
         <div>runner</div>
         <div>score: <span id="score">0</span></div>
       </div>
-      <canvas id="canvas" width="600" height="200"></canvas>
+      <canvas id="canvas" width="600" height="400"></canvas>
       <button class="jump-btn">start</button>
       <div class="high-score">
         high score: <span id="high-score">0</span>

src/config.js

@@ -1,6 +1,6 @@
 export const WORLD = {
   width: 600,
-  height: 200,
+  height: 400,
 };
 
 export const COLORS = {
@@ -13,7 +13,7 @@ export const COLORS = {
 };
 
 export const HERO = {
-  size: 24,
+  size: 26,
   startX: 50,
 };
 
@@ -22,28 +22,28 @@ export const TILE = {
 };
 
 export const PHYSICS = {
-  gravity: 900,
-  jumpImpulse: -340,
-  holdGravity: 120,
+  gravity: 980,
+  jumpImpulse: -400,
+  holdGravity: 130,
   maxJumpHoldMs: 300,
-  terminalVelocity: 600,
+  terminalVelocity: 700,
 };
 
 export const OBSTACLE = {
-  width: 24,
-  minHeight: 24,
-  maxHeight: 48,
-  minGap: 90,
-  maxGap: 200,
+  width: 26,
+  minHeight: 30,
+  maxHeight: 64,
+  minGap: 130,
+  maxGap: 280,
   spawnX: WORLD.width + 40,
   collisionInset: 3,
 };
 
 export const PROGRESSION = {
-  speedUpEvery: 3,
-  speedStep: 14,
-  startSpeed: 160,
-  maxSpeed: 360,
+  speedUpEvery: 5,
+  speedStep: 12,
+  startSpeed: 140,
+  maxSpeed: 320,
   reverseGravityEvery: 20,
 };
 

src/main.js

@@ -25,7 +25,7 @@ canvas.height = WORLD.height;
 
 // Keep canvas aspect ratio on any screen size
 function syncCanvasHeight() {
-  canvas.style.height = `${canvas.offsetWidth / 3}px`;
+  canvas.style.height = `${canvas.offsetWidth * (WORLD.height / WORLD.width)}px`;
 }
 syncCanvasHeight();
 window.addEventListener('resize', syncCanvasHeight);

src/renderer.js

@@ -86,13 +86,13 @@ export function drawReverseFlash(ctx, timer) {
 
 export function drawIdleScreen(ctx) {
   ctx.fillStyle = '#212121';
-  ctx.font = '18px "Press Start 2P", monospace';
+  ctx.font = '20px "Press Start 2P", monospace';
   ctx.textAlign = 'center';
-  ctx.fillText('runner', WORLD.width / 2, WORLD.height / 2 - 12);
+  ctx.fillText('runner', WORLD.width / 2, WORLD.height / 2 - 16);
 
-  ctx.font = '8px "Press Start 2P", monospace';
+  ctx.font = '9px "Press Start 2P", monospace';
   ctx.fillStyle = '#666';
-  ctx.fillText('press space or tap', WORLD.width / 2, WORLD.height / 2 + 16);
+  ctx.fillText('press space or tap', WORLD.width / 2, WORLD.height / 2 + 20);
   ctx.textAlign = 'left';
 }
 
@@ -101,20 +101,20 @@ export function drawGameOver(ctx, score, highScore) {
   ctx.fillRect(0, 0, WORLD.width, WORLD.height);
 
   ctx.fillStyle = '#c0392b';
-  ctx.font = '14px "Press Start 2P", monospace';
+  ctx.font = '16px "Press Start 2P", monospace';
   ctx.textAlign = 'center';
-  ctx.fillText('game over', WORLD.width / 2, WORLD.height / 2 - 16);
+  ctx.fillText('game over', WORLD.width / 2, WORLD.height / 2 - 20);
 
   ctx.fillStyle = '#212121';
-  ctx.font = '8px "Press Start 2P", monospace';
+  ctx.font = '9px "Press Start 2P", monospace';
   ctx.fillText(`score: ${score}`, WORLD.width / 2, WORLD.height / 2 + 8);
 
   if (score >= highScore && score > 0) {
     ctx.fillStyle = '#e67e22';
-    ctx.fillText('new record!', WORLD.width / 2, WORLD.height / 2 + 24);
+    ctx.fillText('new record!', WORLD.width / 2, WORLD.height / 2 + 28);
   }
 
   ctx.fillStyle = '#666';
-  ctx.fillText('press space to retry', WORLD.width / 2, WORLD.height / 2 + 44);
+  ctx.fillText('press space to retry', WORLD.width / 2, WORLD.height / 2 + 52);
   ctx.textAlign = 'left';
 }