html5遊戲開發

一、前言

本次教程將向大家講解如何用html5將小地圖塊拼成大地圖，以及如何用現有的高階html5遊戲開發庫件lufylegend.js開發遊戲。

首先讓我們來了解了解如何用html5實現動畫，畢竟「動靜結合」是先有動再有靜。看了上一章的內容，或許你就有了對html5實現動畫有了初步了解：

二、html5實現用小地圖塊拼成大地圖

早在上一章以前我就向大家介紹過，許多遊戲的地圖是用小地圖塊拼成的。那麼既然那些遊戲能通過as或者其他程式語言實現，那我們的html5也絲毫不遜色於它們。接下來就是今天我要為大家準備的：

map.png

這張具體來自**我不太清楚，不過它是為我們來服務的，做好事不留名的，因此暫且將他的**放在一邊，我們只用知道它叫map.png就ok;

光有圖還不行，得來點**。

map.js裡的幾行**：

var i;

var j;

window.onload = function ()

var mapimg = new image();

var map = [

[2,2,3,3,0,0,2,2,2,3,3,3,2],

[2,0,3,3,0,0,0,0,0,0,0,0,0],

[2,0,0,0,0,0,0,0,0,0,0,0,2],

[2,0,0,0,0,0,0,0,0,0,3,0,2],

[1,3,0,0,0,0,0,0,0,0,2,0,2],

[1,3,0,0,0,0,2,2,3,3,2,0,2],

[2,1,1,1,0,0,0,0,0,0,0,0,3],

[0,0,0,1,0,0,1,1,2,2,3,0,0],

[2,0,0,1,0,0,0,0,0,0,0,0,0],

[3,0,0,1,1,1,0,0,1,1,1,0,1],

[3,0,0,0,0,0,0,0,0,0,0,0,1],

[2,2,2,2,2,3,3,3,0,0,1,1,1],

];//建立構成地圖的二維陣列

function gamemap()

} //迴圈呼叫繪製地圖的函式，直到畫完為止}}

function drawtile(x, y, type)

//畫地圖的函式

html裡很少的幾行**：

html5 map

現在的形式相當於我說了一句莫名其妙的英語，而我接下來就要自說自譯。首先html裡的**等於我說了一句連農村人都懂的「hello」，因此不解釋。當然不排除有些朋友是無意間中計被迫到這裡來看的，如果這類朋友對此感興趣但有看不懂的話，在下也不妨給你們提供一些服務：

1.上面有詳細的程式設計介紹

2.foreign friends： the above detailed introduction of the programming

p.s.在下並非是來打廣告的，純屬真心想幫助大家。

進入正題，話雖扯到一邊，但我想一些苦苦求學的同學依然在留戀那些**。那麼不消耗大家的興趣，接下來就要讓我來用我那"九"寸不爛之舌向大家傾述這些**的意義。

frist,我定義了兩個用來確定地圖塊在地圖陣列所對應的變數j和i，這句話說得很模糊，大家看到最後便會懂得。如下：

var i;

var j;then,我用window.onload對畫地圖函式進行呼叫。這裡不多說，因為最主要不是這個。如下：

window.onload = function ()next,就是我們建立的用來裝的mapimg和地圖陣列了。地圖陣列中，0,1,2,3分別代表不同的樣式，但其實，用到的就只有一張圖，這張圖就是我們做好事不留名的map.png，在後面的講解中，大家會明白這是如何辦的。如下**：

var mapimg = new image();

var map = [

[2,2,3,3,0,0,2,2,2,3,3,3,2],

[2,0,3,3,0,0,0,0,0,0,0,0,0],

[2,0,0,0,0,0,0,0,0,0,0,0,2],

[2,0,0,0,0,0,0,0,0,0,3,0,2],

[1,3,0,0,0,0,0,0,0,0,2,0,2],

[1,3,0,0,0,0,2,2,3,3,2,0,2],

[2,1,1,1,0,0,0,0,0,0,0,0,3],

[0,0,0,1,0,0,1,1,2,2,3,0,0],

[2,0,0,1,0,0,0,0,0,0,0,0,0],

[3,0,0,1,1,1,0,0,1,1,1,0,1],

[3,0,0,0,0,0,0,0,0,0,0,0,1],

[2,2,2,2,2,3,3,3,0,0,1,1,1],

];//建立構成地圖的二維陣列

現在貌似已經準備齊全，但缺少核心部分，因此我用了gamemap()的方法配合drawtile()方法一起用。那麼再現一下核心內容：function gamemap()

} //迴圈呼叫繪製地圖的函式，直到畫完為止}}

function drawtile(x, y, type)

//畫地圖的函式

首先在gamemap()中在下取出裡的的id，然後用mapimg.src="";定義了要顯示的，具體用canvas顯示可以去w3cschool上看看，或者去我上一篇看看，這裡不多說了。然後進行繪畫。首先我畫了乙個矩形，看注釋就知道。然後進入我最愛的迴圈for。因為要畫13*13的地圖，所以要迴圈十三次，然後在迴圈裡再進行迴圈，使i和j遍歷陣列map，當i的值為0時，j對應的值如下：

迴圈次數 i的值 j的值

1 0 0

2 0 1

3 0 2

4 0 4

5 0 5

6 0 6

7 0 7

8 0 8

9 0 9

10 0 10

11 0 11

12 0 12

13 0 13

由此可見，當i為0時，也就是說遍歷二維陣列map第一行，然後進入j的迴圈，從而把第一行遍歷所有資料都讀完。當i為2使，就是說遍歷二維陣列map第二行，然後又進入j的迴圈，從而把第二行遍歷所有資料都讀完。由此類推，整個二維陣列map就被讀完了。然後每當j變一次，就呼叫drawtile()並給他的引數賦值，再在drawtile()中進行繪製，從而達到畫出地圖的效果。

那麼在drawtile中，我們做了什麼處理呢？首先我們同樣是取出id，這樣可以方便繪製，然後用html5中drawimage()的方法，進行繪製。那麼drawimage()怎麼用呢？

看看w3cschool上的介紹吧，底下是幾張截圖

語法drawimage(image, x, y)

drawimage(image, x, y, width, height)

drawimage(image, sourcex, sourcey, sourcewidth, sourceheight,

destx, desty, destwidth, destheight)

引數描述

image

所要繪製的影象。

這必須是表示

標記或者螢幕外影象的 image 物件，或者是 canvas 元素。

x, y要繪製的影象的左上角的位置。

width, height影象所應該繪製的尺寸。指定這些引數使得影象可以縮放。

sourcex, sourcey影象將要被繪製的區域的左上角。這些整數引數用影象畫素來度量。

sourcewidth, sourceheight影象所要繪製區域的大小，用影象畫素表示。

destx, desty所要繪製的影象區域的左上角的畫布座標。

destwidth, destheight影象區域所要繪製的畫布大小。

看了介紹，相信大家對它有了了解，那麼我就不解釋了。當drawtile()的引數被賦值完成時，就會按照要求畫出地圖。由於沒個地圖塊大小為32，所以大家可以看到很多32，哈哈。恐怕大家早就看得不賴煩了，因為這些對於大夥很簡單，我還沒講，我相信大家早就明白了。至於****，這次暫時沒有，我最近越來越懶了。。。**不多，大家就小心翼翼的複製貼上吧。。。

html5遊戲開發

Html5 移動遊戲開發

《HTML5完美遊戲開發》導讀

html5遊戲初試

html5遊戲開發

Html5 移動遊戲開發

《HTML5完美遊戲開發》 導讀

html5遊戲 初試

相關推薦

《HTML5完美遊戲開發》導讀

html5遊戲初試