언어/js 19

nodejs 서버와 mongojs

저번에 말한 nodeJS로 간단한 Chat Server를 만들었다. 추가적으로 mongojs를 사용하여 Chat Log를 저장하고 최초 접속시 최근 대화기록을 보여주는 기능을 넣었다. 아래는 server.js 이다. > nodejs와 mongodb 설치는 생략한다. var io = require('socket.io').listen(443); var db = require('mongojs').connect('member', ['info']); insert = function(data){ db.info.save( data,function(error,result){ if(!error) ;//console.log("insert succeed!"); }); } find = function(callback){ //..

언어/js 2015.01.29

html Canvas 게임 강좌 - 4

이번에는 GameFramework.js를 살펴본다. GameFramework는 게임 Loop를 관리한다. 우선 mouse eventhandler를 등록한다.> touch 기반 모바일은 무관하다. 그 다음 game scene을 등록할 변수와 다음 scene을 등록할 변수를 생성한다. ChangeGameState> 게임의 scene이 변경되거나 Update>게임의 논리적인 부분Render>이미지를 그리는 부분 gameLoop> 위 Update와 Render를 반복해서 호출하는 역할이다.추가적으로 frame을 측정한다. 마지막은 setTimeout으로 자기자신을 호출하는 것으로 끝이다.> 이 방식은 동적 fps방식으로 일정 주기로 Loop를 호출하는 것이 아닌 현재 디바이스의 최대 fps를 허용한다.다만, 이..

언어/js 2015.01.16

html Canvas 게임 강좌 -2

2. 동작 원리 설명 우선 game frame work 사용될 js를 살펴본다. 1. FrameCounter2. FrameSkipper3. GameFrameWork4. GameObject5. GameSprite6. gfw7. InputSystem8. ResourceDB9. ResourcePreLoader10. Timer11. Util 이번에는 html 에서 동작하는 게임의 순서도를 설명하겠다. 1. Canvas 객체가 생성된다.2. 게임에 사용될 이미지, 사운드 객체를 서버로부터 가져온다(local이라면 자신의 pj folder)3. 모든 리소스가 로드되면 canvas를 초기화한다.------------loopCanvas에 하얀색 Rect를 그린다.time을 tic(count++)한다.fps을 체크하고 ..

언어/js 2015.01.13

html Canvas 게임 강좌 -1

1. Intro 필자는 과제로 html에서 제공하는 2d Graphic API인 canvas를 사용하여 webGame을 제작한 경험을 바탕으로 강좌를 진행하려 한다. 이 강좌는 JS 문법을 알어야 이해하기 쉽다(JS 문법을 설명할 생각은 없다) canvas 사용법 부터 꼭 필요한 animation과 필요한 gameFrameWork의 기능을 모두 설명할 것이며 마지막으로는 필자가 만든 북극탐험 게임을 만들 것이다. 우선 그 첫번째로 html Canvas에 대해 설명하려 한다. 기존의 웹 브라우저는 game을 표현하기에 미흡하였다. 우선 동적 이미지 처리에 관해서는 고려하지 않았기에 그래픽 처리에 있어 리소스가 항상 부족하였다(이점은 아직도 모바일 웹환경에서 크게 다르지 않다)> 최근 지원을 시작한 open..

언어/js 2015.01.10

JavaScript - prototype

간단한 JS 문법을 소개하려고 한다.JS(JavaScript)는 프로그래밍 언어이다.타 언어(C, Java)와는 다른 Script기반 언어이며웹(Web)에서 쓰이고 정적인 웹페이지에 동적인 기능을 담당하는 역할로 쓰인다. js문법은 Reference도 잘 되어있고 관련 블로그 게시글도 있으니 자주 쓰이는 문법을 소개하겠다. //일반적인 객체 == 함수 생성 function object(_age)//파라미터 { this.name = "first" // 기본 변수를 생성 this.age = _age; } //소개하고자 하는 prototype object.prototype.hello = function( )// 메소드 역활 { console.log("name : " + this.name + " / age : ..

언어/js 2015.01.10