javascript - 我需要有关我用 javascript 制作的迷你游戏的帮助

Question

大家见鬼!感谢您提供任何类型的帮助!所以，我正在尝试制作某种 Sprite 游戏，但在加载更多 Sprite 时遇到问题。 Sprite 被加载到一个单独的 js 文件中。问题是它没有加载所有图像，当我移动它时，它会破裂，我并不是说它失败了，而是事实上它没有加载所有图像，并且有时 Angular 色会消失。

          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();
}

Sprite 是通过这些函数加载的:

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

你有很多图像，可能内存很重要。

但是当你制作 Sprite 时，策略是为你的玩家提供一个包含所有 Action 的图像:这是一个 Sprite !

你只需更改该图像的背景位置即可产生玩家奔跑的错觉!这和视差是一样的!

看看这个有趣的帖子:http://creativejs.com/2012/01/day-11-sprite-sheets/

在此您将看到两个策略:

• 我使用一个大图像文件并更改背景位置

• 其他使用 Canvas :http://jsfiddle.net/ejTCy/7/你只会看到一个图像文件

请注意，您也可以使用 css 制作 Sprite 表动画，并且始终只使用一个图像文件: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; }
}

但是多字符呢？如果我有很多敌人，我*想象 200 数百个两种类型的敌人*!

好吧，您将获得所有动画的两个图像，每种 Angular 色类型一个文件!

希望有帮助!

如果您想了解更多信息，请询问!我喜欢 Sprite 表游戏!