基于客戶(hù)端javascript技術(shù)下推箱子游戲算法剖析

精品文檔-下載后可編輯基于客戶(hù)端javascript技術(shù)下推箱子游戲算法剖析摘要推箱子游戲就是設(shè)計(jì)一個(gè)人物想盡辦法把箱子從設(shè)滿(mǎn)了障礙的環(huán)境中推至目標(biāo)位置。環(huán)境越復(fù)雜，越是具有挑戰(zhàn)性。本人從各個(gè)方面對(duì)推箱子的過(guò)程進(jìn)行了算法描述。

【關(guān)鍵詞】游戲箱子人物算法

1引言

推箱子游戲就是設(shè)計(jì)一個(gè)人物想盡辦法把箱子從設(shè)滿(mǎn)了障礙的環(huán)境中推至目標(biāo)位置。環(huán)境越復(fù)雜，越是具有挑戰(zhàn)性。本人從各個(gè)方面對(duì)推箱子的過(guò)程進(jìn)行了算法描述。

2游戲環(huán)境設(shè)計(jì)

該游戲的環(huán)境設(shè)計(jì)本人采用現(xiàn)今比較流行的HTML+DIV技術(shù)完成，本游戲沒(méi)有很復(fù)雜的環(huán)境設(shè)計(jì)，利用Javascript動(dòng)態(tài)添加div即可實(shí)現(xiàn)。鋪設(shè)環(huán)境之前首先要用其他工具如photoshop模擬出背景環(huán)境，然后就是需要準(zhǔn)備好背景圖片，并使用切割工具完成對(duì)圖片切割，準(zhǔn)備好這兩樣后，再使用javascript語(yǔ)法完成代碼編寫(xiě)。假設(shè)背景圖beijing.png，障礙物圖片zhangai.png，終點(diǎn)目標(biāo)圖片mubiao.png，這些圖片都放在同一個(gè)文件夾images中，arrMap是一個(gè)二維數(shù)組，是一個(gè)與游戲環(huán)境平面一一對(duì)應(yīng)的二維數(shù)組，這個(gè)二維數(shù)組的設(shè)計(jì)在本游戲的環(huán)境鋪設(shè)中起著非常關(guān)鍵的作用，要根據(jù)前面通過(guò)其他工具勾畫(huà)出的環(huán)境，準(zhǔn)確的設(shè)計(jì)每一行每一列元素的值，直接決定了本游戲的完成難度。通過(guò)javascript的for語(yǔ)法，結(jié)合DOM的createElement方法和appendChild方法，根據(jù)二維元素的值，直接完成環(huán)境的鋪設(shè)。二維數(shù)組將游戲環(huán)境進(jìn)行單元?jiǎng)澐?，方便控制人物和箱子。游戲環(huán)境中，假設(shè)設(shè)置游戲每個(gè)單位是一個(gè)38*38的正方形，設(shè)置二維元素值為1的位置放置的是障礙物，設(shè)置二維元素值為2的位置，便是箱子目標(biāo)位置，其他二維元素值為0位置鋪設(shè)背景圖片即可。

3游戲人物設(shè)計(jì)

人物設(shè)計(jì)關(guān)鍵是要準(zhǔn)備好一張漂亮的人物圖片就行，假設(shè)準(zhǔn)備好的人物圖片為role.png，也放在images文件夾中，然后將人物放在二維數(shù)組中元素值為0的任意一個(gè)位置，假設(shè)人物放在二維數(shù)組2行1列的地方，對(duì)應(yīng)窗口位置就應(yīng)該是距離left：0px;top：39px;，這個(gè)地方在計(jì)算的時(shí)候非常容易出錯(cuò)，要記住，數(shù)組下標(biāo)是從0開(kāi)始記的，將裝載了人物圖片的div直接設(shè)計(jì)在var_userid='';var_siteid=2230;var_istoken=1;var_model='Model03';WebPageSpeed=406;UrchinTrack();標(biāo)記里就行。

4游戲箱子設(shè)計(jì)

假設(shè)準(zhǔn)備好的箱子圖片為box.png，將箱子放置在二維數(shù)組中沒(méi)有障礙物的位置，這里假設(shè)是m行n列的位置，那么定位其位置時(shí)計(jì)算left屬性值應(yīng)該是：(n-1)*39個(gè)像素，top屬性應(yīng)該是(m-1)*39個(gè)像素，裝載箱子圖片的div直接放置于body標(biāo)記中。

5游戲算法描述

算法往往就是一個(gè)程序的靈魂，算法出來(lái)了，程序便容易多了。該游戲中，需要用一個(gè)變量隨時(shí)記錄人物的位置，一個(gè)變量隨時(shí)記錄箱子的位置，假設(shè)坐標(biāo)(row0,col0)表示人物的位置，（row1,col1）表示箱子的位置，row0初始值就為：2-1=1，col0初始值為：1-1=0，row1的初始值為m-1，col1初始值為n-1。

實(shí)現(xiàn)游戲目標(biāo)，第一步，人物走到箱子邊。第二步，推箱子。

第一步，人物走到箱子邊，也即是說(shuō)人物從出發(fā)點(diǎn)到箱子邊要有“通路”，完成第一步后，人物就應(yīng)該在箱子的左邊，或者右邊，或者上面，或者下面，為了便于說(shuō)明問(wèn)題，我們假設(shè)人物在箱子的下面，那么row0=m，col0=n-1，完成第一步的過(guò)程中需要不斷的判斷人物的上下左右是否有障礙物，沒(méi)有障礙物便可以通過(guò)。

第二步，推箱子。仍然假設(shè)人物此時(shí)在箱子的下面，可以往上推箱子，需要判斷箱子的正上方是否有障礙物，如果沒(méi)有障礙物，那么箱子和人物同時(shí)向上移動(dòng)，此時(shí)，row0=m-1，col0=n-1，row1=m-2，col1=n-1，如果有障礙物，那么人物就要想辦法走到箱子的另外三面，假設(shè)此時(shí)走到箱子的右邊，此時(shí)，人物與箱子在同一行，rol0=m-1,col0=n，人物可以左推箱子，需要判斷箱子的左邊是否有障礙物，如果沒(méi)有障礙物，箱子和人一起左移，此時(shí)，row0=m-1，col0=n-1，row1=m-1，col1=n-2，如果有障礙物的話(huà)，人物得想辦法走到箱子的上面或者左邊，如果在箱子的上面，人物可以下推箱子，如果在箱子左邊，人物可以右推箱子，如果目標(biāo)點(diǎn)剛好箱子可以推動(dòng)的方向上，那么推箱子成功。

6結(jié)束語(yǔ)

本文的算法中主要分析了人物推箱子動(dòng)作的算法，最后人物是否能推箱子成功，還與前面構(gòu)建環(huán)境有很大關(guān)系，比如，如果人物到箱子旁邊沒(méi)有設(shè)計(jì)“通路”，根本就無(wú)法到達(dá)箱子的任何一邊，更不同談推箱子。本文算法描述已經(jīng)