脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → javascript游戏开发 可移动地图的实现

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

 更新时间：2013年01月23日 18:03:13   作者：  
首先来说，我对游戏开发可以算是不怎么深入，因为现在的程序员爱用canvas，我却就只会拿几个div凑和。不过没关系，因为做出来的同样是游戏。哈！废话最近有点多，感兴趣的朋友可以了解下

一、前言

这一讲的内容很简单，大家理解起来会更快。因此我只对重点加以分析，其他的就轮到大家思考哦！首先来说，我对游戏开发可以算是不怎么深入，因为现在的程序员爱用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" style="width: 718px; height: 500px; border: 5px solid lightgray; overflow: hidden;">
<img src="./picture/map01.jpg" id="ID_IMG_MAP" style=" margin-top: 0px; margin-left: 0px;" />
</div>
<!--<input type="button" value="Down" id="ID_BUTTON_DOWN" />
<input type="button" value="Up" id="ID_BUTTON_UP" />
<input type="button" value="Left" id="ID_BUTTON_LEFT" />
<input type="button" value="Right" id="ID_BUTTON_RIGHT" />-->
<div id="ID_DIV_TORIGHT" style="width: 30px; height: 500px; border: 0px solid lightgray; position:absolute; z-index: 9; margin: -508px 0 0 689px;"></div>
<div id="ID_DIV_TOLEFT" style="width: 30px; height: 500px; border: 0px solid lightgray; position:absolute; z-index: 9; margin: -508px 0 0 0px;"></div>
<div id="ID_DIV_TODOWN" style="width: 718px; height: 30px; border: 0px solid lightgray; position:absolute; z-index: 10; margin: -41px 0 0 0px;"></div>
<div id="ID_DIV_TOUP" style="width: 718px; height: 30px; border: 0px solid lightgray; position:absolute; z-index: 10; margin: -508px 0 0 0px;"></div>
</body>
</html>

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

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

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

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

 

源码下载地址

三、演示效果

先看演示图片：


然后是：


 

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

希望大家多支持！谢谢！

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

您可能感兴趣的文章:

相关文章

  • JavaScript计算出现精度丢失问题的解决方法

    JavaScript计算出现精度丢失问题的解决方法

    Javascript作为一门大型编程语言,在日常开发中难免会涉及到大量的数学计算,然而,浮点数在计算过程中可能出现精度的问题,下面我们就来学习一下Javascript中高精度计算及其相关知识吧
    2023-11-11
  • 小程序实现分类页

    小程序实现分类页

    这篇文章主要为大家详细介绍了小程序实现好看的分类页，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 微信小程序用canvas实现电子签名

    微信小程序用canvas实现电子签名

    这篇文章主要为大家详细介绍了微信小程序用canvas实现电子签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • hash特点、hashchange事件介绍及其常见应用场景

    hash特点、hashchange事件介绍及其常见应用场景

    浅析hash特点、hashchange事件介绍及其常见应用场景（不同hash对应不同事件处理、移动端大图展示状态后退页面问题、原生轻应用头部后退问题、移动端自带返回按钮二次确认问题）,hashchange和popstate事件触发条件
    2023-11-11
  • 微信小程序实现留言功能

    微信小程序实现留言功能

    这篇文章主要为大家详细介绍了微信小程序实现留言功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • window.open打开窗口被拦截的快速解决方法

    window.open打开窗口被拦截的快速解决方法

    下面小编就为大家带来一篇window.open打开窗口被拦截的快速解决方法。觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • javascript 通过键名获取键盘的keyCode方法

    javascript 通过键名获取键盘的keyCode方法

    下面小编就为大家分享一篇javascript 通过键名获取键盘的keyCode方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • 简单实现js倒计时功能

    简单实现js倒计时功能

    这篇文章主要为大家详细介绍了js倒计时效果的实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • BootStrap智能表单实战系列(三)分块表单配置详解

    BootStrap智能表单实战系列(三)分块表单配置详解

    这篇文章主要介绍了BootStrap智能表单实战系列(三)分块表单配置详解的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
    2016-06-06
  • JavaScript实现页面电子时钟

    JavaScript实现页面电子时钟

    这篇文章主要为大家详细介绍了JavaScript实现页面电子时钟，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-06-06

最新评论