本文實例講述了js游戲人物上下左右跑步效果。分享給大家供大家參考。具體如下：
js游戲人物上下左右跑步效果是一款jquery ui制作的點擊按鈕網(wǎng)格布局頭像圖片動畫切換特效。你操控著游戲人物，掌控一切是不是很有意思，感興趣的小伙伴們可以學(xué)習(xí)一下
運行效果圖：-------------------查看效果 下載源碼-------------------
小提示：瀏覽器中如果不能正常運行，可以嘗試切換瀏覽模式。
為大家分享的jQuery實現(xiàn)熱氣球動畫背景登錄框代碼如下
<!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游戲人物上下左右跑步效果代碼，希望大家可以喜歡。
新聞熱點
疑難解答
