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支持带x身份证号码验证函数
Aug 10 Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
jquery下checked取值问题的解决方法
Aug 09 Javascript
JS实现根据出生年月计算年龄
Jan 10 Javascript
jquery 中的each()跳出循环的语句
May 23 Javascript
jquery获取checkbox的值并post提交
Jan 14 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
基于AngularJS前端云组件最佳实践
Oct 20 Javascript
HTML元素拖拽功能实现的完整实例
Dec 04 Javascript
深入浅析React中diff算法
May 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
Search Engine Friendly的URL设计
2006/10/09 PHP
PHP addcslashes()函数讲解
2019/02/03 PHP
jquery异步循环获取功能实现代码
2010/09/19 Javascript
jQuery之日期选择器的深入解析
2013/06/19 Javascript
javascript显示用户停留时间的简单实例
2013/08/05 Javascript
php和js对数据库图片进行等比缩放示例
2014/04/28 Javascript
javascript校验价格合法性实例(必须输入2位小数)
2014/05/05 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
Node.js事件驱动
2015/06/18 Javascript
Bootstrap按钮下拉菜单组件详解
2016/05/10 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
2020/07/22 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
[05:13]TI4 中国战队 机场出征!!
2014/07/07 DOTA
python访问类中docstring注释的实现方法
2015/05/04 Python
初步剖析C语言编程中的结构体
2016/01/16 Python
python 根据正则表达式提取指定的内容实例详解
2016/12/04 Python
浅谈python socket函数中,send与sendall的区别与使用方法
2017/05/09 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
Python global全局变量函数详解
2018/09/18 Python
使用python3实现操作串口详解
2019/01/01 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
使用HTML5和CSS3表单验证功能
2017/05/05 HTML / CSS
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
意大利奢华内衣制造商:Cosabella
2017/08/29 全球购物
学雷锋活动总结范文
2014/04/25 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
作风建设年活动总结
2014/08/27 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
2015年药房工作总结
2015/04/25 职场文书
幼儿园大班开学寄语(2015秋季)
2015/05/27 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js
vue修饰符.capture和.self的区别
2022/04/22 Vue.js