gpt4 book ai didi

jQuery animate() 平滑

转载 作者:太空宇宙 更新时间:2023-11-04 12:31:15 27 4
gpt4 key购买 nike

我正在尝试制作一款倒置飞扬的小鸟游戏,但我面临一个大问题。

我尝试从上到下生成管道障碍物,但动画看起来很像文本编辑器,而且不流畅,所以我该如何平滑它?我尝试使用 requestanimationframe 函数,但我仍然无法获取它。

$(document).ready(function(){
//Variables
var screenWidth = $(window).width();//Screen width
var screenHeight = $(window).height();//Screen height
var birdWidth = $("#bird").width();//bird width
var y = 0;//Background y position
var astY = 0;//Pipe position

var bird = {//bird properties
goingLeft: false,
goingRight: false,
lspeed: 0,
rspeed: 0,
maxSpeed: 10
};

setBirdPosition(screenWidth/2 - birdWidth/2, screenHeight/1.3 - birdWidth/2);
startBackgroundMovement();
spawnPipe();


//Start move the screen
function startBackgroundMovement(){
setInterval(function()
{
y+=1;
$('body').css('background-position-y',y + 'px');
}, 10);
}


//bird starting position
function setBirdPosition(posX, posY) {
$("#bird").css("left", posX);
$("#bird").css("top", posY);
bird.position = posX;
}
(function birdLoop() {
if (bird.goingLeft) {
bird.lspeed = Math.min(bird.lspeed *1.1 || 1, bird.maxSpeed);
} else {
bird.lspeed = Math.max(bird.lspeed - 0.5, 0);
}
if (bird.goingRight) {
bird.rspeed = Math.min(bird.rspeed *1.1 || 1, bird.maxSpeed);
} else {
bird.rspeed = Math.max(bird.rspeed - 0.5, 0);
}
bird.position = bird.position + (bird.rspeed - bird.lspeed);
$("#bird").css('left', bird.position);
requestAnimationFrame(birdLoop);
}());

//Move bird
$(document).keydown(function(e){
switch(e.which){
case 37://left
bird.goingLeft= true;
//left edge of screen
if (bird.position < 0) {
bird.position = 0;
}
break;
case 39://right
bird.goingRight= true;
//right edge of screen
if (bird.position > screenWidth - birdWidth) {
bird.position = screenWidth - birdWidth;
}
default: return;
e.preventDefault();//not sure if needed
}
}).keyup(function(e){
switch(e.which){
case 37://left
bird.goingLeft= false;
//left edge of screen
if (bird.position < 0) {
bird.position = 0;
}
break;
case 39://right
bird.goingRight= false;
//right edge of screen
if (bird.position > screenWidth - birdWidth) {
bird.position = screenWidth - birdWidth;
}
default: return;
e.preventDefault();//not sure if needed
}
});

function spawnPipe()//spawn pipes
{
setInterval(function()
{
astY += 30;
$("#fullPipe").animate(
{
"top":astY
});
}, 1);
}
});

检查这个:http://jsfiddle.net/icy1337/u38ratk9/

最佳答案

setInterval(function()
{
astY += 1;
$("#fullPipe").css("top", astY);
}, 10);

示例:http://jsfiddle.net/u38ratk9/6/

更好? :)

关于jQuery animate() 平滑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27640842/

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