- HTML5 Game Development by Example:Beginner's Guide(Second Edition)
- Makzan
- 257字
- 2021-07-16 14:10:02
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.
- 高手是如何做產品設計的(全2冊)
- JavaScript高效圖形編程
- Maven Build Customization
- DevOps for Networking
- Android Studio Essentials
- Unity Virtual Reality Projects
- Data Analysis with IBM SPSS Statistics
- Python神經網絡項目實戰
- Learn Programming in Python with Cody Jackson
- Learning Firefox OS Application Development
- 從Excel到Python:用Python輕松處理Excel數據(第2版)
- Active Directory with PowerShell
- Test-Driven Development with Django
- 匯編語言編程基礎:基于LoongArch
- Java EE Web應用開發基礎