官术网_书友最值得收藏!

Chapter 4. Building the Untangle Game with Canvas and the Drawing API

One new highlighted feature in HTML5 is the canvas element. We can treat it as a dynamic area where we can draw graphics and shapes with scripts.

Images in websites have been static for years. There are animated GIFs, but they cannot interact with visitors. Canvas is dynamic. We draw and modify the context in the Canvas, dynamically through the JavaScript drawing API. We can also add interaction to the Canvas and thus make games.

In the previous two chapters, we discussed DOM-based game development with CSS3 and a few HTML5 features. In the coming two chapters, we will focus on using new HTML5 features to create games. In this chapter, we will take a look at a core feature, Canvas, and some basic drawing techniques.

In this chapter, we will cover the following topics:

  • Introducing the HTML5 canvas element
  • Drawing a circle in Canvas
  • Drawing lines in the canvas element
  • Interacting with drawn objects in Canvas with mouse events
  • Detecting a line intersection
  • Supporting the drag-n-drop feature in touch devices

The Untangle puzzle game is a game where players are given circles with some lines connecting them. The lines may intersect the others and the players need to drag the circles so that no line intersects anymore.

The following screenshot previews the game that we are going to achieve through this chapter:

You can also try the game at the following URL:

http://makzan.net/html5-games/untangle-wip-dragging/

So let's start making our Canvas game from scratch.

主站蜘蛛池模板: 文成县| 皮山县| 珲春市| 合川市| 屯昌县| 樟树市| 佳木斯市| 宕昌县| 洛扎县| 农安县| 德州市| 延庆县| 得荣县| 郎溪县| 同仁县| 长治县| 周至县| 道孚县| 棋牌| 香格里拉县| 天门市| 白银市| 江源县| 巨野县| 江陵县| 资中县| 乌鲁木齐县| 武宁县| 随州市| 渑池县| 福安市| 永春县| 连城县| 漳平市| 临洮县| 郸城县| 金寨县| 壶关县| 天全县| 崇阳县| 云和县|