위, 아래, 왼쪽, 오른쪽으로 달리는 js 게임 캐릭터 효과 코드 공유_자바스크립트 기술
- WBOY원래의
- 2016-05-16 15:41:591832검색
이 기사의 예에서는 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 게임 캐릭터입니다. 마음에 드셨으면 좋겠습니다.
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.