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 相关文章推荐
才发现的超链接js导致网页中GIF动画停止的解决方法
Nov 02 Javascript
onkeyup,onkeydown和onkeypress的区别介绍
Oct 21 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
js限制checkbox选中个数以限制六个为例
Jul 15 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
JQuery为元素添加样式的实现方法
Jul 20 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
Dec 23 Javascript
js控制按钮,防止频繁点击响应的实例
Feb 15 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
Aug 29 jQuery
详解vue 图片上传功能
Apr 30 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
再次研究下cache_lite
2007/02/14 PHP
php 在线打包_支持子目录
2008/06/28 PHP
10条PHP编程习惯助你找工作
2008/09/29 PHP
php使用PDO方法详解
2014/12/27 PHP
微信自定义分享php代码分析
2016/11/24 PHP
php解析base64数据生成图片的方法
2016/12/06 PHP
PHP ADODB实现事务处理功能示例
2018/05/25 PHP
PHP远程连接oracle数据库操作实现方法图文详解
2019/04/11 PHP
laravel5.0在linux下解决.htaccess无效和去除index.php的问题
2019/10/16 PHP
通过javascript获取iframe里的值示例代码
2013/06/24 Javascript
js获取input长度并根据页面宽度设置其大小及居中对齐
2014/08/22 Javascript
javascript+canvas制作九宫格小程序
2014/12/28 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
2015/03/04 Javascript
jQuery实现锚点scoll效果实例分析
2015/03/10 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
JS得到当前时间的方法示例
2017/03/24 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
[36:22]VP vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
基于Python实现对PDF文件的OCR识别
2016/08/05 Python
快速了解Python相对导入
2018/01/12 Python
pandas 按照特定顺序输出的实现代码
2018/07/10 Python
windows安装TensorFlow和Keras遇到的问题及其解决方法
2019/07/10 Python
python原类、类的创建过程与方法详解
2019/07/19 Python
Pycharm无法打开双击没反应的问题及解决方案
2020/08/17 Python
Aosom西班牙:家具在线商店
2020/06/11 全球购物
几道PHP的面试题
2012/05/19 面试题
出纳工作岗位责任制
2014/02/02 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
县人大领导班子四风对照检查材料思想汇报
2014/10/09 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书