Game

Web Canvas 기반 도형 맞추기 Game 02

Canvas Game Event 구성 도형 구성과 배치를 위한 UI 가 구성되었으면, 이제 사용자가 선택후 Drag & Drop 으로 위치를 맞추고, 그 결과를 담아 내기 위한 Event 처리가 필요합니다. 요즘은 PC 가 아닌, 핸드폰에서도 Web 접근이 가능하기 때문에 Phone Device 를 위한 Event 처리를 위해서는 touchstart 등의 이벤트도 정리하여야 하지만, 이 글에서는 다루지 않겠습니다. 다음주소 에서 확인해 보실 수 있습니다. Initialize 시점에 Event 구성 초기화 과정에 Canvas 에 Mouse Event 를 할당 하는 과정 입니다.

Web Canvas 기반 도형 맞추기 Game 01

Canvas 만들고자 하는 Game 은? HTML5 가 도입되면서, 정확히는 canvas 가 기술 표준으로 정해지면서, Web 에서 구성할 수 있는 Application 같은 프로그램을 만들 가능성이 많이 높아진것 같습니다. 하지만, 표(Table 같은 Grid) 와 이미지 정렬, Text 정보 등을 기반으로 하는 업무 시스템에서는 Canvas 와 같은 기술은 그렇게 많이 활용되지는 못하고 있는것 같습니다. 그나마, Chart 등에서 SVG 에서 Canvas 로 점차 기술적인 전환이 이뤄지고 있지만, 아직도 많은 시스템에서는 활용하고 있지 않은것도 사실입니다.