JS游戏开发 可移动地图的实现
时间:2022-05-04
本文章向大家介绍JS游戏开发 可移动地图的实现,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、前言
这一讲的内容很简单,大家理解起来会更快。因此我只对重点加以分析,其他的就轮到大家思考哦!首先来说,我对游戏开发可以算是不怎么深入,因为现在的程序员爱用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="./LightningScript.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()停下,于是,这个环节搞定了!!!哈哈哈。
对了,不忘把图片给大家,图片有点大。。。
- Java基础——左移和右移
- 【Python环境】利用 Python、SciKit 和文本分类来实现行为分析
- LJMM平台( Linux +Jexus+MySQL+mono) 上使用MySQL的简单总结
- 判断两个单链表是否相交(有环、无环两种)
- 【数据科学家】SparkR:数据科学家的新利器
- KMP算法浅析
- Bug修复问题
- Java基础——IO流
- 来一点反射和Emit,让ORM的使用极度简化
- Java基础——集合框架
- Java基础——clone()方法浅析
- 【Python环境】matplotlib - 2D 与 3D 图的绘制
- 左求值表达式,堆栈,调试陷阱与ORM查询语言的设计
- Java基础——序列化
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 服务器入侵排查流程
- Nginx配置各种响应头防止XSS,点击劫持,frame恶意攻击
- Redis一站式管理平台工具,支持集群创建,管理,监控,报警
- Go操作Redis
- 腾讯蓝鲸自动化运维平台简介部署及常见报错解决
- 07 . ELK Stack7.2一键多机部署脚本
- Kibana配置nginx反代并本地ca加密nginx
- Nginx WebUI管理
- Go之Gorm和BeegoORM简介及配置使用
- msyscuione:基于msys的一体化CUI开发生产环境,支持qt,llvm,ros集成常见web appstack
- monosys as 1ddlang语言选型+1ddcodebase实践选型绿色monodevelope集成常见多语言
- hostguest nativelangsys及uniform cui cross compile system
- 写好 JS 条件语句的 5 条守则
- Python元组中元素怎么删除和修改?
- Jupyter 插件太好用了