Use JavaScript to develop "Three Kingdoms Cao Zhuan Chuan"-Open Source lecture (5)-Implementation of mobile Map

Position of the previous chapters:

Develop the "Three Kingdoms Cao Zhuan Chuan" with JavaScript-Open Source lecture (4)-use map blocks to build a map

Http://blog.csdn.net/yorhomwang/article/details/8033922

Develop the "Three Kingdoms Cao Zhuan Chuan" by using JavaScript-Open Source lecture (III)-text output by text imitation typewriter in character dialogs
Http://blog.csdn.net/yorhomwang/article/details/8008759
Develop the "Three Kingdoms Cao Zhuan Chuan" with JavaScript-open-source lecture (2)-Move target people
Http://blog.csdn.net/yorhomwang/article/details/8007871
Develop the "Three Kingdoms Cao Zhuan Chuan" with JavaScript-open-source lecture (1)-Let static figures move
Http://blog.csdn.net/yorhomwang/article/details/7984576

I. Preface

The content of this lecture is very simple and everyone can understand it faster. Therefore, I only analyze the key points, and it's your turn to think about others! First of all, I am not very deep into game development, because the current programmers love canvas, but I only have a few divs to join. But it doesn't matter, because it is also a game. Ha! I hope you will forgive me for having made a lot of nonsense recently. Next, see code parsing.

Ii. Code explanation

Today, I want to explain the order. I want to read the code first and then see the picture.

This is the content in SLG. JS:

var subtractedMargin = 0; var subtractedMarginL = 0; var mousedown = 0;  var toright; var toleft; var todown; var toup;  window.onmouseup = function(){     mousedown = 0;      clearInterval(toright);     clearInterval(toleft);     clearInterval(todown);     clearInterval(toup); }  function mapMove(direction) {     switch(direction){         case "down":             subtractedMargin -= 15;              $("#ID_IMG_MAP").animate({marginTop: subtractedMargin + "px"}, 120);                          break;                  case "up":             subtractedMargin += 15;              $("#ID_IMG_MAP").animate({marginTop: subtractedMargin + "px"}, 120);                          break;                  case "right":             subtractedMarginL -= 15;              $("#ID_IMG_MAP").animate({marginLeft: subtractedMarginL + "px"}, 120);                          break;                  case "left":             subtractedMarginL += 15;              $("#ID_IMG_MAP").animate({marginLeft: subtractedMarginL + "px"}, 120);                          break;     }      if(subtractedMarginL < -415){         clearInterval(toright);         clearInterval(toleft);     }     if(subtractedMarginL > -20){         clearInterval(toright);         clearInterval(toleft);     }      if(subtractedMargin < -640){         clearInterval(todown);         clearInterval(toup);     }     if(subtractedMargin > -20){         clearInterval(todown);         clearInterval(toup);     } }  $("body").ready(function(){     $("#ID_DIV_TORIGHT").mousedown(function(){         mousedown = 1;          if(subtractedMarginL > -415 && mousedown == 1){             mapMove("right");             toright = setInterval(function(){mapMove("right");}, 120);         }      });      $("#ID_DIV_TOLEFT").mousedown(function(){         mousedown = 1;          if(subtractedMarginL < -20 && mousedown == 1){             mapMove("left");             toleft = setInterval(function(){mapMove("left");}, 120);         }     });      $("#ID_DIV_TODOWN").mousedown(function(){         mousedown = 1;          if(subtractedMargin > -640 && mousedown == 1){             mapMove("down");             todown = setInterval(function(){mapMove("down");}, 120);         }     });          $("#ID_DIV_TOUP").mousedown(function(){         mousedown = 1;          if(subtractedMargin < -20 && mousedown == 1){             mapMove("up");             toup = setInterval(function(){mapMove("up");}, 120);         }     }); });

When you see the questions in this article, you must not understand the meaning of the questions, because they are too abstract. Now let's explain: mobility means that you can move in all directions. A map is a map, which can be a map of the world, a map of China, or a map of the game... It must be an image. I have said a few more here, but it doesn't matter, because it is much better to know the situation than to know the true face.
Next, I will publish the HTML code again, because this time the HTML code is very important:

Now you can compare the two sections of code. It is worth noting that in the HTML code, I put an image into the Div. At this time, the DIV will not cover the image, however, when you add overflow: Den den;, you can hide the image.
In this program, in order to move the map by clicking near the border, I used four divs to press the four sides of the image. When the border is clicked near, it is equivalent to clicking the div, when div is clicked, the corresponding function is mobilized. Although the technology is a little poor, it is also a good solution.
It is worth noting that when I click a function near the border to call the function, I used a very special method to keep the map moving, unless you release the mouse. This method is to use setinterval () to wait for several seconds and then move again. setinterval () is a non-stop loop, so it is called continuously. When you release the mouse, use clearinterval (); to stop setinterval (), so this step is done !!! Hahaha.
By the way, you don't forget to give the picture to everyone. The picture is a little big...


 

 
  
 
   
 
    
 
   
 
   
 
    
Image name: map01.jpg
 
   
 
  

 

Source code: http://files.cnblogs.com/ducle/moveMap.rar



Iii. demonstration results
First look at the demo image:


Then:

 
Demo address: http://www.cnblogs.com/yorhom/archive/2012/09/29/2708977.html

Note: after entering the demo, click the image edge to move the map.
I hope you will have more support! Thank you!

It is almost time to end the series of articles "develop three kingdoms with JavaScript". Next time we will study HTML5 game development. Believe that is a challenge of wisdom. Coming soon! --- Yorhom Wang

----------------------------------------------------------------
You are welcome to repost my article.
Reprinted Please note: transferred from yorhom's game box
Continue to follow my blog