《三国志曹操传》 JavaScript游戏开发组件开发(五)手机地图的实现

时间：2021-10-04 来源：互联网编辑：宝哥软件园浏览：次

一、前言这一讲的内容很简单，大家理解起来会更快。因此我只对重点加以分析，其他的就轮到大家思考哦！首先来说，我对游戏开发可以算是不怎么深入，因为现在的程序员爱用帆布，我却就只会拿几个差异凑和。不过没关系，因为做出来的同样是游戏。哈！废话最近有点多，望大家原谅。接下来请看代码解析。二、代码讲解今天调一下讲解顺序，先看代码后看图片。这是slg.js里的内容：复制代码代码如下：var减法边距=0；定义变量减法marginl=0；var鼠标向下=0；var torightvar toleftvar to down var toupwindow。onmouseup=function(){鼠标按下=0；clearInterval(向右)；clearInterval(tole ft)；clearInterval(todown)；clearInterval(toup)；}函数mapMove(方向){ switch(方向){ case 'down':减法边距-=15；$('#ID_IMG_MAP ').动画({页边距p:减法边距' px'}，120)；打破；病例“上升”:减法=15$('#ID_IMG_MAP ').动画({页边距p:减法边距' px'}，120)；打破；案例'右' :减法marginl-=15；$('#ID_IMG_MAP ').动画({marginLeft:减法MarginL 'px'}，120)；打破；案例'左' :减法=15$('#ID_IMG_MAP ').动画({marginLeft:减法MarginL 'px'}，120)；打破；}如果(减法Marginl-415){ clearInterval(向右)；clearInterval(tole ft)；}如果(减法Marginl-20){ clearInterval(向右)；clearInterval(tole ft)；}如果(减法margin-640){ clearInterval(todown)；clearInterval(toup)；}如果(减法margin-20){ clearInterval(todown)；clearInterval(toup)；} } $(“正文”).ready(function(){ $(' # ID _ DIV _ TORIGHT ')).鼠标向下(function(){鼠标向下=1；如果(减法Marginl-415鼠标向下==1){ mapMove('右')；toright=setInterval(function(){ mapMove(' right '))；}, 120);} });$('#ID_DIV_TOLEFT ').鼠标向下(function(){鼠标向下=1；如果(减法Marginl-20鼠标向下==1){ Mapmove(' left ')；toleft=setInterval(function(){ mapMove(' left '))；}, 120);} });$('#ID_DIV_TODOWN ').鼠标向下(function(){鼠标向下=1；如果(减法Margin-640鼠标向下==1){ mapMove('向下')；todown=setInterval(function(){ mapMove(' down '))；}, 120);} });$('#ID_DIV_TOUP ').鼠标向下(function(){鼠标向下=1；如果(减法margin-20鼠标下移==1){ mapMove('上移')；toup=setInterval(function(){ mapMove(' up '))；}, 120);} });});当大家看到本文题目时肯定不大了解题目的含义，因为太抽象了。现在做一下解释：可移动是代表可以向四面八方走动，地图就是地图，可以是世界地图，中国地图，游戏地图。反正必须是一张图。在此多说了两句，不过没关系，因为了解情况比不知庐山真面目要好得多。

接下来我把超文本标记语言代码再公布出来，因为这次超文本标记语言代码的重要性很大：复制代码代码如下： html标题标题SLG/标题链接rel='样式表type='text/css' href=' ./main _ looks。CSS '/脚本类型=' text/JavaScript ' src=' http : jquery-1。8 .0 .js '/script脚本类型=' text/JavaScript ' src=' http :/SLG。js '/脚本/头体DIV ID=' ID _ DIV _ SLGPAGE ' style=' width : 718 px；高度： 500像素；border: 5px实心浅灰色；'隐藏飞越：img src='http:/picture/map01。jpg ' ID=' ID _ IMG _ MAP ' style=' margin-top : 0px；边距-左侧： 0px//div！-输入类型='按钮'值='Down' id='ID_BUTTON_DOWN' /输入类型='按钮'值='Up' id='ID_BUTTON_UP' /输入类型='按钮'值='Left' id='ID_BUTTON_LEFT' /输入类型='按钮'值=' Right ' ID=' ID _ BUTTON _ Right '/-DIV ID=' ID _ DIV _ TORIGHT ' style=' width : 30px；高度： 500像素；border: 0px实心浅灰色；位置：绝对；z指数： 9；余量：-508 px 0 0 689 px；/DIV DIV ID=' ID _ DIV _ TOLEFT ' style=' width : 30px；高度： 500像素；border: 0px实心浅灰色；位置：绝对；z指数： 9；余量：-508像素0像素0像素；/DIV DIV ID=' ID _ DIV _ TODOWN ' style=' width : 718 px；高度： 30pxborder: 0px实心浅灰色；位置：绝对；z指数： 10；边距：-41px 0 0 0px；/DIV DIV ID=' ID _ DIV _ TOUP ' style=' width : 718 px；高度： 30pxborder: 0px实心浅灰色；位置：绝对；z指数： 10；余量：-508像素0像素0像素；/div /body /html现在大家可以对照两段代码看，值得注意得是有一点：在超文本标记语言代码中，我把一张图片放入了div，这时差异原本是不会遮盖住图片的，但当你加上飞越：隐藏；时就可以遮盖住图片了。在这个程序中为了点击边框附近就能使地图移动，我用了四个差异压住图片四边，当边框附近被点击时，就等于点了div，点了差异就会调动相应函数。这样做虽然技术会有点差，不过也是一个好办法。另一点值得注意得是：当点击边框附近调用函数时，我用了一个很特别的方法让地图一直移动，除非你松开鼠标。这个方法就是用setInterval()等待几秒后又移动，setInterval()又是个不停循环的东东，于是就一直调用下去，当松开鼠标时，就用clearInterval()；让setInterval()停下，于是，这个环节搞定了！哈哈哈。对了，不忘把图片给大家，图片有点大