KGL.js/index.html at main · KenzoBasarTheDev/KGL.js · 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
<!DOCTYPE html>
<html>
<head>
  <title>KGL Open World with Player</title>
  <style>
    body { margin: 0; background: #000; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
<canvas id="kgl" width="800" height="600"></canvas>
<script type="module">
import { Kgl } from 'https://cdn.jsdelivr.net/gh/KenzoBasarTheDev/KGL.js@master/kgl.js';

const canvas = document.getElementById('kgl');
const kgl = new Kgl(canvas);

// World
const world = [];
const blockSpacing = 100;
for (let x = -5; x <= 5; x++) {
  for (let z = -5; z <= 5; z++) {
    world.push({ x: x * blockSpacing, y: 0, z: z * blockSpacing });
  }
}

// Faces
const cubeFaces = [
  [0, 1, 2], [0, 2, 3], // front
  [1, 5, 6], [1, 6, 2], // right
  [5, 4, 7], [5, 7, 6], // back
  [4, 0, 3], [4, 3, 7], // left
  [3, 2, 6], [3, 6, 7], // top
  [4, 5, 1], [4, 1, 0]  // bottom
];

// Player
let player = {
  x: 0,
  y: 300, // start above ground
  z: 0,
  velY: 0,
  onGround: false
};

const gravity = 0.8;
const jumpStrength = -12;
const moveSpeed = 4;

function getCubeVertices(pos) {
  const s = 40;
  const { x, y, z } = pos;
  return [
    { x: x - s, y: y - s, z: z - s },
    { x: x + s, y: y - s, z: z - s },
    { x: x + s, y: y + s, z: z - s },
    { x: x - s, y: y + s, z: z - s },
    { x: x - s, y: y - s, z: z + s },
    { x: x + s, y: y - s, z: z + s },
    { x: x + s, y: y + s, z: z + s },
    { x: x - s, y: y + s, z: z + s }
  ];
}

function loop() {
  kgl.clear('#111');

  // Movement
  if (kgl.keys['w']) player.z -= moveSpeed;
  if (kgl.keys['s']) player.z += moveSpeed;
  if (kgl.keys['a']) player.x -= moveSpeed;
  if (kgl.keys['d']) player.x += moveSpeed;
  if (kgl.keys[' ']) {
    if (player.onGround) {
      player.velY = jumpStrength;
      player.onGround = false;
    }
  }

  // Gravity
  player.velY += gravity;
  player.y += player.velY;

  // Simple ground check (y = 0)
  if (player.y >= 0) {
    player.y = 0;
    player.velY = 0;
    player.onGround = true;
  }

  // Camera angles
  kgl.angleY = player.x * 0.005;
  kgl.angleX = player.z * 0.005;

  // Render only visible blocks (max 10)
  let rendered = 0;
  for (const block of world) {
    const dx = block.x - player.x;
    const dz = block.z - player.z;
    const distSq = dx * dx + dz * dz;
    if (distSq < 200000 && rendered < 10) {
      const translated = {
        x: block.x - player.x,
        y: block.y - player.y,
        z: block.z - player.z + 300 // move forward for projection
      };
      const verts = getCubeVertices(translated);
      kgl.drawSolid(verts, cubeFaces, '#4cf');
      rendered++;
    }
  }

  requestAnimationFrame(loop);
}

loop();
</script>
</body>
</html>