Game Making Between the PEKs and the PIMPs

If anyone is interested in helping me with coding some of the game, please reach out. It's something I've been working on in between @enginewitty and the PIMP backend work, and my own PeakeCoin Projects. This is the code as far as I have come. It can be a lot of work, but it does come with its perks.

I'll work on getting this uploaded so it's playable as I work on it.

//game.js



// Babylon.js 2D top-down setup
const canvas = document.getElementById("gameCanvas");
const engine = new BABYLON.Engine(canvas, true);
const scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color3(0.95, 0.95, 0.95);

// Camera for side-view 2.5D (like Mario)
const camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 50, 150), scene);
camera.setTarget(new BABYLON.Vector3(0, 50, 0));
camera.mode = BABYLON.Camera.ORTHOGRAPHIC_CAMERA;
camera.orthoLeft = -canvas.width / 2;
camera.orthoRight = canvas.width / 2;
camera.orthoTop = canvas.height / 2;
camera.orthoBottom = -canvas.height / 2;

// Add lighting (essential for Babylon.js materials)
const light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 1.0;

// Simple tile map (10x10 for demo)
const TILE_SIZE = 48;
const MAP_W = 10;
const MAP_H = 10;
const map = [
  [0,0,0,0,0,0,0,0,0,0],
  [0,1,1,0,0,0,1,1,1,0],
  [0,0,0,0,1,0,0,0,1,0],
  [0,1,0,0,1,0,1,0,0,0],
  [0,1,0,0,0,0,1,0,1,0],
  [0,0,0,1,1,0,0,0,1,0],
  [0,1,0,0,0,0,1,0,0,0],
  [0,1,1,1,0,1,1,0,1,0],
  [0,0,0,0,0,0,0,0,1,0],
  [0,0,1,1,1,0,0,0,0,0],
];

// Create side-view ground platforms (like Mario levels)
for (let x = 0; x < MAP_W * 2; x++) {
  // Ground platform
  const ground = BABYLON.MeshBuilder.CreateBox(`ground_${x}`, {width: TILE_SIZE, height: TILE_SIZE/2, depth: TILE_SIZE}, scene);
  ground.position.x = (x - MAP_W) * TILE_SIZE;
  ground.position.y = 0; // Ground level
  ground.position.z = 0;
  const groundMat = new BABYLON.StandardMaterial(`groundMat_${x}`, scene);
  groundMat.diffuseColor = new BABYLON.Color3(0.4, 0.3, 0.2); // Brown ground
  ground.material = groundMat;
  
  // Occasional platforms at different heights
  if (x % 4 === 0 && x > 2) {
    const platform = BABYLON.MeshBuilder.CreateBox(`platform_${x}`, {width: TILE_SIZE * 2, height: TILE_SIZE/3, depth: TILE_SIZE}, scene);
    platform.position.x = (x - MAP_W) * TILE_SIZE;
    platform.position.y = 60 + Math.sin(x * 0.5) * 30; // Varying platform heights
    platform.position.z = 0;
    const platMat = new BABYLON.StandardMaterial(`platMat_${x}`, scene);
    platMat.diffuseColor = new BABYLON.Color3(0.2, 0.6, 0.2); // Green platforms
    platform.material = platMat;
  }
}

// Player as a colored circle

// Player as a simple human figure (top-down)


const playerGroup = new BABYLON.TransformNode("playerGroup", scene);

// Create super smooth character with joint hierarchy
const charSize = 20;

// Create materials with bright outline effect
const createOutlineMaterial = (color, outlineColor = new BABYLON.Color3(0, 1, 1)) => {
  const mat = new BABYLON.StandardMaterial("material", scene);
  mat.diffuseColor = color;
  mat.emissiveColor = color.scale(0.1); // Slight glow
  
  // Create outline effect using edge rendering
  mat.backFaceCulling = false;
  return mat;
};

// Head with smooth sphere
const head = BABYLON.MeshBuilder.CreateSphere("head", {diameter: charSize, segments: 32}, scene);
const headMat = createOutlineMaterial(new BABYLON.Color3(1, 0.85, 0.7));
head.material = headMat;
head.position.y = 55;
head.position.z = 0;
head.parent = playerGroup;

// Neck connector (smooth joint)
const neck = BABYLON.MeshBuilder.CreateCylinder("neck", {height: 8, diameter: 6, tessellation: 16}, scene);
neck.material = headMat;
neck.position.y = 46;
neck.parent = playerGroup;

// Torso (smooth rounded rectangle)
const torso = BABYLON.MeshBuilder.CreateCylinder("torso", {height: charSize * 1.4, diameter: charSize * 0.9, tessellation: 8}, scene);
const torsoMat = createOutlineMaterial(new BABYLON.Color3(0.9, 0.3, 0.3));
torso.material = torsoMat;
torso.position.y = 35;
torso.parent = playerGroup;

// Shoulder joints (smooth connection points)
const leftShoulder = BABYLON.MeshBuilder.CreateSphere("leftShoulder", {diameter: 6, segments: 16}, scene);
leftShoulder.material = headMat;
leftShoulder.position.x = -charSize * 0.4;
leftShoulder.position.y = 42;
leftShoulder.parent = playerGroup;

const rightShoulder = BABYLON.MeshBuilder.CreateSphere("rightShoulder", {diameter: 6, segments: 16}, scene);
rightShoulder.material = headMat;
rightShoulder.position.x = charSize * 0.4;
rightShoulder.position.y = 42;
rightShoulder.parent = playerGroup;

// Upper arms (smooth cylinders)
const leftUpperArm = BABYLON.MeshBuilder.CreateCylinder("leftUpperArm", {height: charSize * 0.7, diameter: 5, tessellation: 12}, scene);
const armMat = createOutlineMaterial(new BABYLON.Color3(1, 0.8, 0.6));
leftUpperArm.material = armMat;
leftUpperArm.position.x = -charSize * 0.4;
leftUpperArm.position.y = 35;
leftUpperArm.parent = playerGroup;

const rightUpperArm = BABYLON.MeshBuilder.CreateCylinder("rightUpperArm", {height: charSize * 0.7, diameter: 5, tessellation: 12}, scene);
rightUpperArm.material = armMat;
rightUpperArm.position.x = charSize * 0.4;
rightUpperArm.position.y = 35;
rightUpperArm.parent = playerGroup;

// Elbow joints
const leftElbow = BABYLON.MeshBuilder.CreateSphere("leftElbow", {diameter: 4, segments: 12}, scene);
leftElbow.material = armMat;
leftElbow.position.x = -charSize * 0.4;
leftElbow.position.y = 28;
leftElbow.parent = playerGroup;

const rightElbow = BABYLON.MeshBuilder.CreateSphere("rightElbow", {diameter: 4, segments: 12}, scene);
rightElbow.material = armMat;
rightElbow.position.x = charSize * 0.4;
rightElbow.position.y = 28;
rightElbow.parent = playerGroup;

// Forearms
const leftForearm = BABYLON.MeshBuilder.CreateCylinder("leftForearm", {height: charSize * 0.6, diameter: 4, tessellation: 12}, scene);
leftForearm.material = armMat;
leftForearm.position.x = -charSize * 0.4;
leftForearm.position.y = 22;
leftForearm.parent = playerGroup;

const rightForearm = BABYLON.MeshBuilder.CreateCylinder("rightForearm", {height: charSize * 0.6, diameter: 4, tessellation: 12}, scene);
rightForearm.material = armMat;
rightForearm.position.x = charSize * 0.4;
rightForearm.position.y = 22;
rightForearm.parent = playerGroup;

// Hip joints
const leftHip = BABYLON.MeshBuilder.CreateSphere("leftHip", {diameter: 6, segments: 16}, scene);
const legMat = createOutlineMaterial(new BABYLON.Color3(0.2, 0.2, 0.9));
leftHip.material = legMat;
leftHip.position.x = -charSize * 0.2;
leftHip.position.y = 25;
leftHip.parent = playerGroup;

const rightHip = BABYLON.MeshBuilder.CreateSphere("rightHip", {diameter: 6, segments: 16}, scene);
rightHip.material = legMat;
rightHip.position.x = charSize * 0.2;
rightHip.position.y = 25;
rightHip.parent = playerGroup;

// Thighs
const leftThigh = BABYLON.MeshBuilder.CreateCylinder("leftThigh", {height: charSize * 0.8, diameter: 6, tessellation: 12}, scene);
leftThigh.material = legMat;
leftThigh.position.x = -charSize * 0.2;
leftThigh.position.y = 18;
leftThigh.parent = playerGroup;

const rightThigh = BABYLON.MeshBuilder.CreateCylinder("rightThigh", {height: charSize * 0.8, diameter: 6, tessellation: 12}, scene);
rightThigh.material = legMat;
rightThigh.position.x = charSize * 0.2;
rightThigh.position.y = 18;
rightThigh.parent = playerGroup;

// Knee joints
const leftKnee = BABYLON.MeshBuilder.CreateSphere("leftKnee", {diameter: 5, segments: 12}, scene);
leftKnee.material = legMat;
leftKnee.position.x = -charSize * 0.2;
leftKnee.position.y = 12;
leftKnee.parent = playerGroup;

const rightKnee = BABYLON.MeshBuilder.CreateSphere("rightKnee", {diameter: 5, segments: 12}, scene);
rightKnee.material = legMat;
rightKnee.position.x = charSize * 0.2;
rightKnee.position.y = 12;
rightKnee.parent = playerGroup;

// Calves
const leftCalf = BABYLON.MeshBuilder.CreateCylinder("leftCalf", {height: charSize * 0.7, diameter: 5, tessellation: 12}, scene);
leftCalf.material = legMat;
leftCalf.position.x = -charSize * 0.2;
leftCalf.position.y = 7;
leftCalf.parent = playerGroup;

const rightCalf = BABYLON.MeshBuilder.CreateCylinder("rightCalf", {height: charSize * 0.7, diameter: 5, tessellation: 12}, scene);
rightCalf.material = legMat;
rightCalf.position.x = charSize * 0.2;
rightCalf.position.y = 7;
rightCalf.parent = playerGroup;

// Feet for complete walking cycle
const leftFoot = BABYLON.MeshBuilder.CreateBox("leftFoot", {width: 8, height: 3, depth: 12}, scene);
const footMat = createOutlineMaterial(new BABYLON.Color3(0.3, 0.2, 0.1));
leftFoot.material = footMat;
leftFoot.position.x = -charSize * 0.2;
leftFoot.position.y = 2;
leftFoot.parent = playerGroup;

const rightFoot = BABYLON.MeshBuilder.CreateBox("rightFoot", {width: 8, height: 3, depth: 12}, scene);
rightFoot.material = footMat;
rightFoot.position.x = charSize * 0.2;
rightFoot.position.y = 2;
rightFoot.parent = playerGroup;

// Add bright outline effect to entire character
playerGroup.getChildMeshes().forEach(mesh => {
  if (mesh.material) {
    mesh.renderOutline = true;
    mesh.outlineWidth = 0.5;
    mesh.outlineColor = new BABYLON.Color3(0, 1, 1); // Bright cyan outline
  }
});

// Store body parts for smooth animation
const bodyParts = {
  head, neck, torso,
  leftShoulder, rightShoulder,
  leftUpperArm, rightUpperArm,
  leftElbow, rightElbow,
  leftForearm, rightForearm,
  leftHip, rightHip,
  leftThigh, rightThigh,
  leftKnee, rightKnee,
  leftCalf, rightCalf,
  leftFoot, rightFoot
};

// Initial position (standing on ground)
playerGroup.position.x = 0;
playerGroup.position.y = 25; // Standing on ground level
playerGroup.position.z = 0;

// Add a simple test box to verify rendering
const testBox = BABYLON.MeshBuilder.CreateBox("testBox", {size: 20}, scene);
const testMat = new BABYLON.StandardMaterial("testMat", scene);
testMat.diffuseColor = new BABYLON.Color3(1, 0, 0); // bright red
testBox.material = testMat;
testBox.position.x = 100;
testBox.position.y = 100;
testBox.position.z = 2;

console.log("Player created at position:", playerGroup.position);
console.log("Camera position:", camera.position);
console.log("Camera ortho bounds:", camera.orthoLeft, camera.orthoRight, camera.orthoTop, camera.orthoBottom);
console.log("Test box created at:", testBox.position);

// Player movement with Mario-style physics
let playerX = 0;
let playerVelocityY = 0; // For jumping/gravity
let isMoving = false;
let walkCycle = 0;
const speed = 3;
const keys = {};

// Super smooth joint animation with fluid movement
function animateWalk() {
  if (!isMoving) {
    // Smoothly return to neutral pose with interpolation
    bodyParts.leftUpperArm.rotation.z = BABYLON.Scalar.Lerp(bodyParts.leftUpperArm.rotation.z, 0, 0.15);
    bodyParts.rightUpperArm.rotation.z = BABYLON.Scalar.Lerp(bodyParts.rightUpperArm.rotation.z, 0, 0.15);
    bodyParts.leftForearm.rotation.z = BABYLON.Scalar.Lerp(bodyParts.leftForearm.rotation.z, 0, 0.15);
    bodyParts.rightForearm.rotation.z = BABYLON.Scalar.Lerp(bodyParts.rightForearm.rotation.z, 0, 0.15);
    bodyParts.leftThigh.rotation.z = BABYLON.Scalar.Lerp(bodyParts.leftThigh.rotation.z, 0, 0.15);
    bodyParts.rightThigh.rotation.z = BABYLON.Scalar.Lerp(bodyParts.rightThigh.rotation.z, 0, 0.15);
    bodyParts.leftCalf.rotation.z = BABYLON.Scalar.Lerp(bodyParts.leftCalf.rotation.z, 0, 0.15);
    bodyParts.rightCalf.rotation.z = BABYLON.Scalar.Lerp(bodyParts.rightCalf.rotation.z, 0, 0.15);
    bodyParts.torso.position.y = BABYLON.Scalar.Lerp(bodyParts.torso.position.y, 35, 0.15);
    bodyParts.head.position.y = BABYLON.Scalar.Lerp(bodyParts.head.position.y, 55, 0.15);
    return;
  }
  
  walkCycle += 0.2; // Smooth cycle speed
  
  // Calculate fluid movement phases
  const armPhase = Math.sin(walkCycle) * 0.5;
  const legPhase = Math.sin(walkCycle) * 0.7;
  const kneePhase = Math.sin(walkCycle + Math.PI/3) * 0.4;
  const elbowPhase = Math.sin(walkCycle + Math.PI/4) * 0.3;
  const bounce = Math.abs(Math.sin(walkCycle * 2)) * 2;
  const sway = Math.sin(walkCycle * 0.5) * 0.05;
  
  // Super smooth arm movement with natural joint articulation
  bodyParts.leftUpperArm.rotation.z = armPhase;
  bodyParts.rightUpperArm.rotation.z = -armPhase;
  
  // Forearms follow with natural elbow bend
  bodyParts.leftForearm.rotation.z = armPhase * 0.6 + elbowPhase;
  bodyParts.rightForearm.rotation.z = -armPhase * 0.6 - elbowPhase;
  
  // Biomechanically correct leg movement
  bodyParts.leftThigh.rotation.z = legPhase;
  bodyParts.rightThigh.rotation.z = -legPhase;
  
  // Correct knee bending: knees bend when leg swings forward (lifting), straighten when pushing back
  const leftKneeBend = legPhase > 0 ? Math.abs(legPhase) * 0.8 : 0; // Bend when swinging forward
  const rightKneeBend = -legPhase > 0 ? Math.abs(-legPhase) * 0.8 : 0; // Bend when swinging forward
  
  bodyParts.leftCalf.rotation.z = -leftKneeBend; // Negative rotation bends knee forward
  bodyParts.rightCalf.rotation.z = -rightKneeBend;
  
  // Smooth body movement
  bodyParts.torso.position.y = 35 + bounce;
  bodyParts.head.position.y = 55 + bounce;
  bodyParts.neck.position.y = 46 + bounce;
  
  // Natural body sway and rotation
  bodyParts.torso.rotation.z = sway;
  bodyParts.head.rotation.z = sway * 0.5;
  
  // Shoulder movement follows arm swing
  bodyParts.leftShoulder.position.y = 42 + bounce + Math.sin(walkCycle + armPhase) * 0.5;
  bodyParts.rightShoulder.position.y = 42 + bounce + Math.sin(walkCycle - armPhase) * 0.5;
  
  // Hip movement follows leg swing
  bodyParts.leftHip.rotation.z = legPhase * 0.3;
  bodyParts.rightHip.rotation.z = -legPhase * 0.3;
  
  // Joint connections move smoothly
  bodyParts.leftElbow.position.y = 28 + bounce + Math.sin(walkCycle + elbowPhase) * 0.3;
  bodyParts.rightElbow.position.y = 28 + bounce + Math.sin(walkCycle - elbowPhase) * 0.3;
  
  // Knee position follows thigh movement but also lifts during bending
  const leftKneeHeight = 12 + bounce * 0.5 + (leftKneeBend * 2); // Knee lifts when bending
  const rightKneeHeight = 12 + bounce * 0.5 + (rightKneeBend * 2);
  
  bodyParts.leftKnee.position.y = leftKneeHeight;
  bodyParts.rightKnee.position.y = rightKneeHeight;
  
  // Calf position should follow knee movement
  bodyParts.leftCalf.position.y = 7 + bounce * 0.3 + (leftKneeBend * 1.5);
  bodyParts.rightCalf.position.y = 7 + bounce * 0.3 + (rightKneeBend * 1.5);
  
  // Feet follow the walking cycle - lift when leg swings forward, plant when stepping
  const leftFootLift = leftKneeBend * 3; // Foot lifts more dramatically
  const rightFootLift = rightKneeBend * 3;
  
  bodyParts.leftFoot.position.y = 2 + leftFootLift;
  bodyParts.rightFoot.position.y = 2 + rightFootLift;
  
  // Foot angle changes during walk cycle
  bodyParts.leftFoot.rotation.z = leftKneeBend * 0.3; // Foot tilts up when lifting
  bodyParts.rightFoot.rotation.z = rightKneeBend * 0.3;
}

// Handle keyboard input
window.addEventListener("keydown", (e) => {
  keys[e.key.toLowerCase()] = true;
});

window.addEventListener("keyup", (e) => {
  keys[e.key.toLowerCase()] = false;
});

// Side-scrolling movement (Mario-style)
function updateMovement() {
  let moving = false;
  let deltaX = 0;
  
  // Horizontal movement only (side-scrolling)
  if (keys['d'] || keys['arrowright']) {
    deltaX += speed;
    moving = true;
    // Face right
    playerGroup.rotation.y = 0;
  }
  if (keys['a'] || keys['arrowleft']) {
    deltaX -= speed;
    moving = true;
    // Face left
    playerGroup.rotation.y = Math.PI;
  }
  
  // Jump (Mario-style)
  if (keys['w'] || keys['arrowup'] || keys[' ']) {
    if (Math.abs(playerGroup.position.y - 25) < 5) { // Only jump if on ground
      playerVelocityY = 8; // Jump force
    }
  }
  
  // Apply horizontal movement
  playerX += deltaX;
  playerGroup.position.x = playerX;
  
  // Apply gravity and vertical movement
  playerVelocityY -= 0.3; // Gravity
  playerGroup.position.y += playerVelocityY;
  
  // Ground collision
  if (playerGroup.position.y <= 25) {
    playerGroup.position.y = 25;
    playerVelocityY = 0;
  }
  
  // Update animation state
  isMoving = moving;
  animateWalk();
}

engine.runRenderLoop(() => {
  updateMovement();
  scene.render();
});