javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
一、前言
这一讲的内容很简单，大家理解起来会更快。因此我只对重点加以分析，其他的就轮到大家思考哦！首先来说，我对游戏开发可以算是不怎么深入，因为现在的程序员爱用canvas，我却就只会拿几个div凑和。不过没关系，因为做出来的同样是游戏。哈！废话最近有点多，望大家原谅。接下来请看代码解析。
二、代码讲解
今天调一下讲解顺序，先看代码后看图片。
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开发Web游戏时,需要使用到碰撞检测时,为了方便开发,封装了矩形和圆形的两个碰撞检测方式. [附带案例操作捕获一枚] [注意:代码上未做优化处理] 演示图 角色攻击区域碰撞检测.gif 塔防案例.gif 矩形区域碰撞检测 /** * 矩形区域碰撞检测 * Created by Administrator on 14-4-7. * author: marker */ function Rectangle(x, y, _width, _height){ this.x = x;
-
javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
小时候我们玩过拼图游戏,是用自己的手去拼的.今天我们来研究研究用javascript来拼图.同样是拼图,但用js拼图要比用手拼图麻烦多了,因此以后我要把它优化成引擎. 一.前言 以上是一段导语,话不扯远,对<三国志曹操传>熟悉的玩家知道,<三国志曹操传>的地图是由小地图块拼成的,那要实现它就和导语说得一样:很麻烦.不过即使麻烦也是一门技术,因此在此分享给大家,希望大家喜欢. 二.代码讲解 今天我要换换讲解方式,先不给代码,我们先来想想原理.现在,假如你有一幅图片,把它裁开成若干份,
-
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
首先来说,让一个游戏赋有可玩性必须要动静结合.(哈哈,大家以为我要讲作文了...但其实我今天要讲的是Javascript)静态的东西谁不会做呢?因为东西一生下来就是静态的(除非你是用的gif动画),所以不需要任何处理就能完成静态.那么我将要在下面告诉大家如何运用Javascript将静态图片变为动态图片. 一.图片准备 fight01.pngfight02.pngfight03.pngfight04.png03.png02.png01.png首先,我找了一些出自经典游戏<三国志曹操传>
-
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
上一讲我们谈到了如何让静态人物变为动态,今天我们来谈谈如何使人物移动,因为这一讲涉及上一讲内容所以我把上一讲的链接写在下方: 一.图片准备 今天我准备换几张图片,这样更新鲜些. 这些素材照样来自<三国志曹操传>,如果我没记错,应该是曹操的素材.接下来我要结合上一次的技术,来告诉大家如何使人物走动起来.不过今天我们着重在于如何使人物走动,因为我们上一讲已经讲了如何使人物化静态为动态. 二.代码讲解 先看总的javascript代码: 复制代码 代码如下: var moveLengthLeft =
-
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
前两讲我告诉了大家如何使人物移动,那么今天我们就来看看如何实现仿<三国志曹操传>人物情景对话.具体的链接我写在下方. 一.前言 相信大家都还记得吧,在某些新闻里会有一些惨不忍睹的结果是用像打字机一样的方式把文字弄出来.那么今天的主要目的就是要办到这个. 就在9月5日的时候,我在办公室里起了个做这种程序的念头,并且有了点思路.我首先想用调margin的方法,按理说是作出来了,但很不让人满意,毕竟很麻烦,并且技术也差.所以我打算用上数组和循环.9月13日我抽空写出来了,但由于这几天很忙,基本上在工
-
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
一.前言 这一讲的内容很简单,大家理解起来会更快.因此我只对重点加以分析,其他的就轮到大家思考哦!首先来说,我对游戏开发可以算是不怎么深入,因为现在的程序员爱用canvas,我却就只会拿几个div凑和.不过没关系,因为做出来的同样是游戏.哈!废话最近有点多,望大家原谅.接下来请看代码解析. 二.代码讲解 今天调一下讲解顺序,先看代码后看图片. 这是slg.js里的内容: 复制代码 代码如下: var subtractedMargin = 0; var subtractedMarginL = 0;
-
浅析Java、C/C++、JavaScript、PHP、Python分别用来开发什么?
首先,我们先普及一下编程语言的基础知识.用任何编程语言来开发程序,都是为了让计算机干活,比如编写一篇文章,下载一首MP3等,而计算机干活的CPU只认识机器的指令,所以,尽管不同的编程语言差异极大,最后都得"翻译"成CPU可以执行的机器指令.理论上任何语言干任何事情几乎都可以, 但是主要干什么那就不一样了. 01.Java java常常跟"企业"联系在一起, 因为具备一些很好的语言特性, 以及丰富的框架, 在企业应用中最被青睐, 你总可以听到关于J2EE,JSP,Hi
-
游戏服务器开发的基本体系与服务器端开发的一些建议
近年来,我身边的朋友有很多都从web转向了游戏开发.他们以前都没有做过游戏服务器开发,更谈不上什么经验,而从网上找的例子或游戏方面的知识,又是那么的少,那么的零散.当他们进入游戏公司时,显得一脸茫然.如果是大公司还好点,起码有人带带,能学点经验,但是有些人是直接进入了小公司,甚至这些小公司只有他一个后台.他们一肩扛起了公司的游戏后端的研发,也扛起了公司的成败.他们也非常尽力,他们也想把游戏的后端做好.可是就是因为没什么经验,刚开始时以为做游戏服务器和做web差不多,但是经过一段时间之后,才发现代
-
基于javascript html5实现多文件上传
本文实例为大家分享了javascript html5实现多文件上传的实现方法,具体内容如下 HTML结构: <div class="container"> <label>请选择一个图像文件:</label> <input type="file" id="file_input" multiple/> </div> 顺便说下这个上传的主要逻辑: 用input标签并选择type=file,记得
-
Vue开发之封装上传文件组件与用法示例
本文实例讲述了Vue开发之封装上传文件组件与用法.分享给大家供大家参考,具体如下: 使用elementui的 el-upload插件实现图片上传组件 每个项目存在一定的特殊性,所以数据的处理会不同 pictureupload.vue: <template> <div class="pictureupload"> <el-upload :action="baseUrl + '/api/public/image'" list-type=&q
-
python 实现图片上传接口开发 并生成可以访问的图片url
版本:python3.7 功能,开发一个用户访问的页面,支持图片上传,并将其保存在服务器. 项目结构: app.py文件内容如下: from flask import Flask, Response, request, render_template from werkzeug.utils import secure_filename import os app = Flask(__name__) # 设置图片保存文件夹 UPLOAD_FOLDER = 'photo' app.config['U