js游戏人物上下左右跑步效果代码分享


Posted in Javascript onAugust 28, 2015

本文实例讲述了js游戏人物上下左右跑步效果。分享给大家供大家参考。具体如下:
js游戏人物上下左右跑步效果是一款jquery ui制作的点击按钮网格布局头像图片动画切换特效。你操控着游戏人物,掌控一切是不是很有意思,感兴趣的小伙伴们可以学习一下
运行效果图:-------------------查看效果 下载源码-------------------

js游戏人物上下左右跑步效果代码分享

小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式。
为大家分享的jQuery实现热气球动画背景登录框代码如下

<!DOCTYPE html>
<html>
<head>
<title>js游戏人物上下左右跑步效果 </title>
<meta charset="utf-8"/>
<style type="text/css">
table {
 position: absolute;
 top: 100px;
 right: 100px;
 width: 150px;
 height: 150px;
}
input {
 width: 40px;
 height: 30px;
 background: orange;
 color: white;
 font-weight: bold;
 border: none;
 border-radius: 5px;
}
img {
 position: absolute;
 top: 300px;
 left: 500px;
}
</style>
</head>
<body>
<img id="im" src="images/down-0.png" />
<table>
 <tr>
 <td><input id="leftUp" type="button" value="左上" /></td>
 <td><input id="goUp" type="button" value="向上" /></td>
 <td><input id="rightUp" type="button" value="右上" /></td>
 </tr>
 <tr>
 <td><input id="goLeft" type="button" value="左" /></td>
 <td><input id="stop" type="button" value="停止" /></td>
 <td><input id="goRight" type="button" value="右" /></td>
 </tr>
 <tr>
 <td><input id="leftDown" type="button" value="左下" /></td>
 <td><input id="goDown" type="button" value="向下" /></td>
 <td><input id="rightDown" type="button" value="右下" /></td>
 </tr>
</table>
<script type="text/javascript">
 var i = 0, clc = null, flage;
 var images = document.getElementById('im');

 var oGoUp = document.getElementById('goUp');
 var oGoDown = document.getElementById('goDown');
 var oGoLeft = document.getElementById('goLeft');
 var oGoRight = document.getElementById('goRight');
 var oLeftUp = document.getElementById('leftUp');
 var oLeftDown = document.getElementById('leftDown');
 var oRightUp = document.getElementById('rightUp');
 var oRightDown = document.getElementById('rightDown');
 var oStop = document.getElementById('stop');

 images.style.top = '300px';
 images.style.left = '500px';

 //停止
 oStop.onclick = function(){
 switch(flage){
 case 1: images.src = 'images/up-0.png';break;
 case 2: images.src = 'images/down-0.png';break;
 case 3: images.src = 'images/left-0.png';break;
 case 4: images.src = 'images/right-0.png';break;
 case 5: images.src = 'images/rightUp-0.png';break;
 case 6: images.src = 'images/rd-0.png';break;
 case 7: images.src = 'images/ld-0.png';break;
 case 8: images.src = 'images/lu-0.png';break;
 }
 clearInterval(clc);
 }
 //向上
 oGoUp.onclick = function(){
 i = 0;
 clearInterval(clc);
 clc = setInterval("goUp(i++);", 100);
 }
 function goUp(){
 i = i % 4;
 var name ="images/up-" + i + "." + "png";
 images.src = name;
 images.style.top = parseInt(images.style.top) - 10 + 'px';
 flage = 1;
 }
 //向下
 oGoDown.onclick = function(){
 i = 0;
 clearInterval(clc);
 clc = setInterval("goDown(i++);", 100);
 }
 function goDown(){
 i = i % 4;
 var name ="images/down-" + i + "." + "png";
 images.src = name;
 images.style.top = parseInt(images.style.top) + 10 + 'px';
 flage = 2;
 }
 //向左
 oGoLeft.onclick = function(){
 i = 0;
 clearInterval(clc);
 clc = setInterval("goLeft(i++);", 100);
 }
 function goLeft(){
 i = i % 4;
 var name ="images/left-" + i + "." + "png";
 images.src = name;
 images.style.left = parseInt(images.style.left) - 10 + 'px';
 flage = 3;
 }
 //向右
 oGoRight.onclick = function(){
 i = 0;
 clearInterval(clc);
 clc = setInterval("goRight(i++);", 100);
 }
 function goRight(){
 i = i % 4;
 var name ="images/right-" + i + "." + "png";
 images.src = name;
 images.style.left = parseInt(images.style.left) + 10 + 'px';
 flage = 4;
 }
 //向右上
 oRightUp.onclick = function(){
 i = 0;
 clearInterval(clc);
 clc = setInterval("goRightUp(i++);", 100);
 }
 function goRightUp(){
 i = i % 4;
 var name ="images/rightUp-" + i + "." + "png";
 images.src = name;
 images.style.left = parseInt(images.style.left) + 10 + 'px';
 images.style.top = parseInt(images.style.top) - 10 + 'px';
 flage = 5;
 }
 //向右下
 oRightDown.onclick = function(){
 i = 0;
 clearInterval(clc);
 clc = setInterval("goRightDown(i++);", 100);
 }
 function goRightDown(){
 i = i % 4;
 var name ="images/rd-" + i + "." + "png";
 images.src = name;
 images.style.left = parseInt(images.style.left) + 10 + 'px';
 images.style.top = parseInt(images.style.top) + 10 + 'px';
 flage = 6;
 }
 //向左下
 oLeftDown.onclick = function(){
 i = 0;
 clearInterval(clc);
 clc = setInterval("goLeftDown(i++);", 100);
 }
 function goLeftDown(){
 i = i % 4;
 var name ="images/ld-" + i + "." + "png";
 images.src = name;
 images.style.left = parseInt(images.style.left) - 10 + 'px';
 images.style.top = parseInt(images.style.top) + 10 + 'px';
 flage = 7;
 }
 //向左上
 oLeftUp.onclick = function(){
 i = 0;
 clearInterval(clc);
 clc = setInterval("goLeftUp(i++);", 100);
 }
 function goLeftUp(){
 i = i % 4;
 var name ="images/lu-" + i + "." + "png";
 images.src = name;
 images.style.left = parseInt(images.style.left) - 10 + 'px';
 images.style.top = parseInt(images.style.top) - 10 + 'px';
 flage = 8;
 }
 </script>
<div style="text-align:center;clear:both">
</div>
</body>
</html>

以上就是为大家分享的js游戏人物上下左右跑步效果代码,希望大家可以喜欢。

Javascript 相关文章推荐
jquery中的 $(&quot;#jb51&quot;)与document.getElementById(&quot;jb51&quot;) 的区别
Jul 26 Javascript
jquery实现智能感知连接外网搜索
May 21 Javascript
js实现兼容性好的微软官网导航下拉菜单效果
Sep 07 Javascript
sea.js常用的api简易文档
Nov 15 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
jquery获取select,option所有的value和text的实例
Mar 06 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
WebSocket的简单介绍及应用
May 23 Javascript
vue自定义表单生成器form-create使用详解
Jul 19 Javascript
javascript事件循环event loop的简单模型解释与应用分析
Mar 14 Javascript
js实现百度登录窗口拖拽效果
Mar 19 Javascript
Vue Element校验validate的实例
Sep 21 Javascript
Angular Js文件上传之form-data
Aug 28 #Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
Aug 28 #Javascript
jquery实现未经美化的简洁TAB菜单效果
Aug 28 #Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
Aug 28 #Javascript
js实现显示当前状态的导航效果代码
Aug 28 #Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 #Javascript
AngularJS+Node.js实现在线聊天室
Aug 28 #Javascript
You might like
php日历制作代码分享
2014/01/20 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
怎么用javascript进行拖拽
2006/07/20 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
jquery tablesorter.js 支持中文表格排序改进
2009/12/09 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
微信小程序 网络API Websocket详解
2016/11/09 Javascript
详谈Node.js之操作文件系统
2017/08/29 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
深入浅析Node环境和浏览器的区别
2018/08/14 Javascript
利用Promise自定义一个GET请求的函数示例代码
2019/03/20 Javascript
Vue Object 的变化侦测实现代码
2020/04/15 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
Python实现线程状态监测简单示例
2018/03/28 Python
python实现猜数字小游戏
2020/03/24 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
对Python生成器、装饰器、递归的使用详解
2019/07/19 Python
在 Pycharm 安装使用black的方法详解
2020/04/02 Python
利用4行Python代码监测每一行程序的运行时间和空间消耗
2020/04/22 Python
django 将自带的数据库sqlite3改成mysql实例
2020/07/09 Python
python中zip()函数遍历多个列表方法
2021/02/18 Python
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
2014/09/02 HTML / CSS
商务日语毕业生自荐信范文
2013/11/14 职场文书
妈妈的账单教学反思
2014/02/06 职场文书
《毛主席在花山》教学反思
2014/04/20 职场文书
英语分层教学实施方案
2014/06/15 职场文书
乡镇党员干部四风对照检查材料思想汇报
2014/09/27 职场文书
毕业生自荐材料范文
2014/12/30 职场文书
小学2016年“我们的节日·重阳节”活动总结
2016/04/01 职场文书
解析Java中的static关键字
2021/06/14 Java/Android
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
HTML中link标签属性的具体用法
2023/05/07 HTML / CSS