gpt4 book ai didi

javascript - 如何在 Javascript 中平滑地移动 Angular 色(没有 Canvas)

转载 作者:太空狗 更新时间:2023-10-29 15:44:54 25 4
gpt4 key购买 nike

我正在努力为我目前正在尝试开发的 js 游戏中的 Angular 色制作动画。我不能使用 Canvas ,所以它只是 DIV。使用当前功能,我可以向左/向右移动我的 Angular 色,但它一点也不流畅,有点“一步一步”。我一直在寻找答案,但我找到的唯一解决方案是使用 Canvas 。

这是我的代码(在全屏下效果更好,但位置有点问题):

function avancerRight()
{
var batman=document.getElementById("batman");
x=batman.style.left;

batman.className="dirDroite";
batman.style.left=parseInt(x)+10+"px";

return false;
}

function avancerLeft()
{
console.log("dedede");
var batman=document.getElementById("batman");
x=batman.style.left;

batman.className="dirGauche";
batman.style.left=parseInt(x)-10+"px";

return false;
}



var jumpHeight = 200;
var jumping = false;
function jump() {

if (!jumping) {
jumping = true;
setTimeout(land, 500);
}

if (jumping) {
y=batman.style.top;

batman.style.top=parseInt(y)-jumpHeight+"px";
}
}

function land()
{
jumping=false;

y=batman.style.top;

batman.style.top=parseInt(y)+jumpHeight+"px";
}
body {
padding: 0;
margin: 0;
background: url('http://image.noelshack.com/fichiers/2015/16/1428996568-bg.png');
background-color: #B4381F;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100%;
background-position: 50% 30%;

}

#batman{
background-image:url('http://image.noelshack.com/fichiers/2015/16/1428996568-batman.png');
width:85px;
height:85px;
display:block;
background-repeat: no-repeat;
position:absolute;
margin-top: -80px;
}

.dirDroite{
background-position: -95px 0px;
}

.dirGauche{
background-position: 0px 0px;
}

#fullbody {
margin: auto;
width: 100%;
height: 100%;
}

#floor {
position: absolute;
right: 0;
bottom: 0;
left: 0;
background: url("http://image.noelshack.com/fichiers/2015/16/1428996568-platform5.png");
background-repeat: repeat-x;
background-size: 100% 100%;
height: 126px;

}

#base {
position: absolute;
right: 0;
bottom: 80px;
left: 0;
z-index: 200;
margin: auto;
background: url('http://image.noelshack.com/fichiers/2015/16/1428996568-thefloor.png');
background-size: cover;
height: 70.56px;
width: 846.72px;
margin-top : 13.2vh;
}



#perspectiveGauche{
margin-top : 15vh;
-webkit-perspective: 4vh;
perspective: 4vh;
position: absolute;
width: 45vw;
perspective-origin: 50% 0%;
}

#rectangleHautGaucheH{
margin-left: 13.22vh;
width: 28.87vw;
height: 2vh;
background-color: #854305;
-webkit-transform: rotateX(2deg);
transform: rotateX(2deg);
}

#rectangleBasGaucheH{
width: 29.1vw;
margin-left: 13vh;
height: 3vh;
background-color: #663303;
}

#perspectiveGaucheBasse{
margin-top : 15vh;
-webkit-perspective: 0.1vh;
perspective: 0.1vw;
position: absolute;
width: 45vw;
perspective-origin: 50% 0%;
}

#rectangleHautGaucheB{
margin-top: 38vh;
margin-left: 28vh;
width: 15vw;
height: 0.25vh;
background-color: #854305;
-webkit-transform: rotateX(2deg);
transform: rotateX(2deg);
}

#rectangleBasGaucheB{
margin-top: 0.6vh;
width: 15.25vw;
margin-left: 27.75vh;
height: 3vh;
background-color: #663303;
}

#perspectiveDroite{
-webkit-perspective: 4vh;
perspective: 4wh;
position: absolute;
width: 39.6vw;
height: 2vh;
margin-top: 15vh;
perspective-origin: 200% 0%;
}

#rectangleHautDroitH{
margin-left: 125vh;
width: 28.7vw;
height: 2vh;
background-color: #854305;
-webkit-transform: rotateX(2deg);
transform: rotateX(2deg);
}

#rectangleBasDroitH{
width: 28.9vw;
margin-left: 124.8vh;
height: 3vh;
background-color: #663303;
}

#rectangleHautDroiteB{
margin-top: 37vh;
margin-left: 133vh;
width: 22vw;
height: 2vh;
background-color: #854305;
-webkit-transform: rotateX(2deg);
transform: rotateX(2deg);
}

#rectangleBasDroiteB{
margin-top: 0.2vh;
width: 22.18vw;
margin-left: 132.8vh;
height: 3vh;
background-color: #663303;
}

#perspectiveMilieu{
-webkit-perspective: 4vh;
perspective: 4wh;
position: absolute;
width: 39.6vw;
height: 2vh;
margin-top: 15vh;
perspective-origin: 130% 0%;

}

#rectangleHautMilieu{
margin-top: 21vh;
margin-left: 68.95vh;
width: 34.5vw;
height: 2vh;
background-color: #854305;
-webkit-transform: rotateX(2deg);
transform: rotateX(2deg);

}

#rectangleBasMilieu{
margin-top: 0.1vh;
width: 34.77vw;
margin-left: 68.7vh;
height: 3vh;
background-color: #663303;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LEVEL 1 NEGRILLON</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="scripts/script.js" ></script>
</head>
<body>


<div id="fullbody">

<div id="perspectiveGauche">
<div id="rectangleHautGaucheH"></div>
<div id="rectangleBasGaucheH"></div>
</div>
<div id="perspectiveGaucheBasse">
<div id="rectangleHautGaucheB"></div>
<div id="rectangleBasGaucheB"></div>
</div>

<div id="perspectiveDroite">
<div id="rectangleHautDroitH"></div>
<div id="rectangleBasDroitH"></div>
<div id="rectangleHautDroiteB"></div>
<div id="rectangleBasDroiteB"></div>
</div>

<div id="perspectiveMilieu">
<div id="rectangleHautMilieu"></div>
<div id="rectangleBasMilieu"></div>
</div>


<div id="base"></div>

<div id="floor"></div>

<!--<div id="platform1"></div>

<div id="platform5"></div>
<div id="floor">-->

<div id="batman" class="dirDroite" style="left:700px;top:280px;"></div>
<div id="zone" style="left:300px;top:50px;"></div>




<script>
document.onkeydown = pave;
function pave(e) {
e = e || window.event;
if (e.keyCode == '38') {
jump();
}
else if (e.keyCode == '40') {
avancerBottom();
}
else if (e.keyCode == '37') {
avancerLeft();
}
else if (e.keyCode == '39') {
avancerRight();
}
}

</script>
</div>

</body>
</html>

此外,我正在尝试实现一个跳跃 Action ,如果您有任何想法来制作整个 Action 而不仅仅是“传送”,我将不胜感激。

谢谢大家!干杯。

最佳答案

必须做一些调整!

http://codepen.io/smartsendy34/pen/emqdEm

现在向右移动更流畅了!

//使用 JAVASCRIPT

var moveKey = 0;
var moveTime = 0 ;
var frames = 10;
var second = 50;
var fps = second/frames;

function avancerRight()
{
var batman=document.getElementById("batman");
x=parseInt(batman.style.left);

batman.className="dirDroite";

clearTimeout(moveTime);
moveTime = setTimeout(function(){
clearInterval(moveKey);
},second);

clearInterval(moveKey);
moveKey = setInterval(function(){
x = x+(10 / frames);
batman.style.left = x + "px";
},fps);

return false;
}

//使用 JQUERY

function avancerRight()
{
var batman=document.getElementById("batman");
x=batman.style.left;

batman.className="dirDroite";
$(batman).stop().animate({"left":(x+10)},100);

return false;
}

关于javascript - 如何在 Javascript 中平滑地移动 Angular 色(没有 Canvas),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29621501/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com