diff --git a/public/client.js b/public/client.js index 7099c79..3ca9d68 100644 --- a/public/client.js +++ b/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) diff --git a/public/index.html b/public/index.html index 91a36b6..b076159 100644 --- a/public/index.html +++ b/public/index.html @@ -26,6 +26,7 @@ } .debug-panel { + display: none; position: fixed; opacity: 0.2; inset: 0 0 auto auto; diff --git a/src/game.js b/src/game.js index b794d59..d6570e8 100644 --- a/src/game.js +++ b/src/game.js @@ -3,8 +3,8 @@ import { EventEmitter } from 'node:events' export default class Game { tickRate = 30 currentTick = 0 - width = 1000 - height = 1000 + width = 4000 + height = 4000 #entities = [] #eventEmitter = new EventEmitter() diff --git a/src/index.js b/src/index.js index 742e0c8..64c1402 100644 --- a/src/index.js +++ b/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: 600, y: 400 }, - { x: 600, y: 600 }, + { x: 400, y: 200 }, + { x: 600, y: 200 }, + { 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)