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 相关文章推荐
对google个性主页的拖拽效果的js的完整注释[转]
Apr 10 Javascript
jQuery 判断页面元素是否存在的代码
Aug 14 Javascript
Javascript全局变量var与不var的区别深入解析
Dec 09 Javascript
Js与Jq获取浏览器和对象值的方法
Mar 18 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
vue-cli整合vuex的时候,修改actions和mutations,实现热部署的方法
Sep 19 Javascript
vue中进行微博分享的实例讲解
Oct 14 Javascript
vuex存值与取值的实例
Nov 06 Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 Javascript
vue实现简单瀑布流布局
May 28 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
DOTA2 6.87版本后新眼位详解攻略
2020/04/20 DOTA
php getimagesize 上传图片的长度和宽度检测代码
2010/05/15 PHP
解决文件名解压后乱码的问题 将文件名进行转码的代码
2012/01/10 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
javascript延时重复执行函数 lLoopRun.js
2007/06/29 Javascript
起点页面传值js,有空研究学习下
2010/01/25 Javascript
jQuery帮助之筛选查找 children([expr])
2011/01/31 Javascript
读jQuery之三(构建选择器)
2011/06/11 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
JavaScript Array对象扩展indexOf()方法
2014/05/09 Javascript
JavaScript常用标签和方法总结
2015/09/01 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
2016/01/21 Javascript
AngularJs Javascript MVC 框架
2016/06/20 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
vue修改对象的属性值后页面不重新渲染的实例
2018/08/09 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
原生js实现的金山打字小游戏(实例代码详解)
2020/03/16 Javascript
[45:15]Optic vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
Django组件之cookie与session的使用方法
2019/01/10 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
python 实现批量图片识别并翻译
2020/11/02 Python
详解python 条件语句和while循环的实例代码
2020/12/28 Python
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
后勤服务中心总经理工作职责
2014/03/03 职场文书
取保候审保证书
2014/04/30 职场文书
化工见习报告范文
2014/10/31 职场文书
安全隐患整改报告
2014/11/06 职场文书
锦旗赠语
2015/06/23 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
表扬稿表扬信的格式及范文
2019/06/24 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
JVM之方法返回地址详解
2022/02/28 Java/Android
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL