【HTML5 Canvas遊戲開發】筆記(一) 概述和基礎講解

時間 2019-11-13

標籤 html5 html canvas 遊戲開發筆記概述基礎講解欄目 HTML5 简体版

原文原文鏈接

本系列文章由Shin-Knight編寫，轉載需註明出處。javascript

做者：Shin-Knighthtml

郵箱：shinknight@163.comhtml5

　文章連接：http://www.cnblogs.com/knightls/p/3280619.htmljava

一，概述

提及個人編程之路，一直以來都對遊戲開發十分感興趣，雖然不是專門搞這個的，可是無時無刻都關注着它。剛接觸到了html5的時候，網上處處都是關於它的說法，說它能替代flash，作跨平臺遊戲什麼的。我當時出於興趣，就開始學習它，畢竟看到了能它作遊戲，我還能善罷甘休嗎。chrome

當初我學習的時候，就覺得html5遊戲開發就是指純粹的html標籤結合js，dom進行遊戲開發。到了後面。我才明白，原來是指操控Canvas進行開發。不過，不管是純粹的html標籤結合js，dom開發，仍是操控Canvas進行開發，只要思路和設計思想是對的，都是同樣的。不過在本系列文章中，咱們仍是講講利用canvas進行開發吧，由於這個更有研究的價值。編程

二，遊戲的構成

通常對於一款遊戲來講，主要有這幾個成分構成：顯示層，圖片，動畫，文字，繪圖。canvas

1.顯示層瀏覽器

顧名思義，就是用來顯示圖片文字動畫的一個層。在一款有人物，背景的遊戲中，咱們的人物應該是在背景上方的，要實現這個效果必需要用到層這個概念。實現這個效果的時候，咱們能夠先在canvas上畫一張背景，而後再畫人物就能搞定。也就是說，層次化效果是由繪畫前後順序實現的。具體的實現方法會在接下來的幾篇文章中講到。框架

2.圖片dom

圖片是遊戲中必不可少的元素。它決定着遊戲的美觀性。若是圖片畫得很醜，相信不管遊戲再有創意，也不會吸引太多玩家去玩。在html5 canvas中，貼圖很簡單，在接下來的幾篇文章中都會講到。

3.動畫

動畫的存在能增添遊戲的趣味性，讓界面達到更絢麗的效果。動畫在遊戲中也很常見，如RPG，SLG，橫板格鬥中都是比不可少的元素。

4.文字

文字是最基本的元素，在遊戲中一般用來描述狀況，顯示分數，爲遊戲做說明等。是很是常見的，也是最平凡不過的了。

5.繪圖

這裏的繪圖是指在界面上畫線，畫圓什麼的。在html5 canvas中有專門的API負責繪圖。在之後的講解中會提到。

三，遊戲引擎

製做一款中大型遊戲，遊戲引擎是不可少的。遊戲引擎通常是把反覆的代碼進行封裝，讓遊戲實現起來更簡單。如今使用起來比較方便的html5遊戲引擎有：Cocos2D-html5，lufylegend等，之後隨着html5的壯大，或許還有其餘更方便的引擎出現。不過總的來講，html5作遊戲實在不是很方便，可是若是用到了引擎，那就方便多了。

四，建立項目&運行程序

編寫html5沒有特定的工具，用記事本就能開發。不過爲了方便開發，咱們通常要選擇一些編輯器。常見的幾款以下：

1.dreamweaver

Dreamweaver是個本來由Macromedia公司所開發的著名網站開發工具。它使用所見即所得的接口，亦有HTML編輯的功能。它如今有Mac和Windows系統的版本。隨Macromedia被Adobe收購後，Adobe也開始計劃開發Linux版本的Dreamweaver了。 Dreamweaver自MX版本開始，使用了Opera的排版引擎"Presto" 做爲網頁預覽。

2.eclipse

Eclipse 是一個開放源代碼的、基於Java的可擴展開發平臺。就其自己而言，它只是一個框架和一組服務，用於經過插件組件構建開發環境。幸運的是，Eclipse 附帶了一個標準的插件集，包括Java開發工具（Java Development Kit，JDK）。儘管 Eclipse 是使用Java語言開發的，但它的用途並不限於 Java 語言；例如，支持諸如C/C++、COBOL、PHP等編程語言的插件已經可用，或預計將會推出。Eclipse 框架還可用來做爲與軟件開發無關的其餘應用程序類型的基礎，好比內容管理系統。

3.notepad++

Notepad++是一套很是有特點的自由軟件的純文字編輯器(許可證:GPL)，有完整的中文化接口及支援多國語言撰寫的功能(UTF8 技術)。它的功能比 Windows 中的 Notepad(記事簿)強大，除了能夠用來製做通常的純文字說明文件，也十分適合看成撰寫電腦程序的編輯器。Notepad++ 不只有語法高亮度顯示，也有語法摺疊功能，而且支援宏以及擴充基本功能的外掛模組。

選擇一款適合本身的開發工具就能夠開始編寫了。不過，要運行html5須要支持html5的瀏覽器，好比chrome，firefox，safari，opera，IE9等。

注意：IE只有在IE9以上的版本才能運行html5。

要檢查你的瀏覽器是否支持html5，運行如下代碼就能知曉：

 1 <!DOCTYPE HTML>
 2 <html>
 3 <body>
 4 
 5 <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
 6 Your browser does not support the canvas element.
 7 </canvas>
 8 
 9 <script type="text/javascript">
10 
11 var c=document.getElementById("myCanvas");
12 var cxt=c.getContext("2d");
13 cxt.moveTo(10,10);
14 cxt.lineTo(150,50);
15 cxt.lineTo(10,50);
16 cxt.stroke();
17 
18 </script>
19 
20 </body>
21 </html>