jump/script.js at main · lt25106/jump · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
const {
  Engine,
  Render,
  Runner,
  Bodies,
  World,
  Body,
  Events,
  Composite,
} = Matter;

const canvas = document.querySelector("canvas");
const engine = Engine.create();
const world = engine.world;
world.gravity.y = 1; // Enable gravity by default
const render = Render.create({
  canvas: canvas,
  engine: engine,
  options: {
    width: window.innerWidth,
    height: window.innerHeight,
    wireframes: false,
    background: 'white',
  }
});

const floor1 = Bodies.rectangle(window.innerWidth / 2, window.innerHeight - 35, window.innerWidth, 70, {
  isStatic: true,
  render: {
    fillStyle: 'black',
  }
});

const player = Bodies.rectangle(window.innerWidth/2, window.innerHeight - 200, 70, 70, {
  friction: 0,
  restitution: 1,
  render: {
    fillStyle: 'red',
  }
});

World.add(world, [floor1, player]);
Render.run(render);
Runner.run(Runner.create(), engine);

// Camera follow logic
// Smooth camera follow using linear interpolation (lerp)
let cameraX = player.position.x;
let cameraY = player.position.y;

function cameraFollowHandler() {
  const targetX = player.position.x;
  const targetY = player.position.y;

  // Lerp factor (0.1 = smooth, 1 = instant)
  const lerp = 0.1;
  cameraX += (targetX - cameraX) * lerp;
  cameraY += (targetY - cameraY) * lerp;

  // Adjust render bounds to center the camera smoothly on the player
  Render.lookAt(render, {
    min: {
      x: cameraX - window.innerWidth / 2,
      y: cameraY - window.innerHeight / 2
    },
    max: {
      x: cameraX + window.innerWidth / 2,
      y: cameraY + window.innerHeight / 2
    }
  });

  // No need to manually set the render context transform; Matter.Render will handle it based on render.bounds.
}

Events.on(engine, "beforeUpdate", cameraFollowHandler);

// Track if the player is on the ground using collision events
let isPlayerOnGround = false;

Events.on(engine, "collisionStart", (event) => {
  event.pairs.forEach((pair) => {
    if (
      (pair.bodyA === player && pair.bodyB === floor1) ||
      (pair.bodyB === player && pair.bodyA === floor1)
    ) {
      isPlayerOnGround = true;
    }
  });
});

Events.on(engine, "collisionEnd", (event) => {
  event.pairs.forEach((pair) => {
    if (
      (pair.bodyA === player && pair.bodyB === floor1) ||
      (pair.bodyB === player && pair.bodyA === floor1)
    ) {
      isPlayerOnGround = false;
    }
  });
});

document.addEventListener("keydown", (event) => {
  switch (event.key) {
    case "ArrowUp":
      Body.applyForce(player, player.position, { x: 0, y: -0.2 });
      break;
    case "ArrowDown":
      Body.applyForce(player, player.position, { x: 0, y: 0.2 });
      break;
    case "ArrowLeft":
      Body.applyForce(player, player.position, { x: -0.2, y: 0 });
      if (!isPlayerOnGround) {
        Body.setAngularVelocity(player, -0.05);
      }
      break;
    case "ArrowRight":
      Body.applyForce(player, player.position, { x: 0.2, y: 0 });
      if (!isPlayerOnGround) {
        Body.setAngularVelocity(player, 0.05);
      }
      break;
  }
});