add camera movement

public/client.js

@@ -13,12 +13,12 @@ camera.rotation.set((60 / 180) * Math.PI, 0, 0)
 const entityMaterial = new THREE.MeshToonMaterial({ color: 0xffffff })
 const terrainMaterial = new THREE.MeshToonMaterial({ color: 0xffd700 })
 
-const minimapCamera = new THREE.OrthographicCamera(-5, 5, 5, -5)
+const minimapCamera = new THREE.OrthographicCamera(-10, 10, 10, -10)
 const minimapRenderer = new THREE.WebGLRenderer()
 
 minimapRenderer.setSize(300, 300)
 minimapRenderer.setAnimationLoop(minimapRender)
-minimapCamera.position.set(5, 5, 10)
+minimapCamera.position.set(10, 10, 10)
 
 const entities = {}
 const terrains = {}
@@ -41,7 +41,10 @@ global.renderer = renderer
 global.camera = camera
 global.scene = scene
 
+const keysDown = {}
+
 function render() {
+  cameraMovement()
 	renderer.render(scene, camera)
 }
 
@@ -49,6 +52,19 @@ function minimapRender() {
 	minimapRenderer.render(scene, minimapCamera)
 }
 
+const cameraSpeed = 0.1
+function cameraMovement() {
+  if (keysDown.ArrowLeft) { camera.position.x -= cameraSpeed }
+  else if (keysDown.ArrowRight) { camera.position.x += cameraSpeed }
+
+  if (keysDown.ArrowUp) { camera.position.y += cameraSpeed }
+  else if (keysDown.ArrowDown) { camera.position.y -= cameraSpeed }
+
+  if (keysDown.Space) {
+    camera.position.set(entities['1'].position.x, entities['1'].position.y - 17, 10)
+  }
+}
+
 var websocket = null
 global.websocket = null
 var timerId = null
@@ -160,13 +176,15 @@ window.addEventListener('load', () => {
     }
   })
 
-  window.addEventListener("resize", (event) => {
+  window.addEventListener('resize', (event) => {
     camera.aspect = window.innerWidth / window.innerHeight
     camera.updateProjectionMatrix()
     renderer.setSize(window.innerWidth, window.innerHeight)
   })
 
-  document.addEventListener("contextmenu", (event) => event.preventDefault())
+  document.addEventListener('contextmenu', (event) => event.preventDefault())
+  window.addEventListener('keydown', (event) => keysDown[event.code] = true)
+  window.addEventListener('keyup', (event) => keysDown[event.code] = false)
 
   document.body.appendChild(canvas)
 

public/index.html

@@ -26,6 +26,7 @@
       }
 
       .debug-panel {
+        display: none;
         position: fixed;
         opacity: 0.2;
         inset: 0 0 auto auto;

src/game.js

@@ -3,8 +3,8 @@ import { EventEmitter } from 'node:events'
 export default class Game {
   tickRate = 30
   currentTick = 0
-  width = 1000
+  width = 4000
-  height = 1000
+  height = 4000
 
   #entities = []
   #eventEmitter = new EventEmitter()

src/index.js

@@ -48,15 +48,20 @@ app.listen(port, () => {
 
   const entity2 = new Entity()
   entity2.id = '2'
-  entity2.teleport(800, 100)
+  entity2.teleport(35, 35)
   entity2.radius = 35
   game.spawn_entity(entity2)
 
   const vertices = [
-    { x: 400, y: 400 },
+    { x: 400, y: 200 },
-    { x: 600, y: 400 },
+    { x: 600, y: 200 },
-    { x: 600, y: 600 },
+    { x: 700, y: 300 },
+    { x: 650, y: 600 },
     { x: 400, y: 600 },
+    { x: 400, y: 450 },
+    { x: 600, y: 500 },
+    { x: 600, y: 300 },
+    { x: 400, y: 300 },
   ]
 
   const terrain1 = new Terrain(vertices)