html5游戲開發--"動靜"結合(一)-動態畫面的實現

一、前言

很久沒寫文章了。。。也不知大家還記不記得以前給大家的承諾——寫幾篇有關html5開發游戲的文章。今天總算有時間了，不過我還得抓緊時間，因為種種原因，明天我還得投入緊張的工作之中。

言歸正傳，現在讓我們來說說html5開發游戲。有的朋友認為html5開發游戲不就是用javascript開發嗎？游戲中的圖片可以用<img>貼上去嗎？何必還用什么html5嘛。(或許大家都不是這樣認為的，但我初學html5時就是這樣想的。因此才出現了前面我寫的有關javascript開發《三國志曹操傳》的系列文章)但并不是這樣的，html5開發游戲主要用的是<canvas>標簽，<canvas>里的圖片是不可以拖動復制的，而<img>是可以的。因此這就體現了html5開發游戲的關鍵。不過在<canvas>里貼圖可不是用一個src屬性可以解決的，它要用javascript貼上圖片。。。畢竟開發游戲可不是那么簡單的工程嘛。。。(廢話又多說了兩句，不過以前曾有為朋友對我說，正是有了這些廢話，才使文章"生動"起來的)

接下來我要向大家揭示html5開發游戲的內幕。

二、"動"的體現

html5究竟是怎樣使靜態的圖片變為動態的呢？請看以下分析。

首先我們準備幾張圖片:  

01.png	02.png	03.png

還是老圖片，不過不是老代碼：

main.js里的代碼：

以上是鄙人寫的javascript代碼，但是眾所周知，既然是叫html5而不是javascript5，說明html代碼也至關重要。

接下來是html5代碼：

解釋一下：

<canvas>是html5新加標簽，估計就是專門為開發游戲設計的。首先我們得對這個新加進來的標簽添加id屬性，這樣就方便大家在javascript里操作了。具體一些信息可以看看w3cschool：http://www.w3school.com.cn/html5/html_5_canvas.asp

html代碼就解釋到此，接下來講講javascript里的代碼：

這段寫得較明了，同樣是把幾張圖片放進數組，這樣方便以后循環播放圖片。

這段代碼是建立一個貼圖片的區域，并且給src賦值為pic，也就是剛才定義的變量，也就是./01.png

這一段代碼是該程序的主要部分。貼圖，切換圖片，處理圖片都在這里。首先我取出canvas的id，然后繪圖，圖的src在一個用if()...else的死循環中反復切換，每切換一次就用setInterval()重復調用main()函數，由于src切換，因此重復調用main()時，又會重新繪圖，導致圖片無限的循環切換。

這段代碼是什么意思呢？首先為了不讓畫出的圖不出現重疊——drawImage()函數畫出的圖是不會因下次要畫圖象而把上次畫的清空的。所以如果不主動清空畫布，那就會出現這次畫的疊在上次畫的上面，因此我首先用clearRect()函數把畫布清空，這樣的話就不會有重疊了。(cleatRect語法如下：cleatRect(移至的x坐標,移至的y坐標, 清空部分的寬度, 清空部分的高度);)

drawImage想必大家都知道，具體語法如下：drawImage(要畫出對象的名稱, 移至的x坐標, 移至的y坐標);

代碼下載地址就不給了，直接復制代碼吧。。。（各位讀者且勿介意呀。。。）

demo演示位置：

http://www.cnblogs.com/yorhom/archive/2013/04/04/3000278.html

----------------------------------------------------------------

歡迎大家轉載我的文章。

轉載請注明：轉自Yorhom's Game Box

歡迎繼續關注我的博客