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 相关文章推荐
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
div层的移动及性能优化
Nov 16 Javascript
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
js键盘上下左右键怎么触发function(实例讲解)
Dec 14 Javascript
JavaScript动态插入CSS的方法
Dec 10 Javascript
jQuery Ajax Post 回调函数不执行问题的解决方法
Aug 15 Javascript
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
原生js实现form表单序列化的方法
Aug 02 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
微信小程序实现watch监听
Jun 04 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 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
实现了一个PHP5的getter/setter基类的代码
2007/02/25 PHP
PHP 采集程序原理分析篇
2010/03/05 PHP
php文档更新介绍
2011/07/22 PHP
ThinkPHP实现带验证码的文件上传功能实例
2014/11/01 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
PHP图像识别技术原理与实现
2016/10/27 PHP
PHP大文件及断点续传下载实现代码
2020/08/18 PHP
FCK调用方法..
2006/12/21 Javascript
javascript 面向对象 function类
2010/05/13 Javascript
extjs 初始化checkboxgroup值的代码
2011/09/21 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
js实现动态添加上传文件页面
2018/10/22 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
2019/02/22 Javascript
JS XMLHttpRequest原理与使用方法深入详解
2020/04/30 Javascript
在Python中使用成员运算符的示例
2015/05/13 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
python 实现一个反向单位矩阵示例
2019/11/29 Python
Python-openCV读RGB通道图实例
2020/01/17 Python
Python实现计算长方形面积(带参数函数demo)
2020/01/18 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
python设置表格边框的具体方法
2020/07/17 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
编辑找工作求职信分享
2014/01/03 职场文书
班级文化建设标语
2014/06/23 职场文书
小学国庆节活动总结
2015/03/23 职场文书
python实现图片批量压缩
2021/04/24 Python
MySQL日期时间函数知识汇总
2022/03/17 MySQL