HTML5 Canvas (V)
Slippy Snake Game — The Snake ❤
Before We Started
In the previous tutorial, we talked about how to create the background grid system of the Snake game. In this section, we are going to talk about how to create our main character, which is the Snake. You can try it yourself if you want to. This article will show you creating a snake object with several properties which can also record the head and body part of the snake.
在上一篇教學篇章裡，我們提到如何創建貪食蛇的背景座標方格系統。在這一個篇章裡，我們將要創造主要的主角，就是那隻蛇。你可以試試看創建出那一條蛇。這一篇文章也會告訴你創建一個蛇物件，而它會有許多的特性，包含記錄蛇的頭部以及身體部分。
There are many kinds of method (or algorithm) that can also create the Snake game. However, in this tutorial, it provide a notion to draw and make the game. You can search on the internet if you are interested in the algorithm of the game.
有各種不同的方法（或演算法）可以創造出貪食蛇遊戲。然而，在本篇教學文裡，只提供了其中一種想法來開發這個遊戲。如果你有興趣的話，你可以上網查詢更多有關於遊戲的各種演算法。
Additionally, in this chapter, it mainly focus on drawing the snake. The tutorial haven’t going to make the snake animated yet. Don’t worry, in the next tutorial, we will introduce two useful JS libraries to help us setup JavaScript Events in order to integrate the animation with the direction control of the snake. For now, let’s draw our snake first!
此外，在這一個篇章裡，主要的步驟是畫出那一條蛇。我們還沒有準備要讓它動。不過不要擔心，下一個教學篇章，為了使蛇的動畫結合方向操控，將要介紹兩個很有用的 JS 函式庫來幫助我們設定 JavaScript 事件。現在先從畫出那一條蛇開始吧！
Drawing the Snake
The Snake Object
Recall to the previous tutorial, we created a global variable (and simulated as an object) called $grid which represents the grid system. We will do the same thing as well, creating a $snake global variable which represents the snake.
還記得上一篇教學文裡，我們創建了一個全域變數（並模擬成一種物件）叫做 $grid 並且其代表為座標系統物件。我們也照樣做相同的事情，定義一個全域變數叫做 $snake 代表那隻蛇。
We first need to know how to draw the snake. Above the example code shows the three basic properties of the snake object. The head property represents the position of the snake head. The body property consists an array which records how the snake body will be attached. Last but not least, the direction property represents the crawl direction of the snake.
我們首先要知道如何畫出那一條蛇。上面的範例程式碼定義了蛇物件的兩個基本特性。head 即代表蛇頭的座標位置，而 body 則為一個陣列並決定蛇的身體是如何依序連接的。最後，direction 特性則定義了蛇的爬行方向。
Initialising Snake Object
With the technique which introduced in the previous tutorial, which is abstraction, we define a function called initializeSnake that initialise the snake object.
藉由上一篇文章提到的抽象化概念，我們可以定義出 initializeSnake 函式並初始化蛇物件。
In the main function part, we can initialise the snake after the grid system has initialised. By making good use of the ternary condition operator, we can setup the default value of the snake object. The example illustrated that the default direction is left and the default head position is at the centre of the canvas.
在主程序部分，我們在初始化座標系統後就可以初始化蛇物件。藉由三元運算子，可以設定好蛇物件初始化的默認值。範例程式碼示意了默認方向為向左 (left)，而蛇頭的默認座標為整個 Canvas 的中心點。
The array represents the default value of the body consists five 'r' characters specify there will have five snake parts sequentially attached in the right direction. You can look at the illustration below which shows how will the property in the snake object works when showing it on the canvas.
body 特性裡陣列的默認值包含五個 'r' 字母代表著會有五個蛇的身體依序連接在右側方向。你可以輔助下面的圖示來看出蛇的特性組合會如何在 Canvas 上做出呈現。
Drawing the Snake
We can use both the head and the body properties of the snake object, define the $snake.draw method that can draw the snake. In order to do it, we need a function that can draw filled square instead of the stroked square of the grid system. So, we modified some details of the drawSquare method in the grid system object.
我們可以使用蛇物件之 head 以及 body 特性，並定義 $snake.draw 方法來畫出蛇。為了要達成這個目的，我們需要一個輔助函式去畫出填滿的方格而非邊線的方格。所以我們改變了位於方格座標系統物件的 drawSquare 方法的一些細節。
Now, we can create the draw method of the snake object.
現在，我們可以創造出屬於蛇物件的 draw 方法了。
Open the HTML template, you should see our white filled snake has been created successfully!
打開 HTML 文檔，你就可以看到白色的蛇成功地被創造出來！
Varied Opacity of the Snake Body
In order to make it clear how the sequence of the snake body attached, we modified the draw method to make the snake body has varied opacity. You can see below the example code and the illustration shows the opacity is getting lower when the body parts is near the tail of the snake.
為了要清楚地呈現蛇的身體連結順序，我們改變了 draw 方法的細節讓蛇的身體有不同的透明程度（Opacity 本身譯作不透明度，但為了中文語句流暢，譯作透明程度）。你可以看到下圖以及範例程式碼，當越靠近蛇的尾巴，蛇的身體的不透明度會逐漸下降（意指透明程度提高）。
You can also test with arbitrary values of the snake object properties by passing the values in the initializeSnake function which placed in the main function. For instance, the result of the example code and its canvas production are all illustrated below.
你也可以測試看看傳入不同的值到位於主程序裡的 initializeSnake 函式讓蛇物件有不同的呈現方式。舉例來說，下面的範例程式碼與其相對應產生出來的 Canvas 結果示意如下。
Summery
In this tutorial, we’ve shown you a way to draw Snake with HTML Canvas. This step is similar to the previous tutorial. Defining the $snake object which has several properties, initialising the object and program its actions (or methods). You can view this Gist for current state of the code of the Snake game.
在這一篇教學文裡，讓你知道了如何藉由 HTML Canvas 畫出蛇。這一篇的步驟跟上一篇教學文有些雷同。定義出擁有幾個特性的 $snake 物件，初始化並且編程其動作（或方法）。你可以到這個 Gist 裡面查看目前的貪食蛇之程式碼狀態。
In the next article, we will animate the snake and setup the JS Events to enable the user to interact with the Snake. We may use several libraries to help us easily to perform simple task.
在下一個篇章裡，我們即將使蛇可以動作，並且設定好 JS 的事件可以讓使用者和蛇互動。這可能會需要幾個簡單的函式庫輔助我們達到目的。
Next Tutorial : HTML5 Canvas (VI) — Game Development
下一篇教學：HTML5 Canvas (VI) — 遊戲開發
Previous Tutorial : HTML5 Canvas (IV) — Game Development
上一篇教學：HTML5 Canvas (IV) — 遊戲開發
Recommended : Introduction to Three.JS
