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.ui.draggable中文文档
Nov 24 Javascript
jQuery find和children方法使用
Jan 31 Javascript
js登录弹出层特效
Mar 07 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
Jun 07 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
jquery validation验证表单插件
Jan 07 Javascript
vue-router项目实战总结篇
Feb 11 Javascript
浅谈Vue数据响应
Nov 05 Javascript
原生js实现点击轮播切换图片
Feb 11 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 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
C# Assembly类访问程序集信息
2009/06/13 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
js自带函数备忘 数组
2006/12/29 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
javascript的事件触发器介绍的实现
2014/06/05 Javascript
JavaScript实现列出数组中最长的连续数
2014/12/29 Javascript
极易被忽视的javascript面试题七问七答
2016/02/15 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
2018/11/02 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
关于vue组件事件属性穿透详解
2019/10/28 Javascript
vue3.0 加载json的方法(非ajax)
2020/10/26 Javascript
ES6中的Javascript解构的实现
2020/10/30 Javascript
使用Python和Scribus创建一个RGB立方体的方法
2019/07/17 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
Python pickle模块实现对象序列化
2019/11/22 Python
Python递归求出列表(包括列表中的子列表)的最大值实例
2020/02/27 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
使用css3制作动感导航条示例
2014/01/26 HTML / CSS
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
安德玛比利时官网:Under Armour比利时
2019/08/28 全球购物
车辆维修工自我评价怎么写
2013/09/20 职场文书
师范学院毕业生求职信范文
2013/12/26 职场文书
优秀老员工获奖感言
2014/02/15 职场文书
党员承诺书怎么写
2014/05/20 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
Python中可变和不可变对象的深入讲解
2021/08/02 Python