Easel.js> Was ist falsch an diesem Code?

Was ist falsch an diesem Code? : S .. Meine Leinwand bleibt leer. Die Bild-URL ist korrekt und das Bild wird geladen.Easel.js> Was ist falsch an diesem Code?

Das ist mein engine.js Datei:

var canvas; 
var stage; 

function init() 
{ 
    canvas = document.getElementById("canvas"); 
    stage = new Stage(canvas); 

    playerImg  = new Image(); 
    playerImg.src = 'img/player/walkingbl.png'; 
    playerImg.onload = onPlayerLoaded; 

    Ticker.setFPS(30); 
    Ticker.addListener(window); 
} 

function tick() 
{ 
    stage.update(); 
} 

function onPlayerLoaded() 
{ 
    console.log(playerImg); 
    player  = new Bitmap(playerImg); 
    player.x = 300; 
    player.y = 450; 

    stage.addChild(player); 

    console.log('Player added to stage'); 
} 

$(document).ready(function(){ 

init(); 

});

Und das ist meine Datei index.html:

<!DOCTYPE html> 
<html> 
<head> 
      <title>Game Engine</title> 
      <link rel="stylesheet" href="css/main.css" /> 
</head> 
<body> 
     <div id='container'> 
      <canvas id='#canvas' width='1000' height='350'></canvas> 
     </div> 

      <script src="js/jquery.js"></script> 
      <script src="js/easel.js"></script> 
     <script src='js/engine.js'></script> 
</body>

Ich bin neu in der ganzen easel.js und Habe nie etwas mit Flash oder ActionScript gemacht. Ich bin ein PHP-Entwickler auswendig, also ist dies ein ziemlich großer Übergang für mich. Das Fehlen von Dokumentationen/Tutorials/Beispielen macht es mir sehr schwer zu lernen, wie man staffel.js benutzt. Also, wenn Sie irgendwelche Hinweise oder Ressourcen für mich haben, zu überprüfen. Bitte teilen!

Quelle

2012-03-29 Nick Verheijen

Alle Fehler in der Browser-Konsole? –

Nein, keine. Es protokolliert das Bild und den "Spieler, der zur Bühne hinzugefügt wurde" perfekt. –

Diese Zeile ist falsch:

<canvas id='#canvas' width='1000' height='350'></canvas>

Die ID tut ein # benötigen. die rechte Linie ist:

<canvas id='canvas' width='1000' height='350'></canvas>

aber ich würde nicht das Wort „Leinwand“ als Bezeichner verwenden, da es mit dem Tag verwechselt werden könnte. Bessere Nutzung:

<canvas id='mycanvas' width='1000' height='350'></canvas>

und den Code JS ändern:

canvas = document.getElementById("mycanvas");

Quelle

2012-03-29 15:48:11

Sie halten sich an Ihren Namen. Vielen Dank Kumpel. Kann nicht glauben, wie ich diese xD übersehen habe. –

Easel.js> Was ist falsch an diesem Code?

Antwort

Verwandte Themen