基于JavaScript技術(shù)下的Web小游戲隨機(jī)地圖的實(shí)現(xiàn)

吳強(qiáng)

摘要：Web小游戲深受大眾所喜愛的小游戲，本文詳細(xì)的介紹在Web平臺(tái)下，使用JavaScript腳本語(yǔ)言實(shí)現(xiàn)Web小游戲中最為關(guān)鍵算法之—“隨機(jī)地圖”。

關(guān)鍵詞：Web小游戲；JavaScript；隨機(jī)地圖

隨著社會(huì)的發(fā)展，人們的生活的壓力越來(lái)越大，游戲成為了人們放松和解壓的一種方式，為了滿足人們的需要，游戲事業(yè)飛速發(fā)展，游戲開發(fā)的種類也越來(lái)越多，越來(lái)越新穎。網(wǎng)絡(luò)游戲深受大眾的喜愛。

JavaScrip是一款Web開發(fā)的腳本語(yǔ)言，常用來(lái)制作網(wǎng)頁(yè)的動(dòng)態(tài)功能，制作Web小游戲使用JavaScrip更加機(jī)動(dòng)靈活。

Web小游戲種類繁多，但是絕大多數(shù)游戲都離不開地圖，如貪吃蛇、連連看、推箱子、泡泡堂等等，每種游戲都有不同的地圖，地圖布局大至分為三類：第一類固定地圖，如推箱子，這類游戲地圖的每一關(guān)都是固定的；第二類是所有對(duì)像都是隨機(jī)的，如連連看游戲，游戲圖片要求成對(duì)出現(xiàn)，隨機(jī)布在二維地圖中；第三類為半隨機(jī)地圖，各關(guān)地圖都是固定的，但是每一關(guān)的果實(shí)、道具是隨機(jī)布在地圖之中的，如貪吃蛇、泡泡堂等。固定地圖的布局相對(duì)來(lái)說(shuō)比較簡(jiǎn)單，一般采用一個(gè)二維數(shù)組，數(shù)組中的數(shù)分別表示不同的對(duì)象，再跟據(jù)這個(gè)數(shù)組完成相應(yīng)布局。而隨機(jī)地圖布局的方法有很多種，現(xiàn)在我們就探討一下。

一、分析數(shù)據(jù)二維數(shù)組取數(shù)

現(xiàn)在以“連連看游戲”為例，游戲首先要考慮如何制作地圖，根據(jù)游戲規(guī)則，制作地圖要解決以下幾個(gè)問題：一是地圖有多大，有多少行，有多少列；二是每張圖片允許出現(xiàn)多少次；三是排列的圖片應(yīng)是隨機(jī)出現(xiàn)的，每次都不相同。

“連連看”是一個(gè)平面游戲，根據(jù)關(guān)數(shù)的不同圖片的數(shù)量上也可以有所不同，可以由5行8列的組成，也可以由7行12列的等等，跟據(jù)地圖的大小和難度的不同，同一張圖片可以出現(xiàn)8次也可以出現(xiàn)6次或4次列組成，圖片出現(xiàn)的次數(shù)越少，難度越大。現(xiàn)在我就以7行12列，每張圖片出現(xiàn)6次為例，7×12共有84張圖片，每張出現(xiàn)6次，一共有14張不同的圖片組成。

平面游戲地圖最為常見的是使用二維數(shù)組來(lái)完成，JavaScript中的數(shù)組和其他許多編程語(yǔ)言有所不同，JavaScript中數(shù)組的下標(biāo)變量可以是任意數(shù)據(jù)類型，根據(jù)游戲要求，JavaScript可以更加方便的制作游戲地圖。制作7×12的地圖每張圖片出現(xiàn)6張，因此定義一個(gè)7×12的二維數(shù)組，中間取數(shù)為1至14，每個(gè)數(shù)出現(xiàn)6次，程序如下：

二、隨機(jī)交換數(shù)組數(shù)據(jù)：

以上二維數(shù)組的數(shù)據(jù)是有規(guī)律的，那如何將這個(gè)有規(guī)律的數(shù)組數(shù)據(jù)隨機(jī)排列呢？可以對(duì)二維數(shù)組進(jìn)行遍歷，每個(gè)下標(biāo)變量都和二維數(shù)組中隨機(jī)的取一個(gè)下標(biāo)變量交換數(shù)據(jù)，當(dāng)循環(huán)完畢后，數(shù)組也成為了一個(gè)隨機(jī)的二維數(shù)組，數(shù)據(jù)是沒有規(guī)律出現(xiàn)的。程序代碼如下：

3、制作圖片類：

JavaScript是一個(gè)面向?qū)ο蟮木幊誊浖梢宰鲆粋€(gè)圖片對(duì)象類，可以記錄每張游戲圖片的基本信息及當(dāng)前狀態(tài)以便程序訪問。

4、根據(jù)數(shù)組數(shù)據(jù)布置地圖

首先用PhotoShop將做出14張一樣大小的圖片，如40×50像素存為jpg文件，并順序命名為pic0、pic1、pic2……pic14，將圖片存入站點(diǎn)中的圖片文件夾img中，利用JavaScript語(yǔ)言生成HTML代碼實(shí)現(xiàn)游戲地圖的布局，代碼如下：

隨機(jī)地圖布局的算法還有很多，使用不用的HTML標(biāo)簽布局JavaScript代碼也不相同，在制作游戲的過程中只有利用每一種軟件的優(yōu)勢(shì)，才能更好的制作出優(yōu)秀的Web小游戲。