JavaScript 게임 활용

A* 길 찾기 알고리즘

A* 길 찾기 알고리즘은 유니티로 2D 게임을 만들 때도 자주 사용되는 알고리즘이고 포폴에서도 사용했었다. 구글링해서 C# 코드는 금방 찾을 수 있지만 JavaScript 코드는 찾기가 어려웠다. 그래서 단순히 코드 복붙해서 날먹하려는 시도보다는 A* 알고리즘의 원리에 집중해서 새롭게 코드를 작성했다.  1. 우선순위 큐 (Priority Queue) A* 길찾기 알고리즘에서는 탐색할 다음 노드를 선택할 때, 현재 노드와 연결돼 있는 다음 노드들 중에 비용이 가장 적은 노드를 뽑는 과정을 반복해야한다. 이때마다 노드들을 새로 정렬하거나 가장 적은 노드를 찾는 행위를 다시 한다면 길 찾기 알고리즘의 퍼포먼스가 떨어질 수 있다. 물론 전체 노드의 개수(Grid)가 적다면 큰 차이는 없겠지만. 그래서 대부분 ..

CreateJS

https://createjs.com/  CreateJS A suite of modular libraries and tools which work together or independently to enable rich interactive content on open web technologies via HTML5.  HTML5의 Canvas 기술을 기반으로 하여 웹 브라우저에서 풍부한 상호작용(이미지와 애니메이션 등) 콘텐츠를 표현하기 위한 자바스크립트 라이브러리 모음이며, 네 가지의 라이브러리로 구성되어있다. ES5 버전으로 구현됨. (1) EaselJSHTML5 Canvas에 Graphic 객체 생성을 위한 라이브러리 (2) TweenJS객체의 상태 등을 보간하는 기능을 제공하는 라이브러리 (3)..

숫자 세 자리마다 콤마 찍기

let value = 12523401.515;let str = value.toLocaleString(); // '12,523,401.515'Number 타입의 내장 함수인 toLocaleString 함수를 통해 세 자리마다 콤마를 찍는 표기방식을 적용한 string 값을 얻을 수 있다.   let value = 12523401.515.toFixed(2); // '12523401.52'let str = value.toLocaleString(); // '12523401.52'문제는 toFixed 함수(소수점 표시 제한)를 거친 뒤 toLocaleString 함수를 실행하면 세 자리마다 콤마를 찍지 않는다. 왜냐하면 toFixed로 인해 value의 타입이 string으로 바뀌었고,..

아주 심플한 가중치 랜덤 뽑기

어떤 상자를 열면 A, B, C, D, E 다섯 개의 아이템 중 하나가 나온다. 그리고 이 다섯 개의 아이템이 나올 확률이 각각 다르다면 대부분은 이것을 테이블화시킬 것이다. 하지만 이런식으로 테이블을 만들면 문제가 생긴다. 한 아이템의 확률을 조정하거나, 아이템을 삭제하거나, 새 아이템을 추가하게 된다면 모든 아이템의 확률 총합이 100%가 되지 않게 되면서, 그때마다 나머지 아이템들의 확률도 같이 조정해야 한다.  그래서 가중치라는 게 필요하다.   각 아이템의 가중치를 그 아이템의 부피라고 생각할 수 있다. 그림처럼 일렬로 붙인 다음에 Random pivot 포인터가 왼쪽 끝에서부터 오른쪽 끝까지 왔다 갔다 한다고 가정해보자. 어느 순간에 포인터를 스탑 시키고, 포인터가 어디 위에서 멈췄는지 확인하..