我需要一個迷你遊戲的幫助，我在javascript中製作

Question

大家好！感謝您提供任何形式的幫助！所以，我正在嘗試做一些精靈遊戲，並且我在加載更多精靈時遇到了問題。精靈加載在一個單獨的js文件中。問題是，它不會加載所有的圖像，當我將它移動到它周圍時，接縫會破裂，我並不意味着它會失敗，但事實上它不會加載所有圖像，並且有角色消失的時刻。

  engine.player = {}; 


      engine.player.sprite = []; 

      engine.player.spriteIndex = 27;//the initial sprite the one that faces south 



      engine.player.store = function(index, imgSrc) //function that store all the img 
      { 
     var sprite = [new Image(), false]; 

     sprite[0].src = imgSrc; 
     sprite[0].onload = function() 
    { 
     sprite[1] = true; 
    } 

    engine.player.sprite[index] = sprite; 
}; 



engine.player.retrieve = function(index) 
{ 
    return engine.player.sprite[index][0]; 
}; 




engine.player.allLoaded = function() 
{ 
    var i; 

    for(i=0; i<42; i++)//total number of img 
    { 
     if(engine.player.sprite[i][1] === false) 
     { 
     return false; 
     } 
    } 

    return true; 
}; 




engine.player.calcLoc = function()//starting calculating the possition on the screen 
{ 
    var character = { 
     width: Math.ceil(engine.player.sprite[0][0].width), 
     height: Math.ceil(engine.player.sprite[0][0].height) 
    }; 

    var screen = { 
     width: engine.screen.width, 
     height: engine.screen.height 
    }; 


    var x = (screen.width/2) - (character.width/2); 
    var y = (screen.height/2) - (character.height) + 8; 


    return {left: x, top: y}; 
}; 




engine.player.draw = function() 
{ 
    var loc = engine.player.calcLoc(); 

    engine.handle.drawImage(engine.player.sprite[engine.player.spriteIndex][0], loc.left, loc.top);//calculating the position acordanly to the top left corner 
}; 




engine.player.move = function(direction) 
{ 
    var index, x, y; 

    index = x = y = 0; 

    engine.keyboard.canInput = false; 

    switch(direction)//using the arrows to move the player 
    { 
     case 'up': index = 0; y = 1;  break; 
     case 'right': index = 24; x = -1;  break; 
     case 'left': index = 39; x = 1;  break; 
     case 'down': index = 27; y = -1;  break; 
    } 

    var toX = engine.viewport.x + (engine.screen.tilesX/2 - 0.5) - x; 
    var toY = engine.viewport.y + (engine.screen.tilesY/2 - 0.5) - y; 

    if(engine.currentMap[toY] && 
     engine.currentMap[toY][toX] && 
     engine.currentMap[toY][toX].item) 
    { 
     engine.keyboard.canInput = true; 
    }else{ 
     engine.viewport.playerOffsetX = x * 5; 
     engine.viewport.playerOffsetY = y * 5; 

     setTimeout(engine.player.animate, 200); 
     setTimeout(engine.player.reset, 100); 
    } 

    engine.player.spriteIndex = index; 
    engine.draw(); 
}; 





engine.player.animate = function() 
{ 
    var x, y 

    x = y = 0; 

    switch(engine.player.spriteIndex)/cases that face the north, south, east, west 
    { 
     case 0: y = 11; break; 
     case 24: x = -11; break; 
     case 27: y = -11; break; 
     case 39: x = 11; break; 
    } 

    engine.player.spriteIndex++; //here is one of the two possible mistakes 


    engine.viewport.playerOffsetX = x; 
    engine.viewport.playerOffsetY = y; 

    engine.draw(); 
}; 







engine.player.reset = function() 
{ 
    var index, x, y; 

    x  = engine.viewport.x; 
    y  = engine.viewport.y; 
    index = 0; 
    //and here is the big problem !!! here i most certainly made a mistake at these switch 
    switch(engine.player.spriteIndex) 
    { 
     case 1: 
     case 2: 
     case 3: 
     case 4: 
     case 5: 
     case 6: 
     case 7: 
     case 8: 
     case 9: 
     case 10: 
     case 11: 
     case 12: 
     case 13: 
     case 14: 
     case 15: 
     case 16: 
     case 17: 
     case 18: 
     case 19: 
     case 20: 
     case 21: 
     case 22: 
     case 23: y--; index = 0; break; 

     case 25: 
     case 26: x++; index = 24; break; 


     case 28: 
     case 29: 
     case 30: 
     case 31: 
     case 32: 
     case 33: 
     case 34: 
     case 35: 
     case 36: 
     case 37: 
     case 38: y++; 
     index = 27; break; 

     case 40: 
     case 41: x--; index = 39; break; 




    } 

    engine.viewport.x = x; 
    engine.viewport.y = y; 

    engine.keyboard.canInput = true; 

    engine.viewport.playerOffsetX = 0; 
    engine.viewport.playerOffsetY = 0; 

    engine.player.spriteIndex = index; 

    engine.draw(); 
} 

和精靈通過這些功能加載：

engine.start = function(mapData, x, y) 
{ 
    engine.output('starting...'); 

    engine.viewport.x = x; 
    engine.viewport.y = y; 

    engine.tile.store(0, 'images/tile_black.png'); 
    engine.tile.store(1, 'images/tile_grass.png'); 
    engine.tile.store(2, 'images/tile_rock.png'); 

    engine.player.store(0, 'images/scientist_n0.png'); 
    engine.player.store(1, 'images/scientist_n1.png'); 
    engine.player.store(2, 'images/scientist_n2.png'); 
    engine.player.store(3, 'images/scientist_n3.png'); 
    engine.player.store(4, 'images/scientist_n4.png'); 
    engine.player.store(5, 'images/scientist_n5.png'); 
    engine.player.store(6, 'images/scientist_n6.png'); 
    engine.player.store(7, 'images/scientist_n7.png'); 
    engine.player.store(8, 'images/scientist_n8.png'); 
    engine.player.store(9, 'images/scientist_n9.png'); 
    engine.player.store(10, 'images/scientist_n10.png'); 
    engine.player.store(11, 'images/scientist_n11.png'); 
    engine.player.store(12, 'images/scientist_n12.png'); 
    engine.player.store(13, 'images/scientist_n13.png'); 
    engine.player.store(14, 'images/scientist_n14.png'); 
    engine.player.store(15, 'images/scientist_n15.png'); 
    engine.player.store(16, 'images/scientist_n16.png'); 
    engine.player.store(17, 'images/scientist_n17.png'); 
    engine.player.store(18, 'images/scientist_n18.png'); 
    engine.player.store(19, 'images/scientist_n19.png'); 
    engine.player.store(20, 'images/scientist_n20.png'); 
    engine.player.store(21, 'images/scientist_n21.png'); 
    engine.player.store(22, 'images/scientist_n22.png'); 
    engine.player.store(23, 'images/scientist_n23.png'); 

    engine.player.store(24, 'images/scientist_e0.png'); 
    engine.player.store(25, 'images/scientist_e1.png'); 
    engine.player.store(26, 'images/scientist_e2.png'); 

    engine.player.store(27, 'images/scientist_s0.png'); 
    engine.player.store(28, 'images/scientist_s1.png'); 
    engine.player.store(29, 'images/scientist_s2.png'); 
    engine.player.store(30, 'images/scientist_s3.png'); 
    engine.player.store(31, 'images/scientist_s4.png'); 
    engine.player.store(32, 'images/scientist_s5.png'); 
    engine.player.store(33, 'images/scientist_s6.png'); 
    engine.player.store(34, 'images/scientist_s7.png'); 
    engine.player.store(35, 'images/scientist_s8.png'); 
    engine.player.store(36, 'images/scientist_s9.png'); 
    engine.player.store(37, 'images/scientist_s10.png'); 
    engine.player.store(38, 'images/scientist_s11.png'); 

    engine.player.store(39, 'images/scientist_w0.png'); 
    engine.player.store(40, 'images/scientist_w1.png'); 
    engine.player.store(41, 'images/scientist_w2.png'); 


    engine.setMap(mapData); 

    engine.draw(); 

    engine.keyboard.canInput = true; 

    engine.output('done'); 
}; 

Answer 1

你有很多圖片的大概內存問題。

但是當你正在做精靈的策略是讓你的球員擁有一個圖像：這是一個精靈！

而你只需要改變這張圖片的背景位置就可以讓玩家運行的幻覺！這和parralax是一樣的！

看這個interisting帖子：http://creativejs.com/2012/01/day-11-sprite-sheets/

在此，你會看到兩個策略：

• 礦用使用一個大的圖像文件，並更改背景位置

• 其他畫布：http://jsfiddle.net/ejTCy/7/您只會看到 單個圖像文件

注意，你可以做精靈表動畫與CSS也始終只是一個圖片文件：http://jsfiddle.net/simurai/CGmCe/

.hi { 
    width: 50px; 
    height: 72px; 
    background-image: url("http://files.simurai.com/misc/sprite.png"); 

    -webkit-animation: play .8s steps(10) infinite; 
     -moz-animation: play .8s steps(10) infinite; 
     -ms-animation: play .8s steps(10) infinite; 
     -o-animation: play .8s steps(10) infinite; 
      animation: play .8s steps(10) infinite; 
} 

@-webkit-keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -500px; } 
} 

@-moz-keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -500px; } 
} 

@-ms-keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -500px; } 
} 

@-o-keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -500px; } 
} 

@keyframes play { 
    from { background-position: 0px; } 
    to { background-position: -500px; } 
} 

但對於多字？如果我有很多敵人，我* magine 200幾種敵人兩種 *！

嗯，這是同樣的事情你會得到兩個圖像的所有動畫每個字符類型一個文件！

希望它有幫助！

如果你想了解更多的信息請教！我喜歡精靈紙牌遊戲！