Спрайты не загружаются на холст

Question

Я пытаюсь создать игру с анимацией спрайтов, но я не могу одновременно загружать как анимированный спрайт, так и холст. Когда холст загружается, в консоли нет ошибки, но я не вижу спрайт на холсте. Когда я немного меняю код (например, вызываю «Sprites()» в функции рендеринга), анимированный спрайт появляется, но остальная часть холста пуста.

Вот области кода, которые я считаю, что ошибки в:

app.js

/* 
    Sonic class creates the player's character, Sonic the Hedgehog 
    Parameters - 
     x and y are the player's initial coordinates 
     sprites passes in a sprite object to add animation 
     speed is the pace of the game based on level 
*/ 
var Sonic = function(x, y) { 
    // set initial sprite/image 
    this.sprite = Sprites; 

    this.x = x; 
    this.y = y; 

    // set initial score to 0 
    this.score = 0; 

    // set initial life count to 3 
    this.lives = 3; 

    // initialize sonic as alive 
    this.alive === false; 
}; 

/* 
    Update sonic's sprite to give the appearance of movement 
    Parameter - dt, the time delta between loops 
*/ 
Sonic.prototype.update = function(dt) { 

    // Sprites(); 

}; 

/* 
    Draw the player character on the screen in canvas' context 
*/ 
Sonic.prototype.render = function() { 
    // ctx.drawImage(Resources.get(this.sprite), 30, 250); 
}; 

// create new instance of sonic 
var sonic = new Sonic(30, 250); 

sprites.js

var Sprites = (function(global) { 

    var sonicSprite, 
     soniceSpriteImg; 

    // update and render sprite at same speed as browser redraws 
    function gameLoop() { 
     window.requestAnimationFrame(gameLoop); 
     ctx.clearRect(0, 0, 760, 608); 
     sonicSprite.update(); 
     sonicSprite.render(); 
    } 

    function sprite(options) { 

     var obj = {}, 
      // current frame 
      frameIndex = 0, 
      // number of updates since current frame was displayed 
      tickCount = 0, 
      // number of updates until next frame should be displayed 
      ticksPerFrame = options.ticksPerFrame || 0; 
      // number of frames in sprite sheet 
      numberOfFrames = options.numberOfFrames || 1; 

     obj.context = options.context; 
     obj.width = options.width; 
     obj.height = options.height; 
     obj.image = options.image; 

     obj.update = function() { 
      tickCount += 1; 

      // reset tickCount once it is surpasses ticks per frame 
      if (tickCount > ticksPerFrame) { 
       tickCount = 0; 

       // increase frameIndex if it is less than number of frames 
       if (frameIndex < numberOfFrames - 1) { 
        // go to next frame 
        frameIndex += 1; 
       } else { 
        // reset frameIndex to loop if out of frames 
        frameIndex = 0; 
       } 
      } 
     }; 

     obj.render = function() { 
      // clear the canvas 
      // obj.context.clearRect(0, 0, obj.width, obj.height); 

      // draw animation 
      obj.context.drawImage(
       obj.image, 
       frameIndex * obj.width/numberOfFrames, 
       0, 
       obj.width/numberOfFrames, 
       obj.height, 
       0, 
       0, 
       obj.width/numberOfFrames, 
       obj.height); 
     }; 

     // obj.render(); 

     return obj; 
    } 

    sonicSpriteImg = new Image(); 

    sonicSprite = sprite({ 
     context: ctx, 
     width: 408.8, 
     height: 117, 
     image: sonicSpriteImg, 
     numberOfFrames: 4, 
     ticksPerFrame: 3 
    }); 

    // start game loop as soon as sprite sheet is loaded 
    sonicSpriteImg.addEventListener("load", gameLoop); 
    sonicSpriteImg.src = "images/sonicrunningsheet.png"; 
}()); 

Полный исходный код для этого проекта здесь (пожалуйста, извините грязные части, это все еще продолжается) https://github.com/alexxisroxxanne/sonicvszombies

Домашняя страница для этого текста: http://alexxisroxxanne.github.io/sonicvszombies/

Любая помощь была бы принята с благодарностью! Благодаря!

Answer 1

В конструкторе Sonic вы назначаете this.sprite для результата Sprites IIFE.

var Sonic = function(x, y) { 
    // set initial sprite/image 
    this.sprite = Sprites; 
    ... 

Sprites IIFE ничего не возвращает, поэтому Sprites всегда не определено. Я думаю, вы хотите вернуть sonicSpriteImg.

... 
    sonicSpriteImg = new Image(); 

    sonicSprite = sprite({ 
     context: ctx, 
     width: 408.8, 
     height: 117, 
     image: sonicSpriteImg, 
     numberOfFrames: 4, 
     ticksPerFrame: 3 
    }); 

    // start game loop as soon as sprite sheet is loaded 
    sonicSpriteImg.addEventListener("load", gameLoop); 
    sonicSpriteImg.src = "images/sonicrunningsheet.png"; 

    return sonicSpriteImg; 
}()); 

В функции Sonic render вы получаете спрайт из ресурсов. Ресурсы возвращаются туда не определенно. Причина в том, что this.sprite не является URL-адресом img, как на других объектах (Zombie, Nyancat и т. Д.), Но является объектом img. Таким образом, вам не нужно получать его из ресурсов.

Sonic.prototype.render = function() { 
    // ctx.drawImage(Resources.get(this.sprite), 30, 250); 
    ctx.drawImage(this.sprite, 30, 250); 
}; 

Answer 2

Моя проблема была решена, когда я переехал переменные sonicSprite и sonicSpriteImg вне функции спрайтов и в глобальном контексте, а затем, в app.js, называя sonicSprite.update(); в Sonic.prototype.update() и вызывая sonicSprite.render(); в Sonic.prototype.render()