Question

我正在为FreeCodeCamp的前端证书做最后的项目。我把它变成了一个格斗游戏，按钮序列开始移动。问题是动画真的很麻烦。以下是详细信息：

--- ---背景 - codepen链接和代码位于底部 - 当我在本地编码时，一切都运行良好，玩家的动作是使用基于jquery的动画完成的。（我使用了setTimeout（），animation（），css（）和attr（）来移动虚拟形象并切换图片以显示移动

- 问题--- - 我把代码放在codepen上，所以我需要托管精灵图像来使用它们（我使用了dropbox）。此更改导致动画无法正常工作。一些图像和声音加载缓慢或根本不加载。如果你去codepen并尝试底部的按钮，你会很快看到我的意思。

---我尝试了什么--- - 我认为这可能是一个问题，应用程序花了太长时间来加载资产并缓存它们。（因为在我重复之后，一些动画变得更加流畅）所以我在顶部附近添加了一个函数来加载照片的开头＆＃39; imageInit（）＆＃39;。但问题仍然存在。

任何人都可以帮我弄清楚是什么让我的jquery动画变得如此不稳定和不一致？我可能使用错误的技术吗？如果您需要更多信息，请与我们联系。代码如下：

谢谢！

JK

代码在这里：https://codepen.io/jonnnyk20/pen/XaPqrR，这里是项目的一些代码：

＆＃13;

     HostKeyAlgorithms ssh-dss

＆＃13;

var playerSpace = $('.player-space');
var playerAvatar =  $('#player-image');

var playerImages = {
  "basic": "https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-basic.png",
  "attack": "https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-attack.png",
  "attack2": "https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-attack2.png",
  "attack3": "https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/images/goku/goku-attack3.png" }
  
  var tlp = new Audio('https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/sounds/misc/instant-transmission.mp3');
var hitSound = new Audio('https://u57193820.dl.dropboxusercontent.com/u/57193820/saiyan-says/sounds/misc/hit.mp3');

function imageInit(obj){
  for (image in obj){
    $('<img/>')[0].src = console.log(obj[image]);
  }
}
imageInit(miscImages);
imageInit(playerImages);
imageInit(enemyImages);


function attackAnimation(){
  playerAvatar.attr("src", miscImages['blur']);
  playerAvatar.fadeOut( 100, function() {
    // Animation complete.
    playerAvatar.fadeIn( 100, function() {
    // Animation complete
       playerAvatar.attr("src", playerImages['attack']);
       enemyAvatar.attr("src", enemyImages['hurt']);
       hitSound.play();
       playerSpace.css({ left: "55%"});
       setTimeout(function(){
         playerAvatar.attr("src", miscImages['blur']);
         playerAvatar.fadeOut( 100, function() {
           playerAvatar.fadeIn( 100, function() {
             playerAvatar.attr("src", playerImages['basic']);
             enemyAvatar.attr("src", enemyImages['basic']);
             playerSpace.css({ left: "20%"});
           })
         })
       }, 200)
     });
  });
}

＆＃13;

.container {
  padding: 10px;
}

.row {
  margin: 0;
}

.element {
  display: inline-block;
  background-color: white;
  color: #0275d8;
  border: solid 1px #0275d8;
  border-radius: 50px;
  min-width: 75px;
  min-height: 75px;
  text-align: center;
  padding: 10px;
  margin: 5px;
  padding-top: 25px;
}

.progress {
  margin: 5px;
}

.healthBar {
  min-height: 20px;
  width: 100%;
  border-radius: 5px;
  padding-left: 5px;
  color: #023a6b;
}
.hb-label {
    position: absolute;
    margin-left: 5px;
    font-size: small;
}

.healthBarContainer {
background-color: white; 
  border-radius: 5px;
  margin: 5px;
  border: solid 1px #3b66e6;
}

.gameInfo {
    margin: 5px;
    border: solid 1px gray;
    padding: 5px;
    /* background-color: #ececec; */
    border-radius: 5px;
    display: inline-block;
}

.game-screen {
    background-color: #b2ebff;
    border: solid 1px #0275d8;
    height: 228px;
}

.game-control {
    border: solid 1px #0275d8;
    border-left: none;
    text-align: center;
    padding: 10px;
}
.button-group {
    margin: auto;
}

.game-header {
    border: solid 1px #0275d8;
    border-bottom: none;
    text-align: center;
    z-index: 1;
    background-color: white;
}
.game-settings {
    border: solid 1px #0275d8;
    border-top: none;
    text-align: center;    
}

.block {
    margin-right: 40px;
}

.attack {
    margin-bottom: -20px;
}

.dodge {
    margin-top: -20px;
}

.fighter-space {
    /* border: solid 1px #3b66e6; */
    border-radius: 20px;
    height: 100px;
    width: 100px;
    text-align: center;
}

.enemy-space {
    position: absolute;
    right: 20%;
    top: 30px;
}

.player-space {
    position: absolute;
    left: 20%;
    top: 30px;
    z-index: 1;
}

.half {
    float: left !important;
    width: 50% !important;
    z-index: 1;
}

.ki-space {
    display:none;
    position: absolute;
    top: 30px;
    left: 30%;
    z-index: 1;
}

.lazer-space {
    position: absolute;
    top: 9px;
    left: 27%;
    display: none;
}

.test-actions {
    margin: 10px;
}

.fighter-space.km-space {
    position: absolute;
    top: 25px;
    left: 20%;
    display:none;
    z-index:1
}
.km-space {
    z-index: 2
}

.fighter-space.db-space {
    position: absolute;
    top: -80px;
    right: 20%;
    display: none;
}

img#db-image {
    margin-top: 40px;

}
#separate {
  font-weight: bold;
  margin: 10px;
  font-size: large;
  color: crimson
}

＆＃13;

基于jQuery的FreeCodeCamp项目动画很慢且不一致

0 个答案: