首頁 > 開發者 > JavaScript
前幾章的位置：
用Javascript開發《三國志曹操傳》-零組件開發(四)-用地圖塊拼成大地圖
http://www.cnblogs.com/ducle/archive/2012/09/23/2699066.html
用Javascript開發《三國志曹操傳》-零組件開發(三)-人物對話中，仿打字機輸出文字
http://www.cnblogs.com/ducle/archive/2012/09/15/2686532.html
用Javascript開發《三國志曹操傳》-零組件開發(二)-讓目標人物移動
http://www.cnblogs.com/ducle/archive/2012/09/08/2677127.html
用Javascript開發《三國志曹操傳》-零組件開發(一)-讓靜態人物動起來
http://www.cnblogs.com/ducle/archive/2012/09/02/2667481.html
一、前言
這一講的內容很簡單，大家理解起來會更快。因此我只對重點加以分析，其他的就輪到大家思考哦！首先來說，我對遊戲開發可以算是不怎麼深入，因為現在的程式員愛用canvas，我卻就只會拿幾個div湊和。不過沒關係，因為做出來的同樣是遊戲。哈！廢話最近有點多，望大家原諒。接下來請看代碼解析。
二、代碼講解
今天調一下講解順序，先看代碼後看圖片：
1 var subtractedMargin = 0; 2 var subtractedMarginL = 0; 3 var mousedown = 0; 4 5 var toright; 6 var toleft; 7 var todown; 8 var toup; 9 10 window.onmouseup = function(){ 11 mousedown = 0; 12 13 clearInterval(toright); 14 clearInterval(toleft); 15 clearInterval(todown); 16 clearInterval(toup); 17 } 18 19 function mapMove(direction) 20 { 21 switch(direction){ 22 case "down": 23 subtractedMargin -= 15; 24 25 $("#ID_IMG_MAP").animate({marginTop: subtractedMargin + "px"}, 120); 26 27 break; 28 29 case "up": 30 subtractedMargin += 15; 31 32 $("#ID_IMG_MAP").animate({marginTop: subtractedMargin + "px"}, 120); 33 34 break; 35 36 case "right": 37 subtractedMarginL -= 15; 38 39 $("#ID_IMG_MAP").animate({marginLeft: subtractedMarginL + "px"}, 120); 40 41 break; 42 43 case "left": 44 subtractedMarginL += 15; 45 46 $("#ID_IMG_MAP").animate({marginLeft: subtractedMarginL + "px"}, 120); 47 48 break; 49 } 50 51 if(subtractedMarginL < -415){ 52 clearInterval(toright); 53 clearInterval(toleft); 54 } 55 if(subtractedMarginL > -20){ 56 clearInterval(toright); 57 clearInterval(toleft); 58 } 59 60 if(subtractedMargin < -640){ 61 clearInterval(todown); 62 clearInterval(toup); 63 } 64 if(subtractedMargin > -20){ 65 clearInterval(todown); 66 clearInterval(toup); 67 } 68 } 69 70 $("body").ready(function(){ 71 $("#ID_DIV_TORIGHT").mousedown(function(){ 72 mousedown = 1; 73 74 if(subtractedMarginL > -415 && mousedown == 1){ 75 mapMove("right"); 76 toright = setInterval(function(){mapMove("right");}, 120); 77 } 78 79 }); 80 81 $("#ID_DIV_TOLEFT").mousedown(function(){ 82 mousedown = 1; 83 84 if(subtractedMarginL < -20 && mousedown == 1){ 85 mapMove("left"); 86 toleft = setInterval(function(){mapMove("left");}, 120); 87 } 88 }); 89 90 $("#ID_DIV_TODOWN").mousedown(function(){ 91 mousedown = 1; 92 93 if(subtractedMargin > -640 && mousedown == 1){ 94 mapMove("down"); 95 todown = setInterval(function(){mapMove("down");}, 120); 96 } 97 }); 98 99 $("#ID_DIV_TOUP").mousedown(function(){100 mousedown = 1;101 102 if(subtractedMargin < -20 && mousedown == 1){103 mapMove("up");104 toup = setInterval(function(){mapMove("up");}, 120);105 }106 });107 });
當大家看到本文題目時肯定不大瞭解題目的含義，因為太抽象了。現在做一下解釋：可移動是代表可以向四面八方走動，地圖就是地圖，可以是世界地圖，中國地圖，遊戲地圖。。。反正必須是一張圖。在此多說了兩句，不過沒關係，因為瞭解情況比不知廬山真面目要好得多。
接下來我把html代碼再公布出來，因為這次html代碼的重要性很大：
1 <html> 2 <head> 3 <title>SLG</title> 4 5 <link rel="stylesheet" type="text/css" href="./main_looks.css" /> 6 <script type="text/javascript" src="jquery-1.8.0.js"></script> 7 <script type="text/javascript" src="./LightningScript.js"></script> 8 9 <script type="text/javascript" src="./slg.js"></script>10 </head>11 <body>12 <div id="ID_DIV_SLGPAGE" style="width: 718px; height: 500px; border: 5px solid lightgray; overflow: hidden;">13 <img src="./picture/map01.jpg" id="ID_IMG_MAP" style=" margin-top: 0px; margin-left: 0px;" />14 </div>15 <!--<input type="button" value="Down" id="ID_BUTTON_DOWN" />16 <input type="button" value="Up" id="ID_BUTTON_UP" />17 <input type="button" value="Left" id="ID_BUTTON_LEFT" />18 <input type="button" value="Right" id="ID_BUTTON_RIGHT" />-->19 <div id="ID_DIV_TORIGHT" style="width: 30px; height: 500px; border: 0px solid lightgray; position:absolute; z-index: 9; margin: -508px 0 0 689px;"></div>20 <div id="ID_DIV_TOLEFT" style="width: 30px; height: 500px; border: 0px solid lightgray; position:absolute; z-index: 9; margin: -508px 0 0 0px;"></div>21 <div id="ID_DIV_TODOWN" style="width: 718px; height: 30px; border: 0px solid lightgray; position:absolute; z-index: 10; margin: -41px 0 0 0px;"></div>22 <div id="ID_DIV_TOUP" style="width: 718px; height: 30px; border: 0px solid lightgray; position:absolute; z-index: 10; margin: -508px 0 0 0px;"></div>23 </body>24 </html>
現在大家可以對照兩段代碼看，值得注意得是有一點：在html代碼中，我把一張圖片放入了div，這時div原本是不會遮蓋住圖片的，但當你加上overflow: hidden;時就可以遮蓋住圖片了。
在這個程式中為了點擊邊框附近就能使地圖移動，我用了四個div壓住圖片四邊，當邊框附近被點擊時，就等於點了div，點了div就會調動相應函數。這樣做雖然技術會有點差，不過也是一個好辦法。
另一點值得注意得是：當點擊邊框附近調用函數時，我用了一個很特別的方法讓地圖一直移動，除非你鬆開滑鼠。這個方法就是用setInterval()等待幾秒後又移動，setInterval()又是個不停迴圈的東東，於是就一直調用下去，當鬆開滑鼠時，就用clearInterval();讓setInterval()停下，於是，這個環節搞定了！！！哈哈哈。
對了，不忘把圖片給大家，圖片有點大。。。
| 圖片名稱：map01.jpg |
原始碼下載：http://files.cnblogs.com/ducle/moveMap.rar
三、示範效果
先看示範圖片：
然後是：
示範地址：http://www.cnblogs.com/yorhom/archive/2012/09/29/2708977.html
希望大家多支援！謝謝！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
