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 < -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:

Copy code The code is as follows:

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

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

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

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

 

源码下载地址

三、演示效果

先看演示图片：

然后是：

 

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

希望大家多支持！谢谢！

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn