用Javascript開發《三國志曹操傳》-零部件開發(五)-可移動地圖的實現

本文轉載自查看原文 2012-09-29 23:15 2061 javascript&html5/ 游戲開發

前幾章的位置：

用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

希望大家多支持！謝謝！

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 用Javascript開發《三國志曹操傳》-零部件開發(二)-讓目標人物移動用Javascript開發《三國志曹操傳》-零部件開發(四)-用地圖塊拼成大地圖用Javascript開發《三國志曹操傳》-零部件開發(一)-讓靜態人物動起來用Javascript開發《三國志曹操傳》-零部件開發(三)-人物對話中，仿打字機輸出文字三國志·魏書·滿寵傳三國志、英雄無敵玩膩了？沒關系，我教你開發個戰旗游戲玩玩戰棋游戲三國志英傑傳分析版本管理三國志 (CVS, Subversion, git) Javascript可移動地圖的實現Demo演示 FC游戲《三國志2-霸王的大陸》攻略