js游戏人物上下左右跑步效果代码分享
投稿：lijiao
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了js游戏人物上下左右跑步效果，推荐给大家，有需要的小伙伴可以参考下。
本文实例讲述了js游戏人物上下左右跑步效果。分享给大家供大家参考。具体如下：
js游戏人物上下左右跑步效果是一款jquery ui制作的点击按钮网格布局头像图片动画切换特效。你操控着游戏人物，掌控一切是不是很有意思，感兴趣的小伙伴们可以学习一下
运行效果图：------------------- -------------------
小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。
为大家分享的jQuery实现热气球动画背景登录框代码如下
&!DOCTYPE html&
&title&js游戏人物上下左右跑步效果 &/title&
&meta charset="utf-8"/&
&style type="text/css"&
right: 100
width: 150
height: 150
height: 30
background:
font-weight:
border-radius: 5
&img id="im" src="images/down-0.png" /&
&td&&input id="leftUp" type="button" value="左上" /&&/td&
&td&&input id="goUp" type="button" value="向上" /&&/td&
&td&&input id="rightUp" type="button" value="右上" /&&/td&
&td&&input id="goLeft" type="button" value="左" /&&/td&
&td&&input id="stop" type="button" value="停止" /&&/td&
&td&&input id="goRight" type="button" value="右" /&&/td&
&td&&input id="leftDown" type="button" value="左下" /&&/td&
&td&&input id="goDown" type="button" value="向下" /&&/td&
&td&&input id="rightDown" type="button" value="右下" /&&/td&
&script type="text/javascript"&
var i = 0, clc = null,
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';
case 2: images.src = 'images/down-0.png';
case 3: images.src = 'images/left-0.png';
case 4: images.src = 'images/right-0.png';
case 5: images.src = 'images/rightUp-0.png';
case 6: images.src = 'images/rd-0.png';
case 7: images.src = 'images/ld-0.png';
case 8: images.src = 'images/lu-0.png';
clearInterval(clc);
oGoUp.onclick = function(){
clearInterval(clc);
clc = setInterval("goUp(i++);", 100);
function goUp(){
i = i % 4;
var name ="images/up-" + i + "." + "png";
images.src =
images.style.top = parseInt(images.style.top) - 10 + 'px';
flage = 1;
oGoDown.onclick = function(){
clearInterval(clc);
clc = setInterval("goDown(i++);", 100);
function goDown(){
i = i % 4;
var name ="images/down-" + i + "." + "png";
images.src =
images.style.top = parseInt(images.style.top) + 10 + 'px';
flage = 2;
oGoLeft.onclick = function(){
clearInterval(clc);
clc = setInterval("goLeft(i++);", 100);
function goLeft(){
i = i % 4;
var name ="images/left-" + i + "." + "png";
images.src =
images.style.left = parseInt(images.style.left) - 10 + 'px';
flage = 3;
oGoRight.onclick = function(){
clearInterval(clc);
clc = setInterval("goRight(i++);", 100);
function goRight(){
i = i % 4;
var name ="images/right-" + i + "." + "png";
images.src =
images.style.left = parseInt(images.style.left) + 10 + 'px';
flage = 4;
oRightUp.onclick = function(){
clearInterval(clc);
clc = setInterval("goRightUp(i++);", 100);
function goRightUp(){
i = i % 4;
var name ="images/rightUp-" + i + "." + "png";
images.src =
images.style.left = parseInt(images.style.left) + 10 + 'px';
images.style.top = parseInt(images.style.top) - 10 + 'px';
flage = 5;
oRightDown.onclick = function(){
clearInterval(clc);
clc = setInterval("goRightDown(i++);", 100);
function goRightDown(){
i = i % 4;
var name ="images/rd-" + i + "." + "png";
images.src =
images.style.left = parseInt(images.style.left) + 10 + 'px';
images.style.top = parseInt(images.style.top) + 10 + 'px';
flage = 6;
oLeftDown.onclick = function(){
clearInterval(clc);
clc = setInterval("goLeftDown(i++);", 100);
function goLeftDown(){
i = i % 4;
var name ="images/ld-" + i + "." + "png";
images.src =
images.style.left = parseInt(images.style.left) - 10 + 'px';
images.style.top = parseInt(images.style.top) + 10 + 'px';
flage = 7;
oLeftUp.onclick = function(){
clearInterval(clc);
clc = setInterval("goLeftUp(i++);", 100);
function goLeftUp(){
i = i % 4;
var name ="images/lu-" + i + "." + "png";
images.src =
images.style.left = parseInt(images.style.left) - 10 + 'px';
images.style.top = parseInt(images.style.top) - 10 + 'px';
flage = 8;
&div style="text-align:clear:both"&
以上就是为大家分享的js游戏人物上下左右跑步效果代码，希望大家可以喜欢。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具类似航海王启航的游戏_类似航海王启航的手机游戏_5577我机网
您的位置： >
> 类似航海王启航的游戏
类似航海王启航的游戏
软件大小：90.2M
更新时间：15-03-17
软件语言：中文
应用平台：Android
软件等级：
90.2M|中文|
119.7M|中文|
82.8M|中文|
68.1M|中文|
75.7M|中文|
81.8M|中文|