Javascript game development: 'Three Kingdoms Cao Cao Biography' component development (5) Implementation of movable maps_javascript skills

var subtractedMargin = 0;
var subtractedMarginL = 0;
var mousedown = 0;

var toright;
var toleft; >
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 title of this article, you will definitely not understand the meaning of the title because it is too abstract . Now let me explain: Movable means that you can move in all directions. A map is a map. It can be a world map, a Chinese map, or a game map. . . It has to be a picture anyway. I have to say a few more words here, but it doesn’t matter, because it is much better to understand the situation than not knowing the true face of Mount Lu.
Next I will publish the html code again, because this time the html code is very important: