js游戏人物上下左右跑步效果代码分享
更新时间：2015年08月28日 11:37:35 投稿：lijiao
这篇文章主要介绍了js游戏人物上下左右跑步效果，推荐给大家，有需要的小伙伴可以参考下。
本文实例讲述了js游戏人物上下左右跑步效果。分享给大家供大家参考。具体如下：
js游戏人物上下左右跑步效果是一款jquery ui制作的点击按钮网格布局头像图片动画切换特效。你操控着游戏人物，掌控一切是不是很有意思，感兴趣的小伙伴们可以学习一下
运行效果图：-------------------查看效果 下载源码-------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的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游戏人物上下左右跑步效果代码，希望大家可以喜欢。
相关文章
React Hook 是 React 16.8 版本引入的一项新特性，它能够让函数组件拥有类组件中的状态(state)和生命周期方法(lifecycle methods)等功能。Vue 3.x 开始引入了 Hooks API，用于在函数式组件中实现状态和生命周期的管理。本文介绍的非常详细，需要的朋友可以参考下2023-04-04
下面小编就为大家带来一篇js弹出窗口返回值的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
JavaScript的解构赋值是ES6引入的语法,允许以简洁的方式从数组或对象中提取数据并赋值给变量,包括数组解构、对象解构、参数解构、变量交换等,它可以大幅简化代码,提高开发效率,下面就一起来了解一下2024-09-09
今天小编就为大家分享一篇解决layui的radio属性或别的属性没显示出来的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
由于业务需要，要求实现树形菜单，且菜单数据由后台返回，下面这篇文章主要给大家介绍了关于js如何构造elementUI树状菜单的数据结构的相关资料,需要的朋友可以参考下2021-05-05
本文主要介绍了jQuery实现动态文字搜索功能的分析过程，文章底部提供了完整的代码。具有一定的参考价值，下面跟着小编一起来看下吧2017-01-01
本篇文章主要是对点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
这篇文章主要介绍了详解ES6中的 Set Map 数据结构学习总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要为大家介绍了tkinter使用canvas实现渐变色，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
这篇文章主要介绍了JavaScript实现的浮动层框架用法,以实例形式分析了JavaScript实现可关闭的半透明浮动层相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
最新评论