basic version without world movement

Co-authored-by: Copilot <copilot@github.com>

src/App.svelte

@@ -1,29 +1,21 @@
 <script>
   import { onMount } from 'svelte';
+  import { initializeGame, updateGame } from './game.js';
 
   let id; // the div in the HTML
-  let sprite;
 
-  const sketch = (p5) => {
+  window.setup = async () => {
-    p5.setup = async () => {
+    createCanvas(400, 800).parent(id);
-      p5.createCanvas(400, 300);
+    initializeGame();
-      sprite = new p5.Sprite();
+  };
-      sprite.img = '/assets/monster.png';
-      sprite.diameter = 100;
-      sprite.scale = 0.5;
-    };
 
-    p5.draw = () => {
+  window.draw = () => {
-      p5.clear();
+    updateGame();
-      p5.fill(100);
-      p5.ellipse(p5.mouseX, p5.mouseY, 20, 20);
-      sprite.debug = p5.mouse.pressing();
-    };
   };
 
   // On startup
   onMount(function () {
-    let myp5 = new p5(sketch, id);
+    new p5();
   });
 </script>
 

src/game/game.js

@@ -0,0 +1,59 @@
+// Game state
+let player;
+let platform;
+let platforms;
+let cameraOffset = 0;
+
+import { updatePlayerPosition, updateCamera } from '../gameUtils.js';
+
+export function initializeGame() {
+  world.gravity.y = 10;
+
+  player = new Sprite();
+  player.diameter = 100;
+  player.scale = 0.3;
+  player.x = width / 2;
+  player.y = 500;
+  player.bounciness = 0;
+  player.elevation = 0;
+
+  // Create platform at the bottom
+  platform = new Sprite();
+  platform.x = width / 2;
+  platform.y = height - 10;
+  platform.w = width;
+  platform.h = 20;
+  platform.collider = 'static';
+  platform.elevation = 0;
+
+  platforms = new Group();
+  platforms.bounciness = 0;
+  platforms.add(platform);
+
+  for (let i = 1; i < 10; i++) {
+    let p = new Sprite();
+    p.x = (80 * i) % width + 30;
+    p.y = height - 80 * i;
+    p.elevation = 80 * i;
+    p.w = 100;
+    p.h = 20;
+    p.collider = 'static';
+    p.bounciness = 0;
+    platforms.add(p);
+  }
+}
+
+export function updateGame() {
+  clear();
+  background(200);
+
+  const elGain = updatePlayerPosition(player, platforms);
+
+
+  // UI
+  fill(0);
+  textSize(24);
+  textAlign(RIGHT);
+  text(`${Math.floor(player.elevation)}`, width - 20, 30);
+}
+

src/game/gameUtils.js

@@ -0,0 +1,47 @@
+// Game utilities for player controls and movement
+
+
+export function updatePlayerPosition(player, platforms) {
+  let elevationGain = 0;
+
+  // Controls
+  player.vel.x = 0;
+  if (keyIsDown(LEFT_ARROW)) {
+    player.vel.x = -5;
+  }
+  if (keyIsDown(RIGHT_ARROW)) {
+    player.vel.x = 5;
+  }
+
+  // Jumping thrue platforms
+  for (let plat of platforms) {
+    if (player.vel.y <= 0 && player.y > plat.y) {
+      plat.collider = 'none';
+    } else {
+      plat.collider = 'static';
+    }
+  }
+
+
+  // Automatic jumping
+  if (player.vel.y >= 0) {
+    player.collides(platforms, (player, platform) => {
+      player.vel.y = -7.5;
+
+      if (player.elevation < platform.elevation) {
+        elevationGain = platform.elevation - player.elevation;
+        player.elevation = platform.elevation;
+      }
+    });
+  }
+
+  // Wrap horizontally around canvas edges
+  if (player.x > width) {
+    player.x = 0;
+  } else if (player.x < 0) {
+    player.x = width;
+  }
+
+  return elevationGain;
+}
+