웹 게임 개발은 HTML5, Canvas API, WebGL 등의 기술을 활용하여 브라우저에서 실행되는 게임을 만드는 것이다. 모바일과 데스크톱 모두에서 실행 가능하며, 별도의 설치 없이 즉시 플레이할 수 있는 장점이 있다. 이 글은 웹 게임 개발에 필요한 모든 기술 스택을 실전 예제와 함께 다룬다.
\n웹 게임은 다음과 같은 특징을 가진다:
\n| 기술 | \n용도 | \n예시 | \n
|---|---|---|
| Canvas API | \n2D 그래픽 렌더링 | \n간단한 2D 게임 | \n
| WebGL | \n3D 그래픽 렌더링 | \n3D 게임, 시뮬레이션 | \n
| Web Audio API | \n오디오 처리 | \n사운드, 음악 재생 | \n
| WebSocket | \n실시간 통신 | \n멀티플레이어 게임 | \n
| IndexedDB | \n로컬 저장소 | \n게임 데이터 저장 | \n
| Service Worker | \n오프라인 지원 | \nPWA 게임 | \n
| 엔진 | \n타입 | \n난이도 | \n성능 | \n용도 | \n
|---|---|---|---|---|
| Phaser | \n2D | \n중급 | \n높음 | \n2D 액션, 퍼즐 게임 | \n
| Three.js | \n3D | \n중급 | \n높음 | \n3D 시각화, 게임 | \n
| Babylon.js | \n3D | \n중급 | \n매우 높음 | \n고품질 3D 게임 | \n
| Unity WebGL | \n2D/3D | \n고급 | \n매우 높음 | \n전문 게임 개발 | \n
| PixiJS | \n2D | \n중급 | \n매우 높음 | \n고성능 2D 게임 | \n
| Matter.js | \n물리 | \n중급 | \n중간 | \n물리 기반 게임 | \n
<!-- index.html -->\n<!DOCTYPE html>\n<html>\n<head>\n <meta charset=\"UTF-8\">\n <title>Canvas Game</title>\n <style>\n body {\n margin: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n background: #000;\n }\n canvas {\n border: 1px solid #fff;\n }\n </style>\n</head>\n<body>\n <canvas id=\"gameCanvas\" width=\"800\" height=\"600\"></canvas>\n <script src=\"game.js\"></script>\n</body>\n</html>// game.js\nclass Game {\n constructor() {\n this.canvas = document.getElementById('gameCanvas');\n this.ctx = this.canvas.getContext('2d');\n this.width = this.canvas.width;\n this.height = this.canvas.height;\n \n this.player = {\n x: this.width / 2,\n y: this.height / 2,\n radius: 20,\n speed: 5,\n color: '#00ff00'\n };\n \n this.keys = {};\n this.setupEventListeners();\n this.gameLoop();\n }\n \n setupEventListeners() {\n window.addEventListener('keydown', (e) => {\n this.keys[e.key] = true;\n });\n \n window.addEventListener('keyup', (e) => {\n this.keys[e.key] = false;\n });\n }\n \n update() {\n // 플레이어 이동\n if (this.keys['ArrowUp'] || this.keys['w']) {\n this.player.y -= this.player.speed;\n }\n if (this.keys['ArrowDown'] || this.keys['s']) {\n this.player.y += this.player.speed;\n }\n if (this.keys['ArrowLeft'] || this.keys['a']) {\n this.player.x -= this.player.speed;\n }\n if (this.keys['ArrowRight'] || this.keys['d']) {\n this.player.x += this.player.speed;\n }\n \n // 경계 체크\n this.player.x = Math.max(this.player.radius, \n Math.min(this.width - this.player.radius, this.player.x));\n this.player.y = Math.max(this.player.radius, \n Math.min(this.height - this.player.radius, this.player.y));\n }\n \n render() {\n // 화면 클리어\n this.ctx.fillStyle = '#000';\n this.ctx.fillRect(0, 0, this.width, this.height);\n \n // 플레이어 그리기\n this.ctx.beginPath();\n this.ctx.arc(this.player.x, this.player.y, \n this.player.radius, 0, Math.PI * 2);\n this.ctx.fillStyle = this.player.color;\n this.ctx.fill();\n this.ctx.strokeStyle = '#fff';\n this.ctx.lineWidth = 2;\n this.ctx.stroke();\n }\n \n gameLoop() {\n this.update();\n this.render();\n requestAnimationFrame(() => this.gameLoop());\n }\n}\n\n// 게임 시작\nnew Game();// sprite-animation.js\nclass Sprite {\n constructor(image, frameWidth, frameHeight, frameCount, fps = 10) {\n this.image = image;\n this.frameWidth = frameWidth;\n this.frameHeight = frameHeight;\n this.frameCount = frameCount;\n this.fps = fps;\n this.currentFrame = 0;\n this.frameTime = 1000 / fps;\n this.lastTime = Date.now();\n }\n \n update() {\n const now = Date.now();\n if (now - this.lastTime >= this.frameTime) {\n this.currentFrame = (this.currentFrame + 1) % this.frameCount;\n this.lastTime = now;\n }\n }\n \n draw(ctx, x, y) {\n const sx = this.currentFrame * this.frameWidth;\n ctx.drawImage(\n this.image,\n sx, 0, this.frameWidth, this.frameHeight,\n x, y, this.frameWidth, this.frameHeight\n );\n }\n}\n\n// 사용 예시\nconst image = new Image();\nimage.src = 'sprite-sheet.png';\nimage.onload = () => {\n const sprite = new Sprite(image, 64, 64, 8, 12);\n \n function animate() {\n sprite.update();\n ctx.clearRect(0, 0, canvas.width, canvas.height);\n sprite.draw(ctx, 100, 100);\n requestAnimationFrame(animate);\n }\n animate();\n};// particle-system.js\nclass Particle {\n constructor(x, y) {\n this.x = x;\n this.y = y;\n this.vx = (Math.random() - 0.5) * 4;\n this.vy = (Math.random() - 0.5) * 4;\n this.life = 1.0;\n this.decay = Math.random() * 0.02 + 0.01;\n this.size = Math.random() * 5 + 2;\n this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;\n }\n \n update() {\n this.x += this.vx;\n this.y += this.vy;\n this.life -= this.decay;\n this.vy += 0.1; // 중력\n }\n \n draw(ctx) {\n ctx.save();\n ctx.globalAlpha = this.life;\n ctx.fillStyle = this.color;\n ctx.beginPath();\n ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);\n ctx.fill();\n ctx.restore();\n }\n \n isDead() {\n return this.life <= 0;\n }\n}\n\nclass ParticleSystem {\n constructor() {\n this.particles = [];\n }\n \n emit(x, y, count = 10) {\n for (let i = 0; i < count; i++) {\n this.particles.push(new Particle(x, y));\n }\n }\n \n update() {\n for (let i = this.particles.length - 1; i >= 0; i--) {\n this.particles[i].update();\n if (this.particles[i].isDead()) {\n this.particles.splice(i, 1);\n }\n }\n }\n \n draw(ctx) {\n this.particles.forEach(particle => particle.draw(ctx));\n }\n}\n\n// 사용 예시\nconst particleSystem = new ParticleSystem();\n\ncanvas.addEventListener('click', (e) => {\n const rect = canvas.getBoundingClientRect();\n particleSystem.emit(\n e.clientX - rect.left,\n e.clientY - rect.top,\n 20\n );\n});# npm 설치\nnpm install phaser\n\n# 또는 CDN 사용\n# <script src=\"https://cdn.jsdelivr.net/npm/phaser@3.70.0/dist/phaser.min.js\"></script>// main.js\nimport Phaser from 'phaser';\n\nconst config = {\n type: Phaser.AUTO,\n width: 800,\n height: 600,\n parent: 'game-container',\n physics: {\n default: 'arcade',\n arcade: {\n gravity: { y: 300 },\n debug: false\n }\n },\n scene: {\n preload: preload,\n create: create,\n update: update\n }\n};\n\nconst game = new Phaser.Game(config);\n\nlet player;\nlet platforms;\nlet cursors;\n\nfunction preload() {\n // 이미지 로드\n this.load.image('sky', 'assets/sky.png');\n this.load.image('ground', 'assets/platform.png');\n this.load.image('star', 'assets/star.png');\n this.load.spritesheet('dude', 'assets/dude.png', {\n frameWidth: 32,\n frameHeight: 48\n });\n}\n\nfunction create() {\n // 배경\n this.add.image(400, 300, 'sky');\n \n // 플랫폼 생성\n platforms = this.physics.add.staticGroup();\n platforms.create(400, 568, 'ground').setScale(2).refreshBody();\n platforms.create(600, 400, 'ground');\n platforms.create(50, 250, 'ground');\n platforms.create(750, 220, 'ground');\n \n // 플레이어 생성\n player = this.physics.add.sprite(100, 450, 'dude');\n player.setBounce(0.2);\n player.setCollideWorldBounds(true);\n \n // 플레이어 애니메이션\n this.anims.create({\n key: 'left',\n frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),\n frameRate: 10,\n repeat: -1\n });\n \n this.anims.create({\n key: 'turn',\n frames: [{ key: 'dude', frame: 4 }],\n frameRate: 20\n });\n \n this.anims.create({\n key: 'right',\n frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),\n frameRate: 10,\n repeat: -1\n });\n \n // 충돌 설정\n this.physics.add.collider(player, platforms);\n \n // 입력 설정\n cursors = this.input.keyboard.createCursorKeys();\n \n // 별 생성\n stars = this.physics.add.group({\n key: 'star',\n repeat: 11,\n setXY: { x: 12, y: 0, stepX: 70 }\n });\n \n stars.children.entries.forEach((child) => {\n child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));\n });\n \n this.physics.add.collider(stars, platforms);\n this.physics.add.overlap(player, stars, collectStar, null, this);\n}\n\nfunction update() {\n if (cursors.left.isDown) {\n player.setVelocityX(-160);\n player.anims.play('left', true);\n } else if (cursors.right.isDown) {\n player.setVelocityX(160);\n player.anims.play('right', true);\n } else {\n player.setVelocityX(0);\n player.anims.play('turn');\n }\n \n if (cursors.up.isDown && player.body.touching.down) {\n player.setVelocityY(-330);\n }\n}\n\nfunction collectStar(player, star) {\n star.disableBody(true, true);\n \n // 점수 추가\n score += 10;\n scoreText.setText('Score: ' + score);\n \n // 모든 별 수집 시 재생성\n if (stars.countActive(true) === 0) {\n stars.children.entries.forEach((child) => {\n child.enableBody(true, child.x, 0, true, true);\n });\n }\n}// scenes/MenuScene.js\nexport class MenuScene extends Phaser.Scene {\n constructor() {\n super({ key: 'MenuScene' });\n }\n \n create() {\n this.add.text(400, 200, 'My Game', {\n fontSize: '64px',\n fill: '#fff'\n }).setOrigin(0.5);\n \n const startButton = this.add.text(400, 400, 'Start Game', {\n fontSize: '32px',\n fill: '#0f0'\n }).setOrigin(0.5).setInteractive();\n \n startButton.on('pointerdown', () => {\n this.scene.start('GameScene');\n });\n \n startButton.on('pointerover', () => {\n startButton.setStyle({ fill: '#ff0' });\n });\n \n startButton.on('pointerout', () => {\n startButton.setStyle({ fill: '#0f0' });\n });\n }\n}\n\n// scenes/GameScene.js\nexport class GameScene extends Phaser.Scene {\n constructor() {\n super({ key: 'GameScene' });\n }\n \n preload() {\n // 리소스 로드\n }\n \n create() {\n // 게임 생성\n }\n \n update() {\n // 게임 업데이트\n }\n}\n\n// main.js\nimport { MenuScene } from './scenes/MenuScene.js';\nimport { GameScene } from './scenes/GameScene.js';\n\nconst config = {\n type: Phaser.AUTO,\n width: 800,\n height: 600,\n scene: [MenuScene, GameScene]\n};\n\nconst game = new Phaser.Game(config);npm install three// three-game.js\nimport * as THREE from 'three';\n\nclass Game3D {\n constructor() {\n this.scene = new THREE.Scene();\n this.camera = new THREE.PerspectiveCamera(\n 75,\n window.innerWidth / window.innerHeight,\n 0.1,\n 1000\n );\n this.renderer = new THREE.WebGLRenderer({ antialias: true });\n this.renderer.setSize(window.innerWidth, window.innerHeight);\n this.renderer.shadowMap.enabled = true;\n document.body.appendChild(this.renderer.domElement);\n \n // 조명\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);\n this.scene.add(ambientLight);\n \n const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);\n directionalLight.position.set(5, 10, 5);\n directionalLight.castShadow = true;\n this.scene.add(directionalLight);\n \n // 지면\n const groundGeometry = new THREE.PlaneGeometry(20, 20);\n const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 });\n const ground = new THREE.Mesh(groundGeometry, groundMaterial);\n ground.rotation.x = -Math.PI / 2;\n ground.receiveShadow = true;\n this.scene.add(ground);\n \n // 플레이어 (큐브)\n const playerGeometry = new THREE.BoxGeometry(1, 1, 1);\n const playerMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00 });\n this.player = new THREE.Mesh(playerGeometry, playerMaterial);\n this.player.position.set(0, 0.5, 0);\n this.player.castShadow = true;\n this.scene.add(this.player);\n \n // 카메라 위치\n this.camera.position.set(0, 5, 10);\n this.camera.lookAt(0, 0, 0);\n \n // 입력 처리\n this.keys = {};\n this.setupControls();\n \n // 애니메이션 루프\n this.animate();\n }\n \n setupControls() {\n window.addEventListener('keydown', (e) => {\n this.keys[e.key.toLowerCase()] = true;\n });\n \n window.addEventListener('keyup', (e) => {\n this.keys[e.key.toLowerCase()] = false;\n });\n }\n \n update() {\n const speed = 0.1;\n \n if (this.keys['w'] || this.keys['arrowup']) {\n this.player.position.z -= speed;\n }\n if (this.keys['s'] || this.keys['arrowdown']) {\n this.player.position.z += speed;\n }\n if (this.keys['a'] || this.keys['arrowleft']) {\n this.player.position.x -= speed;\n }\n if (this.keys['d'] || this.keys['arrowright']) {\n this.player.position.x += speed;\n }\n \n // 플레이어 회전\n this.player.rotation.y += 0.01;\n }\n \n animate() {\n requestAnimationFrame(() => this.animate());\n this.update();\n this.renderer.render(this.scene, this.camera);\n }\n}\n\nnew Game3D();npm install cannon// physics-game.js\nimport * as THREE from 'three';\nimport * as CANNON from 'cannon';\n\nclass PhysicsGame {\n constructor() {\n this.scene = new THREE.Scene();\n this.camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\n this.renderer = new THREE.WebGLRenderer();\n this.renderer.setSize(window.innerWidth, window.innerHeight);\n document.body.appendChild(this.renderer.domElement);\n \n // 물리 월드 생성\n this.world = new CANNON.World();\n this.world.gravity.set(0, -9.82, 0);\n this.world.broadphase = new CANNON.NaiveBroadphase();\n \n // 지면\n const groundShape = new CANNON.Plane();\n const groundBody = new CANNON.Body({ mass: 0 });\n groundBody.addShape(groundShape);\n groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);\n this.world.add(groundBody);\n \n const groundGeometry = new THREE.PlaneGeometry(20, 20);\n const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 });\n const groundMesh = new THREE.Mesh(groundGeometry, groundMaterial);\n groundMesh.rotation.x = -Math.PI / 2;\n this.scene.add(groundMesh);\n \n // 공 생성\n this.createBall(0, 5, 0);\n \n // 조명\n const light = new THREE.DirectionalLight(0xffffff, 1);\n light.position.set(5, 10, 5);\n this.scene.add(light);\n this.scene.add(new THREE.AmbientLight(0xffffff, 0.5));\n \n this.camera.position.set(0, 5, 10);\n this.camera.lookAt(0, 0, 0);\n \n this.animate();\n }\n \n createBall(x, y, z) {\n // 물리 바디\n const shape = new CANNON.Sphere(0.5);\n const body = new CANNON.Body({ mass: 1 });\n body.addShape(shape);\n body.position.set(x, y, z);\n this.world.add(body);\n \n // 메시\n const geometry = new THREE.SphereGeometry(0.5, 32, 32);\n const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });\n const mesh = new THREE.Mesh(geometry, material);\n this.scene.add(mesh);\n \n // 물리와 메시 동기화\n body.mesh = mesh;\n }\n \n animate() {\n requestAnimationFrame(() => this.animate());\n \n // 물리 시뮬레이션\n this.world.step(1/60);\n \n // 메시 업데이트\n this.world.bodies.forEach((body) => {\n if (body.mesh) {\n body.mesh.position.copy(body.position);\n body.mesh.quaternion.copy(body.quaternion);\n }\n });\n \n this.renderer.render(this.scene, this.camera);\n }\n}\n\nnew PhysicsGame();npm install @babylonjs/core @babylonjs/loaders// babylon-game.js\nimport { Engine, Scene, ArcRotateCamera, HemisphericLight, \n Vector3, MeshBuilder, StandardMaterial, Color3 } from '@babylonjs/core';\n\nclass BabylonGame {\n constructor(canvasId) {\n this.canvas = document.getElementById(canvasId);\n this.engine = new Engine(this.canvas, true);\n this.scene = this.createScene();\n \n this.engine.runRenderLoop(() => {\n this.scene.render();\n });\n \n window.addEventListener('resize', () => {\n this.engine.resize();\n });\n }\n \n createScene() {\n const scene = new Scene(this.engine);\n \n // 카메라\n const camera = new ArcRotateCamera(\n 'camera',\n -Math.PI / 2,\n Math.PI / 2.5,\n 10,\n Vector3.Zero(),\n scene\n );\n camera.attachToCanvas(this.canvas, true);\n \n // 조명\n const light = new HemisphericLight('light', new Vector3(0, 1, 0), scene);\n light.intensity = 0.7;\n \n // 박스 생성\n const box = MeshBuilder.CreateBox('box', { size: 2 }, scene);\n const material = new StandardMaterial('material', scene);\n material.diffuseColor = new Color3(0, 1, 0);\n box.material = material;\n \n // 애니메이션\n scene.registerBeforeRender(() => {\n box.rotation.y += 0.01;\n });\n \n return scene;\n }\n}\n\nnew BabylonGame('renderCanvas');// asset-loader.js\nimport { SceneLoader, AssetContainer } from '@babylonjs/core';\nimport '@babylonjs/loaders/glTF';\n\nclass AssetManager {\n constructor(scene) {\n this.scene = scene;\n this.assets = new Map();\n }\n \n async loadGLTF(name, path) {\n const container = await SceneLoader.LoadAssetContainerAsync(\n path,\n '',\n this.scene\n );\n \n this.assets.set(name, container);\n return container;\n }\n \n instantiate(name, position) {\n const container = this.assets.get(name);\n if (!container) {\n throw new Error(`Asset ${name} not found`);\n }\n \n const instance = container.instantiateModelsToScene(\n (sourceName) => `${name}_${sourceName}`,\n false,\n { doNotInstantiate: true }\n );\n \n if (position) {\n instance.rootNodes.forEach((node) => {\n node.position = position;\n });\n }\n \n return instance;\n }\n}\n\n// 사용 예시\nconst assetManager = new AssetManager(scene);\nawait assetManager.loadGLTF('character', './models/character.gltf');\nconst character = assetManager.instantiate('character', new Vector3(0, 0, 0));// audio-manager.js\nclass AudioManager {\n constructor() {\n this.audioContext = new (window.AudioContext || window.webkitAudioContext)();\n this.sounds = new Map();\n this.music = null;\n }\n \n async loadSound(name, url) {\n const response = await fetch(url);\n const arrayBuffer = await response.arrayBuffer();\n const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);\n this.sounds.set(name, audioBuffer);\n }\n \n playSound(name, volume = 1.0) {\n const audioBuffer = this.sounds.get(name);\n if (!audioBuffer) {\n console.warn(`Sound ${name} not found`);\n return;\n }\n \n const source = this.audioContext.createBufferSource();\n const gainNode = this.audioContext.createGain();\n \n source.buffer = audioBuffer;\n gainNode.gain.value = volume;\n \n source.connect(gainNode);\n gainNode.connect(this.audioContext.destination);\n source.start(0);\n \n return source;\n }\n \n async playMusic(url, loop = true) {\n const response = await fetch(url);\n const arrayBuffer = await response.arrayBuffer();\n const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);\n \n const source = this.audioContext.createBufferSource();\n const gainNode = this.audioContext.createGain();\n \n source.buffer = audioBuffer;\n source.loop = loop;\n gainNode.gain.value = 0.5;\n \n source.connect(gainNode);\n gainNode.connect(this.audioContext.destination);\n source.start(0);\n \n this.music = { source, gainNode };\n return this.music;\n }\n \n setMusicVolume(volume) {\n if (this.music) {\n this.music.gainNode.gain.value = volume;\n }\n }\n \n stopMusic() {\n if (this.music) {\n this.music.source.stop();\n this.music = null;\n }\n }\n}\n\n// 사용 예시\nconst audioManager = new AudioManager();\n\n// 사운드 로드\nawait audioManager.loadSound('jump', './sounds/jump.mp3');\nawait audioManager.loadSound('coin', './sounds/coin.mp3');\n\n// 사운드 재생\naudioManager.playSound('jump', 0.8);\naudioManager.playSound('coin', 1.0);\n\n// 배경음악\nawait audioManager.playMusic('./music/background.mp3', true);\naudioManager.setMusicVolume(0.3);// phaser-audio.js\nclass GameScene extends Phaser.Scene {\n preload() {\n // 오디오 로드\n this.load.audio('background', 'assets/music/background.mp3');\n this.load.audio('jump', 'assets/sounds/jump.wav');\n this.load.audio('coin', 'assets/sounds/coin.wav');\n }\n \n create() {\n // 배경음악\n this.backgroundMusic = this.sound.add('background', {\n loop: true,\n volume: 0.5\n });\n this.backgroundMusic.play();\n \n // 사운드 효과\n this.jumpSound = this.sound.add('jump', { volume: 0.8 });\n this.coinSound = this.sound.add('coin', { volume: 1.0 });\n }\n \n collectCoin() {\n this.coinSound.play();\n // 코인 수집 로직\n }\n \n playerJump() {\n this.jumpSound.play();\n // 점프 로직\n }\n}// multiplayer-client.js\nclass MultiplayerClient {\n constructor(gameUrl) {\n this.ws = new WebSocket(gameUrl);\n this.players = new Map();\n this.localPlayerId = null;\n \n this.setupEventHandlers();\n }\n \n setupEventHandlers() {\n this.ws.onopen = () => {\n console.log('Connected to game server');\n };\n \n this.ws.onmessage = (event) => {\n const message = JSON.parse(event.data);\n this.handleMessage(message);\n };\n \n this.ws.onerror = (error) => {\n console.error('WebSocket error:', error);\n };\n \n this.ws.onclose = () => {\n console.log('Disconnected from game server');\n };\n }\n \n handleMessage(message) {\n switch (message.type) {\n case 'playerJoined':\n this.onPlayerJoined(message);\n break;\n case 'playerLeft':\n this.onPlayerLeft(message);\n break;\n case 'playerUpdate':\n this.onPlayerUpdate(message);\n break;\n case 'gameState':\n this.onGameState(message);\n break;\n }\n }\n \n sendPlayerUpdate(position, rotation) {\n this.ws.send(JSON.stringify({\n type: 'playerUpdate',\n position: position,\n rotation: rotation\n }));\n }\n \n onPlayerJoined(message) {\n this.localPlayerId = message.playerId;\n console.log('Joined game as player:', message.playerId);\n }\n \n onPlayerLeft(message) {\n this.players.delete(message.playerId);\n }\n \n onPlayerUpdate(message) {\n if (message.playerId !== this.localPlayerId) {\n const player = this.players.get(message.playerId);\n if (player) {\n player.position = message.position;\n player.rotation = message.rotation;\n }\n }\n }\n \n onGameState(message) {\n // 게임 상태 동기화\n message.players.forEach((playerData) => {\n if (playerData.id !== this.localPlayerId) {\n this.players.set(playerData.id, playerData);\n }\n });\n }\n}\n\n// 사용 예시\nconst multiplayer = new MultiplayerClient('ws://localhost:8080/game');\n\n// 게임 루프에서 플레이어 위치 전송\nfunction gameLoop() {\n if (multiplayer.localPlayerId) {\n multiplayer.sendPlayerUpdate(\n player.position,\n player.rotation\n );\n }\n requestAnimationFrame(gameLoop);\n}// socketio-client.js\nimport io from 'socket.io-client';\n\nclass SocketIOGameClient {\n constructor(serverUrl) {\n this.socket = io(serverUrl);\n this.players = new Map();\n this.setupEventHandlers();\n }\n \n setupEventHandlers() {\n this.socket.on('connect', () => {\n console.log('Connected:', this.socket.id);\n });\n \n this.socket.on('playerJoined', (playerData) => {\n this.players.set(playerData.id, playerData);\n });\n \n this.socket.on('playerLeft', (playerId) => {\n this.players.delete(playerId);\n });\n \n this.socket.on('playerMoved', (data) => {\n const player = this.players.get(data.id);\n if (player) {\n player.position = data.position;\n player.rotation = data.rotation;\n }\n });\n \n this.socket.on('gameState', (state) => {\n // 게임 상태 업데이트\n this.updateGameState(state);\n });\n }\n \n sendMovement(position, rotation) {\n this.socket.emit('playerMove', {\n position: position,\n rotation: rotation\n });\n }\n \n sendAction(actionType, data) {\n this.socket.emit('playerAction', {\n type: actionType,\n data: data\n });\n }\n}\n\n// 서버 측 (Node.js)\nconst io = require('socket.io')(server);\n\nio.on('connection', (socket) => {\n console.log('Player connected:', socket.id);\n \n socket.on('playerMove', (data) => {\n // 다른 플레이어에게 전송\n socket.broadcast.emit('playerMoved', {\n id: socket.id,\n position: data.position,\n rotation: data.rotation\n });\n });\n \n socket.on('disconnect', () => {\n console.log('Player disconnected:', socket.id);\n io.emit('playerLeft', socket.id);\n });\n});// object-pool.js\nclass ObjectPool {\n constructor(createFn, resetFn, initialSize = 10) {\n this.createFn = createFn;\n this.resetFn = resetFn;\n this.pool = [];\n this.active = [];\n \n // 초기 객체 생성\n for (let i = 0; i < initialSize; i++) {\n this.pool.push(this.createFn());\n }\n }\n \n acquire() {\n let obj;\n if (this.pool.length > 0) {\n obj = this.pool.pop();\n } else {\n obj = this.createFn();\n }\n this.active.push(obj);\n return obj;\n }\n \n release(obj) {\n const index = this.active.indexOf(obj);\n if (index > -1) {\n this.active.splice(index, 1);\n this.resetFn(obj);\n this.pool.push(obj);\n }\n }\n \n releaseAll() {\n this.active.forEach(obj => {\n this.resetFn(obj);\n this.pool.push(obj);\n });\n this.active = [];\n }\n}\n\n// 사용 예시 - 총알 풀\nconst bulletPool = new ObjectPool(\n () => ({ x: 0, y: 0, vx: 0, vy: 0, active: false }),\n (bullet) => {\n bullet.active = false;\n bullet.x = 0;\n bullet.y = 0;\n },\n 50\n);\n\nfunction shootBullet(x, y, angle, speed) {\n const bullet = bulletPool.acquire();\n bullet.x = x;\n bullet.y = y;\n bullet.vx = Math.cos(angle) * speed;\n bullet.vy = Math.sin(angle) * speed;\n bullet.active = true;\n return bullet;\n}\n\nfunction updateBullets() {\n activeBullets.forEach((bullet, index) => {\n bullet.x += bullet.vx;\n bullet.y += bullet.vy;\n \n // 화면 밖으로 나가면 반환\n if (bullet.x < 0 || bullet.x > canvas.width ||\n bullet.y < 0 || bullet.y > canvas.height) {\n bulletPool.release(bullet);\n activeBullets.splice(index, 1);\n }\n });\n}// spatial-grid.js\nclass SpatialGrid {\n constructor(width, height, cellSize) {\n this.width = width;\n this.height = height;\n this.cellSize = cellSize;\n this.cols = Math.ceil(width / cellSize);\n this.rows = Math.ceil(height / cellSize);\n this.grid = [];\n \n for (let i = 0; i < this.rows; i++) {\n this.grid[i] = [];\n for (let j = 0; j < this.cols; j++) {\n this.grid[i][j] = [];\n }\n }\n }\n \n getCell(x, y) {\n const col = Math.floor(x / this.cellSize);\n const row = Math.floor(y / this.cellSize);\n return {\n row: Math.max(0, Math.min(this.rows - 1, row)),\n col: Math.max(0, Math.min(this.cols - 1, col))\n };\n }\n \n insert(obj) {\n const cell = this.getCell(obj.x, obj.y);\n this.grid[cell.row][cell.col].push(obj);\n obj._cell = cell;\n }\n \n remove(obj) {\n if (obj._cell) {\n const cell = obj._cell;\n const index = this.grid[cell.row][cell.col].indexOf(obj);\n if (index > -1) {\n this.grid[cell.row][cell.col].splice(index, 1);\n }\n obj._cell = null;\n }\n }\n \n getNearby(x, y, radius) {\n const startCell = this.getCell(x - radius, y - radius);\n const endCell = this.getCell(x + radius, y + radius);\n const nearby = [];\n \n for (let row = startCell.row; row <= endCell.row; row++) {\n for (let col = startCell.col; col <= endCell.col; col++) {\n this.grid[row][col].forEach(obj => {\n const dx = obj.x - x;\n const dy = obj.y - y;\n const distance = Math.sqrt(dx * dx + dy * dy);\n if (distance <= radius) {\n nearby.push(obj);\n }\n });\n }\n }\n \n return nearby;\n }\n \n clear() {\n for (let i = 0; i < this.rows; i++) {\n for (let j = 0; j < this.cols; j++) {\n this.grid[i][j] = [];\n }\n }\n }\n}\n\n// 사용 예시\nconst spatialGrid = new SpatialGrid(800, 600, 100);\n\n// 객체 추가\nenemies.forEach(enemy => spatialGrid.insert(enemy));\n\n// 근처 적 찾기\nconst nearbyEnemies = spatialGrid.getNearby(player.x, player.y, 150);// frame-rate-manager.js\nclass FrameRateManager {\n constructor(targetFPS = 60) {\n this.targetFPS = targetFPS;\n this.frameTime = 1000 / targetFPS;\n this.lastTime = performance.now();\n this.deltaTime = 0;\n this.accumulator = 0;\n }\n \n update(callback) {\n const currentTime = performance.now();\n this.deltaTime = currentTime - this.lastTime;\n this.lastTime = currentTime;\n \n // 프레임 드롭 보정\n this.accumulator += this.deltaTime;\n \n while (this.accumulator >= this.frameTime) {\n callback(this.frameTime);\n this.accumulator -= this.frameTime;\n }\n }\n \n getFPS() {\n return 1000 / this.deltaTime;\n }\n}\n\n// 사용 예시\nconst frameManager = new FrameRateManager(60);\n\nfunction gameLoop() {\n frameManager.update((deltaTime) => {\n // 게임 로직 업데이트 (deltaTime 사용)\n updateGame(deltaTime);\n });\n \n // 렌더링은 항상 실행\n renderGame();\n \n requestAnimationFrame(gameLoop);\n}// state-machine.js\nclass StateMachine {\n constructor() {\n this.states = new Map();\n this.currentState = null;\n this.previousState = null;\n }\n \n addState(name, state) {\n this.states.set(name, state);\n }\n \n changeState(name) {\n if (this.currentState && this.currentState.onExit) {\n this.currentState.onExit();\n }\n \n this.previousState = this.currentState;\n this.currentState = this.states.get(name);\n \n if (this.currentState && this.currentState.onEnter) {\n this.currentState.onEnter();\n }\n }\n \n update(deltaTime) {\n if (this.currentState && this.currentState.update) {\n this.currentState.update(deltaTime);\n }\n }\n}\n\n// 사용 예시\nconst stateMachine = new StateMachine();\n\n// 메뉴 상태\nstateMachine.addState('menu', {\n onEnter: () => {\n showMenu();\n },\n update: (deltaTime) => {\n // 메뉴 업데이트\n },\n onExit: () => {\n hideMenu();\n }\n});\n\n// 게임 상태\nstateMachine.addState('playing', {\n onEnter: () => {\n startGame();\n },\n update: (deltaTime) => {\n updateGame(deltaTime);\n },\n onExit: () => {\n pauseGame();\n }\n});\n\n// 상태 전환\nstateMachine.changeState('menu');// save-system.js\nclass SaveSystem {\n constructor() {\n this.storageKey = 'gameSave';\n }\n \n save(data) {\n try {\n const json = JSON.stringify(data);\n localStorage.setItem(this.storageKey, json);\n return true;\n } catch (e) {\n console.error('Save failed:', e);\n return false;\n }\n }\n \n load() {\n try {\n const json = localStorage.getItem(this.storageKey);\n return json ? JSON.parse(json) : null;\n } catch (e) {\n console.error('Load failed:', e);\n return null;\n }\n }\n \n delete() {\n localStorage.removeItem(this.storageKey);\n }\n \n // IndexedDB 사용 (대용량 데이터)\n async saveToIndexedDB(data) {\n return new Promise((resolve, reject) => {\n const request = indexedDB.open('GameDB', 1);\n \n request.onerror = () => reject(request.error);\n request.onsuccess = () => {\n const db = request.result;\n const transaction = db.transaction(['saves'], 'readwrite');\n const store = transaction.objectStore('saves');\n const saveRequest = store.put(data, 'gameSave');\n \n saveRequest.onsuccess = () => resolve();\n saveRequest.onerror = () => reject(saveRequest.error);\n };\n \n request.onupgradeneeded = (event) => {\n const db = event.target.result;\n if (!db.objectStoreNames.contains('saves')) {\n db.createObjectStore('saves');\n }\n };\n });\n }\n}\n\n// 사용 예시\nconst saveSystem = new SaveSystem();\n\nconst gameData = {\n level: 5,\n score: 10000,\n inventory: ['sword', 'shield', 'potion'],\n playerStats: {\n health: 100,\n mana: 50\n }\n};\n\nsaveSystem.save(gameData);\nconst loadedData = saveSystem.load();// webpack.config.js\nconst path = require('path');\n\nmodule.exports = {\n entry: './src/main.js',\n output: {\n filename: 'bundle.js',\n path: path.resolve(__dirname, 'dist'),\n },\n module: {\n rules: [\n {\n test: /\\.js$/,\n exclude: /node_modules/,\n use: {\n loader: 'babel-loader',\n options: {\n presets: ['@babel/preset-env']\n }\n }\n },\n {\n test: /\\.(png|jpg|gif|svg)$/,\n type: 'asset/resource'\n }\n ]\n },\n optimization: {\n minimize: true\n },\n devServer: {\n static: './dist',\n port: 8080\n }\n};// vite.config.js\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n build: {\n rollupOptions: {\n output: {\n manualChunks: {\n 'phaser': ['phaser'],\n 'three': ['three']\n }\n }\n },\n chunkSizeWarningLimit: 1000\n },\n server: {\n port: 3000\n }\n});// asset-loader.js\nclass AssetLoader {\n constructor() {\n this.assets = new Map();\n this.loadedCount = 0;\n this.totalCount = 0;\n }\n \n async loadImage(name, url) {\n return new Promise((resolve, reject) => {\n const img = new Image();\n img.onload = () => {\n this.assets.set(name, img);\n this.onAssetLoaded();\n resolve(img);\n };\n img.onerror = reject;\n img.src = url;\n });\n }\n \n async loadImages(images) {\n this.totalCount = images.length;\n const promises = images.map(({ name, url }) => \n this.loadImage(name, url)\n );\n return Promise.all(promises);\n }\n \n onAssetLoaded() {\n this.loadedCount++;\n const progress = this.loadedCount / this.totalCount;\n this.onProgress?.(progress);\n }\n \n getAsset(name) {\n return this.assets.get(name);\n }\n}\n\n// 사용 예시\nconst loader = new AssetLoader();\nloader.onProgress = (progress) => {\n console.log(`Loading: ${Math.round(progress * 100)}%`);\n};\n\nawait loader.loadImages([\n { name: 'player', url: './assets/player.png' },\n { name: 'enemy', url: './assets/enemy.png' },\n { name: 'background', url: './assets/background.jpg' }\n]);// service-worker.js\nconst CACHE_NAME = 'game-cache-v1';\nconst urlsToCache = [\n '/',\n '/index.html',\n '/bundle.js',\n '/assets/player.png',\n '/assets/background.jpg'\n];\n\nself.addEventListener('install', (event) => {\n event.waitUntil(\n caches.open(CACHE_NAME)\n .then((cache) => cache.addAll(urlsToCache))\n );\n});\n\nself.addEventListener('fetch', (event) => {\n event.respondWith(\n caches.match(event.request)\n .then((response) => response || fetch(event.request))\n );\n});<!-- manifest.json -->\n{\n \"name\": \"My Game\",\n \"short_name\": \"Game\",\n \"start_url\": \"/\",\n \"display\": \"standalone\",\n \"background_color\": \"#000\",\n \"theme_color\": \"#000\",\n \"icons\": [\n {\n \"src\": \"/icon-192.png\",\n \"sizes\": \"192x192\",\n \"type\": \"image/png\"\n },\n {\n \"src\": \"/icon-512.png\",\n \"sizes\": \"512x512\",\n \"type\": \"image/png\"\n }\n ]\n}// platformer-game.js\nimport Phaser from 'phaser';\n\nclass PlatformerScene extends Phaser.Scene {\n constructor() {\n super({ key: 'PlatformerScene' });\n }\n \n preload() {\n this.load.image('sky', 'assets/sky.png');\n this.load.image('ground', 'assets/platform.png');\n this.load.spritesheet('player', 'assets/player.png', {\n frameWidth: 32,\n frameHeight: 48\n });\n this.load.image('coin', 'assets/coin.png');\n }\n \n create() {\n // 배경\n this.add.image(400, 300, 'sky');\n \n // 플랫폼\n this.platforms = this.physics.add.staticGroup();\n this.platforms.create(400, 568, 'ground').setScale(2).refreshBody();\n this.platforms.create(600, 400, 'ground');\n this.platforms.create(50, 250, 'ground');\n this.platforms.create(750, 220, 'ground');\n \n // 플레이어\n this.player = this.physics.add.sprite(100, 450, 'player');\n this.player.setBounce(0.2);\n this.player.setCollideWorldBounds(true);\n \n // 애니메이션\n this.anims.create({\n key: 'left',\n frames: this.anims.generateFrameNumbers('player', { start: 0, end: 3 }),\n frameRate: 10,\n repeat: -1\n });\n \n this.anims.create({\n key: 'turn',\n frames: [{ key: 'player', frame: 4 }],\n frameRate: 20\n });\n \n this.anims.create({\n key: 'right',\n frames: this.anims.generateFrameNumbers('player', { start: 5, end: 8 }),\n frameRate: 10,\n repeat: -1\n });\n \n // 충돌\n this.physics.add.collider(this.player, this.platforms);\n \n // 입력\n this.cursors = this.input.keyboard.createCursorKeys();\n \n // 코인\n this.coins = this.physics.add.group({\n key: 'coin',\n repeat: 11,\n setXY: { x: 12, y: 0, stepX: 70 }\n });\n \n this.coins.children.entries.forEach((child) => {\n child.setBounceY(Phaser.Math.FloatBetween(0.4, 0.8));\n });\n \n this.physics.add.collider(this.coins, this.platforms);\n this.physics.add.overlap(this.player, this.coins, this.collectCoin, null, this);\n \n // 점수\n this.score = 0;\n this.scoreText = this.add.text(16, 16, 'Score: 0', {\n fontSize: '32px',\n fill: '#000'\n });\n }\n \n update() {\n if (this.cursors.left.isDown) {\n this.player.setVelocityX(-160);\n this.player.anims.play('left', true);\n } else if (this.cursors.right.isDown) {\n this.player.setVelocityX(160);\n this.player.anims.play('right', true);\n } else {\n this.player.setVelocityX(0);\n this.player.anims.play('turn');\n }\n \n if (this.cursors.up.isDown && this.player.body.touching.down) {\n this.player.setVelocityY(-330);\n }\n }\n \n collectCoin(player, coin) {\n coin.disableBody(true, true);\n this.score += 10;\n this.scoreText.setText('Score: ' + this.score);\n \n if (this.coins.countActive(true) === 0) {\n this.coins.children.entries.forEach((child) => {\n child.enableBody(true, child.x, 0, true, true);\n });\n }\n }\n}\n\nconst config = {\n type: Phaser.AUTO,\n width: 800,\n height: 600,\n physics: {\n default: 'arcade',\n arcade: {\n gravity: { y: 300 },\n debug: false\n }\n },\n scene: PlatformerScene\n};\n\nconst game = new Phaser.Game(config);웹 게임 개발은 다양한 기술 스택을 활용하여 강력한 게임을 만들 수 있다. 이 글에서 다룬 내용:
\n이러한 기술들을 조합하면 브라우저에서 실행되는 고품질 게임을 개발할 수 있다.
\n