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

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 clearInterval(toright);
clearInterval(toleft);
}
if(subtractedMarginL > -20){
clearInterval(toright);
clearInterval(toleft);
}

if(subtractedMargin 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 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 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:

Copy code The code is as follows:

现在大家可以对照两段代码看，值得注意得是有一点：在html代码中，我把一张图片放入了div，这时div原本是不会遮盖住图片的，但当你加上overflow: hidden;时就可以遮盖住图片了。

在这个程序中为了点击边框附近就能使地图移动，我用了四个div压住图片四边，当边框附近被点击时，就等于点了div，点了div就会调动相应函数。这样做虽然技术会有点差，不过也是一个好办法。

另一点值得注意得是：当点击边框附近调用函数时，我用了一个很特别的方法让地图一直移动，除非你松开鼠标。这个方法就是用setInterval()等待几秒后又移动，setInterval()又是个不停循环的东东，于是就一直调用下去，当松开鼠标时，就用clearInterval();让setInterval()停下，于是，这个环节搞定了！！！哈哈哈。

对了，不忘把图片给大家，图片有点大。。。

 

源码下载地址

三、演示效果

先看演示图片：

然后是：

 

演示地址：
注意：进入demo后点击图片边缘便可以移动地图。

希望大家多支持！谢谢！

“用Javascript开发《三国志曹操传》”系列文章差不多到此就该结束了，下次我们来研究研究html5游戏开发。相信那更是智慧的挑战。敬请期待！---Yorhom Wang