手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
摘要:一、前言这一讲的内容很简单,大家理解起来会更快。因此我只对重点加以分析,其他的就轮到大家思考哦!首先来说,我对游戏开发可以算是不怎么深入,因...

一、前言

这一讲的内容很简单,大家理解起来会更快。因此我只对重点加以分析,其他的就轮到大家思考哦!首先来说,我对游戏开发可以算是不怎么深入,因为现在的程序员爱用canvas,我却就只会拿几个div凑和。不过没关系,因为做出来的同样是游戏。哈!废话最近有点多,望大家原谅。接下来请看代码解析。

二、代码讲解

今天调一下讲解顺序,先看代码后看图片。

这是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);

}

});

});

当大家看到本文题目时肯定不大了解题目的含义,因为太抽象了。现在做一下解释:可移动是代表可以向四面八方走动,地图就是地图,可以是世界地图,中国地图,游戏地图。。。反正必须是一张图。在此多说了两句,不过没关系,因为了解情况比不知庐山真面目要好得多。

接下来我把html代码再公布出来,因为这次html代码的重要性很大:

复制代码 代码如下:

<html>

<head>

<title>SLG</title>

<link rel="stylesheet" type="text/css" href="./main_looks.css" />

<script type="text/javascript" src="jquery-1.8.0.js"></script>

<script type="text/javascript" src="./slg.js"></script>

</head>

<body>

<div id="ID_DIV_SLGPAGE">

<img src="./picture/map01.jpg" id="ID_IMG_MAP" />

</div>

<>

<div id="ID_DIV_TORIGHT"></div>

<div id="ID_DIV_TOLEFT"></div>

<div id="ID_DIV_TODOWN"></div>

<div id="ID_DIV_TOUP"></div>

</body>

</html>

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

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

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

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

javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现1

三、演示效果

先看演示图片:

javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现2

然后是:

javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现3

演示地址:

注意:进入demo后点击图片边缘便可以移动地图。

希望大家多支持!谢谢!

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

【javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现】相关文章:

JavaScript中的条件判断语句使用详解

javascript改变和控制显示的图片大小

Javascript 字符串模板的简单实现

JavaScript每天定时更换皮肤样式的方法

javascript动态创建表格及添加数据实例详解

javascript模拟评分控件实现方法

JavaScript中指定函数名称的相关方法

javascript组合使用构造函数模式和原型模式实例

javascript实现图片跟随鼠标移动效果的方法

javascript瀑布流式图片懒加载实例

精品推荐
分类导航