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

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

WBOY

Release： 2016-05-16 17:42:52

Original

1612 people have browsed it

1. Introduction

The content of this lecture is very simple, and everyone will understand it faster. Therefore, I will only analyze the key points, and it is your turn to think about the rest! First of all, I don’t have much experience in game development, because today’s programmers love to use canvas, but I can only make up a few divs. But it doesn’t matter, because the result is still a game. ha! I've been talking a lot lately, I hope you'll forgive me. Next, please look at the code analysis.

2. Code explanation

Today I will adjust the order of explanation. Look at the code first and then the pictures.

This is the content in slg.js:

Copy the code The code is as follows:

 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: 